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)
  }
}