成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Async/await 和 Promises 區(qū)別

Y3G / 2794人閱讀

摘要：原文地址是建立在上的，不能被使用在普通回調(diào)以及節(jié)點(diǎn)回調(diào)和很像，不阻塞代碼看起來像同步代碼。語法假設(shè)函數(shù)返回值是，并且有一些對(duì)象。我們只想調(diào)用它并且記錄該并且返回完成。使用使用區(qū)別在函數(shù)前有一個(gè)關(guān)鍵字，關(guān)鍵字只能在使用定義的函數(shù)中使用。

原文地址=> 6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)

Async/await 是建立在 Promises上的，不能被使用在普通回調(diào)以及節(jié)點(diǎn)回調(diào)

Async/await 和 Promises 很像，不阻塞

Async/await 代碼看起來像同步代碼。

語法

假設(shè)函數(shù)getJSON返回值是 Promise，并且 Promise resolves 有一些JSON 對(duì)象。我們只想調(diào)用它并且記錄該JSON并且返回完成。

使用Promise

const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log(data)
      return "done"
    })

makeRequest()

使用Async

const makeRequest = async() => {
        console.log(await getJSON)
        return "done"
}

makeRequest()
區(qū)別

在函數(shù)前有一個(gè)關(guān)鍵字async，await關(guān)鍵字只能在使用async定義的函數(shù)中使用。任何一個(gè)async函數(shù)都會(huì)隱式返回一個(gè)promise，并且promise resolve 的值就是 return 返回的值 (例子中是”done”)

不能在函數(shù)開頭使用await

有哪些好處

簡潔的代碼

使用async函數(shù)可以讓代碼簡潔很多，不需要像Promise一樣需要些then

錯(cuò)誤處理

Promise 中不能自定義使用 try/catch 進(jìn)行錯(cuò)誤捕獲，但是在 Async/await 中可以像處理同步代碼處理錯(cuò)誤

const makeRequest = () => {
  try {
    getJSON()
      .then(result => {
        // this parse may fail
        const data = JSON.parse(result)
        console.log(data)
      })
      // uncomment this block to handle asynchronous errors
      // .catch((err) => {
      //   console.log(err)
      // })
  } catch (err) {
    console.log(err)
  }
}

Async/await

const makeRequest = async () => {
  try {
    // this parse may fail
    const data = JSON.parse(await getJSON())
    console.log(data)
  } catch (err) {
    console.log(err)
  }
}

條件語句

條件語句也和錯(cuò)誤捕獲是一樣的，在 Async 中也可以像平時(shí)一般使用條件語句

Promise

const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}

Async

const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }
}

中間值

在一些場景中，也許需要 promise1 去觸發(fā) promise2 再去觸發(fā) promise3，這個(gè)時(shí)候代碼應(yīng)該是這樣的

const makeRequest = () => {
  return promise1()
    .then(value1 => {
      // do something
      return promise2(value1)
        .then(value2 => {
          // do something          
          return promise3(value1, value2)
        })
    })
}

如過 promise3 不需要 value1，嵌套將會(huì)變得簡單。如果你有強(qiáng)迫癥，則將值1&2使用 promise.all() 分裝起來。

const makeRequest = () => {
  return promise1()
    .then(value1 => {
      // do something
      return Promise.all([value1, promise2(value1)])
    })
    .then(([value1, value2]) => {
      // do something          
      return promise3(value1, value2)
    })
}

但是使用 Async 就會(huì)變得很簡單

const makeRequest = async () => {
  const value1 = await promise1()
  const value2 = await promise2(value1)
  return promise3(value1, value2)
}

錯(cuò)誤棧

如過 Promise 連續(xù)調(diào)用，對(duì)于錯(cuò)誤的處理是很麻煩的。你無法知道錯(cuò)誤出在哪里。

const makeRequest = () => {
  return callAPromise()
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => {
      throw new Error("oops");
    })
}

makeRequest()
  .catch(err => {
    console.log(err);
    // output
    // Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
  })

但是對(duì)于 Async 就不一樣了

const makeRequest = async () => {
  await callAPromise()
  await callAPromise()
  await callAPromise()
  await callAPromise()
  await callAPromise()
  throw new Error("oops");
}

makeRequest()
  .catch(err => {
    console.log(err);
    // output
    // Error: oops at makeRequest (index.js:7:9)
  })

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93255.html

相關(guān)文章

  • async/await 真不是你想象中那么簡單

    摘要：第二種方法一開始就發(fā)起了個(gè)請(qǐng)求并等待請(qǐng)求都到達(dá)后獲取數(shù)據(jù)。請(qǐng)求返回的數(shù)據(jù)秒后就能操作了這種方法比第二種方法可以更快處理數(shù)據(jù)。如果請(qǐng)求時(shí)間是依次遞減的那么和方法二效果是一樣在有多個(gè)請(qǐng)求時(shí)這種情況一般不存在。 先上代碼 公共代碼 function getData(data, time) { return new Promise(function (resol...

    zsy888 評(píng)論0 收藏0

  • async/await 真不是你想象中那么簡單

    先上代碼 公共代碼 function getData(data, time) { return new Promise(function (resolve, reject) { setTimeout(function () { resolve(data); ...

    CoXie 評(píng)論0 收藏0

  • async/await 真不是你想象中那么簡單

    摘要：第二種方法一開始就發(fā)起了個(gè)請(qǐng)求并等待請(qǐng)求都到達(dá)后獲取數(shù)據(jù)。請(qǐng)求返回的數(shù)據(jù)秒后就能操作了這種方法比第二種方法可以更快處理數(shù)據(jù)。如果請(qǐng)求時(shí)間是依次遞減的那么和方法二效果是一樣在有多個(gè)請(qǐng)求時(shí)這種情況一般不存在。 先上代碼 公共代碼 function getData(data, time) { return new Promise(function (resol...

    mylxsw 評(píng)論0 收藏0

  • 翻譯：Taming the asynchronous beast with ES7

    摘要：讓我們使用它從數(shù)組中返回一個(gè)值數(shù)組在中，我們可以這樣做，這是一種更簡單的方法最重要的部分是創(chuàng)建數(shù)組，該數(shù)組立即調(diào)用所有的我們在主函數(shù)中等待這些。所以在我們真正等待完成之前，主函數(shù)就退出了。 原文：https://pouchdb.com/2015/03/0... PouchDB最棘手的方面之一是它的API是異步的。在Stack Overflow、Github和IRC上，我看到了不少困惑的...

    Eastboat 評(píng)論0 收藏0

  • async & await (譯)

    摘要：的出現(xiàn)，讓我們可以走出回調(diào)地獄，著實(shí)驚艷。我已經(jīng)開始使用里的和關(guān)鍵字來簡化的處理。異步任務(wù)在這個(gè)例子是執(zhí)行之后，一直在執(zhí)行完成才繼續(xù)下一個(gè)任務(wù)并沒有產(chǎn)生阻塞。最后這個(gè)函數(shù)處理了返回值并且返回了一個(gè)對(duì)象。依然很棒，但和使得它可維護(hù)性更好。 JavaScript Promises的出現(xiàn)，讓我們可以走出回調(diào)地獄，著實(shí)驚艷。Promises 允許我們更好的引入和處理異步任務(wù)，雖然如此，但引入好...

    The question 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<