美文网首页
async/await 温故知新

async/await 温故知新

作者: 皮神雷卡丘 | 来源:发表于2019-09-29 15:05 被阅读0次

*Promise

promise.png
image.png
promise原文链接:https://www.jianshu.com/p/f3554f28f405

一、async/await的具体使用规则

一:凡是在前面添加了async的函数在执行后都会自动返回一个Promise对象


image.png
image.png

二:await必须在async函数里使用,不能单独使用
三:await后面需要跟Promise对象,不然就没有意义,而且await后面的Promise对象不必写then,因为await的作用之一就是获取后面Promise对象成功状态传递出来的参数。


image.png

二、async/await的错误处理方式

关于错误处理,如规则三所说,await可以直接获取到后面Promise成功状态传递的参数,但是却捕捉不到失败状态。在这里,我们通过给包裹await的async函数添加then/catch方法来解决,因为根据规则一,async函数本身就会返回一个Promise对象。
一个包含错误处理的完整的async/await例子:

let promiseDemo = new Promise((resolve, reject) => {
    setTimeout(() => {
        let random = Math.random()
        if (random >= 0.5) {
            resolve('success')
        } else {
            reject('failed')
        }   
    }, 1000)
})
async function test() {
    let result = await promiseDemo
    return result  //这里的result是promiseDemo成功状态的值,如果失败了,代码就直接跳到下面的catch了
}
test().then(response => {
    console.log(response) 
}).catch(error => {
    console.log(error)
})

上面的代码需要注意两个地方,一是async函数需要主动return一下,如果Promise的状态是成功的,那么return的这个值就会被下面的then方法捕捉到;二是,如果async函数有任何错误,都被catch捕捉到!

三、在循环中使用await

必须使用for...of和for循环,不可使用map,froEach
参考下 Polyfill 版本的 forEach

while (index < arr.length) {
  callback(item, index)   //也就是我们传入的回调函数
}

for...of 是通过迭代器的方式去遍历。

let times = [1000, 500, 2000]
async function test() {
  const iterator = times[Symbol.iterator]()
  let res = iterator.next()
  while (!res.done) {
    const value = res.value
    const res1 = await request(value)
    console.log(res1)
    res = iterator.next()
  }
  console.log('end')
}


async function test() {
    let result = []
    for (let item of times) {
        let temp = await request(item)
        result.push(temp)
    }
    return result
}

相关文章

  • async和await

    浅谈Async/Await用 async/await 来处理异步 async和await async:声明一个异步...

  • ES8(一) —— async&await

    目录 async和普通函数的区别 await async/await处理多回调异步 async和await必须配合...

  • async

    async/await特点 async/await更加语义化,async是“异步”的简写,async functi...

  • ES6中的好东西

    1 Await/Async 前端的回调时代我没有赶上,我赶上的是await/async时代。await和async...

  • Vue接口调用方式(三)async/await用法

    async/await用法 1. async/await的基本用法 async/await是ES7引入的新语法,可...

  • async/await 温故知新

    *Promise 一、async/await的具体使用规则 一:凡是在前面添加了async的函数在执行后都会自动返...

  • nodejs async 使用简介

    async await node async 使用

  • JS 中的 async/await

    async/await 是什么? async/await 是 ES2017 中新增的异步解决方案; await 只...

  • ES2017 async 函数

    async 和 await 在干什么 每个名称都有意义async : 异步await: async wait简...

  • async/await

    async/await async/await 是Generator的语法糖。 Generator 通过将Gene...

网友评论

      本文标题:async/await 温故知新

      本文链接:https://www.haomeiwen.com/subject/uvuructx.html