ES6新增特性 --語法篇（四） --- 異步操作

5、異步操作

優點：

• 同時進行多個操作
• 用戶體驗比較好

缺點：

• 容易陷入回調地獄

5.1、解決辦法一：Promise

Promise 實際上是封裝了 回調

5.1.1、使用方法：

1. 寫請求方法

// ajax也返回一個 promise，這裏封裝是爲了理解
let p = new Promise((resolve, reject) => {
  $.ajax({
    // url: 路徑
    url: '1.txt',
    dataType: 'json',
    // 成功
    success: res => {
      resolve(res)
    },
    // 失敗
    err: err => {
      reject(err)
    }
  })
})

2. 寫調用方法

p.then(res => {
  console.log("成功")
  console.log(res)
}, err => {
  console.log("失敗")
  console.log(err)
})

5.1.2、Promise.all() 等網絡請求全部獲取再執行

Promise.all({
    $.ajax({...}),
    $.ajax({...})
}).then(res => {
    // 要全部成功纔可以，一個失敗就不行
})

5.2、解決辦法二：async/await

使用了 async/await可以真正像同步方法一樣寫代碼，很簡潔

async function show() {
    
  let data = await $.ajax({
    url: '1.txt',
    dataType: 'json'
  })
  console.log(data)
}

如果代碼出錯了，可以使用try—catch 來捕獲異常

async function show() {
    
  try {
	let data = await $.ajax({
    	url: '1.txt',
    	dataType: 'json'
  	})
  	console.log(data)
  }catch(err) {
	console.log(err)
  }
}