Heim > Web-Frontend > js-Tutorial > Async/Warten auf parallele Anfragen und Fehlerbehandlung

Async/Warten auf parallele Anfragen und Fehlerbehandlung

不言
Freigeben: 2018-07-07 17:57:21
Original
2502 Leute haben es durchsucht

Dieser Artikel stellt hauptsächlich asynchrone/abwartende parallele Anforderungen und Fehlerbehandlung vor. Jetzt kann ich ihn mit allen teilen, die ihn benötigen

asynchrone Sequenz Gleichzeitige Anfragen

Bei der Verwendung von Async kann es leicht zu Fehlern in der Reihenfolge der Codeausführung kommen. Wenn wir beispielsweise zwei Anfragen gleichzeitig initiieren möchten, schreiben wir möglicherweise den folgenden Code

function fetchName () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('lujs')
    }, 3000)
  })
}

function fetchAvatar () {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('https://avatars3.githubusercontent.com/u/16317354?s=88&v=4')
    }, 4000)
  })
}

async fetchUser () {
  const name = await fetchName()
  const avatar = await fetchAvatar()
  return {
    name,
    avatar
  }
}

(async function () {
  console.time('should be 7s ')
  const user = await fetchUser()
  console.log(user)
  console.timeEnd('should be 3s ')
})()
Nach dem Login kopieren

Im obigen Code gehen wir davon aus, dass fetchName und fetchAvatar parallel ausgeführt werden, aber tatsächlich ist dies nicht der Fall. fetchAvatar wartet auf die Ausführung von fetchName, bevor die Anforderung gestartet wird. Die Ausführungszeit der fetchUser-Funktion beträgt nicht drei Sekunden, sondern 7 Sekunden

Wenn Sie parallele Anfragen stellen möchten, müssen Sie wie folgt schreiben: Die Ausführungszeit von fetchUserParallel beträgt 4 Sekunden

async function fetchUserParallel () {
  const namePromise = fetchName()
  const avatarPromise = fetchAvatar()
  return {
    name: await namePromise,
    avatar: await avatarPromise 
  }
}
(async function () {
  console.time('should be 3s, but time is ')
  const user = await fetchUser()
  console.log(user)
  console.timeEnd('should be 3s, but time is ')

  console.time('should be 3s : ')
  const user2 = await fetchUserParallel()
  console.log(user2)
  console.timeEnd('should be 3s : ')
})()
Nach dem Login kopieren

Verwenden Sie Promise.all, um gleichzeitige Anfragen zu stellen

function fetchList (id) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(`id is : ${id}`)
    }, 5000)
  })
}

async function getList () {
  const ary = [1, 2, 3, 4]
  const list =  Promise.all(
    ary.map(
      (id) => fetchList(id)))
  return await list
}
(async function () {
  // 使用promise并发请求
  console.time('should be 3s ')
  const list = await getList()
  console.log(list)
  console.timeEnd('should be 3s ')
})()
Nach dem Login kopieren

Fehlererfassung

Verwenden Sie try...catch

  try {
    const user3 = await fetchUser(true)
  } catch (err) {
    console.error('user3 error:', err)
  }
Nach dem Login kopieren

, um Promise so zu verpacken, dass ein einheitliches Codeformat zurückgegeben wird

Referenzartikel

  /**
   * 包装promise, 使其返回统一的错误格式
   * @param {Promise} promise 
   */
  function to (promise) {
    return promise.then(res => [null, res]).catch(err => [err])
  }
  .
  .
  .
  const [err, res] = await to(fetchUser(true))
  if (err) {
    console.error('touser err:', err)
  }
Nach dem Login kopieren

Verwenden Sie weiterhin Catch

  // 因为async 返回的promise对象,所以可以使用catch
  const user4 = await fetchUser(true).catch(err => {
    console.error('user4 error:', err)
  })
Nach dem Login kopieren

Wenn Sie interessiert sind, können Sie den Code ausführen

Testcode

Das Obige ist der Der gesamte Inhalt dieses Artikels wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der PHP-Chinese-Website.

Verwandte Empfehlungen:

Knoten crawlt Lagou.com-Daten und exportiert sie als Excel-Datei


Native JS basiert on window. scrollTo() kapselt die Funktion des vertikalen Scroll-Animationstools


Ähnlichkeiten und Unterschiede zwischen Browsern und NodeJSs EventLoop und Teilmaschinen


Das obige ist der detaillierte Inhalt vonAsync/Warten auf parallele Anfragen und Fehlerbehandlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage