promise以及async、await學習總結

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