Async 和 Await

ajax 的回调模式

$.ajax({
  url,
  data,
  success:function(result){
    $.ajax({
      data:result,
      success: function(result1){
        $.ajax({
          url,
          data: result1
        })
     }
   })
  }
})

这种多层回调函数的相互嵌套，就形成了 回调地狱

Promise 是一个构造函数，new出来的 Promise实例对象代表一个异步操作

Promise.prototype 上包含一个 .then() 方法，可以通过原型链的方式，使用实例对像直接访问

promise 的 .then() 方法支持链式调用，解决了回调地狱的问题

axios({ url, data}).then(result => {
  return  axios({ data:result }) 
}).then(result1 => {
  return  axios({ data:result1 }) 
}).then(result2 => {
  return axios({ data: result2 }) 
})

让 Promise 成功执行下去，需要执行 resolve ，如果让它失败执行下去，需要执行 reject

new Promise(function(resolve, reject) { 
  resolve('success')  // 成功执行
}).then(result => {
  alert(result)
})

new Promise(function(resolve, reject) { 
  reject('fail')  // 成功执行
}).then(result => {
  alert(result)
}).catch(error => {
  alert(error)
})

可以使用 Promise.reject(new Error())  在某个执行链的位置终止

new Promise(function(resolve, reject) {
  resolve(1)
}).then(result => {
  return result + 1
}).then(result => {
  return  Promise.reject(new Error(result + '失败'))
}).then(result => {
    return result + 1
}).catch(error => {	
    alert(error)
})

Async 和 Await 就是异步操作的终极方法

await 表示强制等待的意思，await 关键字的后面要跟一个promise对象，它总是等到该promise对象resolve成功之后执行，并且会返回resolve的结果

由于await 的强制等待，所以必须要求使用await 的函数必须使用 async 标记，async 表示该函数就是一个异步函数，不会阻塞其他执行逻辑的执行

async test () {
  const result = await new Promise(function(resolve){  
    setTimeout(function(){
      resolve(5)
    },5000)
  })
  alert(result)
},
test1(){
   this.test()
   alert(1)
}
//  先弹出1  再弹出5