Promise/async、await帮我们解决了什么

它给我们提供了一种新的异步编程解决方案，同时避免了困扰已久的回调地狱

// 异步的处理可能会产生这样的回调地狱（第二个异步操作和第一个异步的结果有关系）

let Ajax = function(data, success, error){

  $.ajax({

      data: data,

      success: function(res){

        success(res)

      },

      error: function(err){

        error(err)

      }

  })

}

Ajax(data,function(res){

  Ajax(data,function(res){

    // 继续循环回调

  },function(err){})

},function(err){})

// 看看promise的处理方式

let promise = function (data) {

  return new Promise((resolve,reject) => {

      $.ajax({

          data: data,

          success: function(res){

              resolve(res)

          },

          error: function(err){

              reject(err)

          }

      })

  })

}

let data = {} // ajax请求参数

promise(data).then((res) => {return promise(res)}).catch(err => console.log(err)).then(res => console.log(res))

// async 、await的处理方式使得异步操作更方便

(async function(){

let res = await promise(data)

let resp = await promise(res)

console.log(resp)

})()

Promise的方法总结

Promise.prototype.then()

Promise.prototype.catch()

Promise.prototype.finally()

Promise.all()

# 当存在多个没有相关性的异步操作时想一次性得到所有结果，可以使用promise.all()

Promise.all([p1,p2,p3])

只有当所有异步操作状态变为resolve的时候

返回所有值得数组

当有一个返回reject的时候

返回值为第一个reject的值

Promise.race()

# 当存在多个没有相关性的异步操作时,想要获得返回速度最快的异步操作采用

Promise.race([p1,p2,p3])

该方法返回第一个有返回值的异步操作的返回值（resolve或者reject）

Promise.race([new Promise((resolve, reject) => {

  console.log('init p1')

  setTimeout(()=>{

    console.log('init p1 +')

    resolve('p1')

  },2000)

}),new Promise((resolve, reject) => {

  console.log('init p2')

  setTimeout(()=>{

    console.log('init p2 +')

    resolve('p2')

  },1000)

})]).then(res=>{console.log(res)})

使用场景：设定一个请求的超时时间

Promise.race([new Promise((resolve,reject)=>{

    setTimeout(()=>{

        resolve('1')

    },2000)

}),new Promise((resolve,reject)=>{

    setTimeout(()=>{

        reject(new Error('time out'))

    },1000)

})]).then((res=>console.log(res)))

Promise.resolve()

Promise.resolve('111').then(res=>console.log(res))

Promise.reject()

Promise.reject('err').catch(res=>console.log(res))

Promise.try()[目前只是一个提案]

# 【使用时机】对于一个方法如果不知道是同步异步方法，但是想要用then来做后续操作，同时希望同步方法同步执行，异步方法异步执行。

# 等价方案

(async () => f())()

.then(res=>console.log(res))

.catch(err=>console.log(err))

async需要注意什么

错误的捕获

const f = () => console.log('now')

(async () => f())()

# async 会吃掉f()的错误,可以通过promise.catch()来捕获

(async () => f())()

.then(res=>console.log(res))

.catch(err=>console.log(err))

参考

Promise
async/await