20190611对async和await的一点理解

38次阅读

共计 1160 个字符,预计需要花费 3 分钟才能阅读完成。

首先看下这段代码:

async function submit(){console.log('请求开始!')
    
    let data = await fetch('127.0.0.1:8888')
        .then(res => res.json())
        .then(res => {console.log('请求成功!')
            return res
        })
        
    console.log('请求结束');}

console.log('请求成功了么?');

执行这这段代码,你会发现控制板输出的数据顺序

'请求成功了么?'
'请求开始!'
'请求成功!'
'请求结束!'

async

定义

MDN:

async function 声明用于定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数,它会通过一个隐式的 Promise 返回其结果。但是如果你的代码使用了异步函数,它的语法和结构会更像是标准的同步函数。

通俗的讲,就是「异步」。让这个 fn 支持异步继续,所以首先打印出来的是

'请求成功了么?'

async 利用了影藏的 promise 对象,来控制函数异步进行,所以你在执行 async 中,console 会出来一个 promise 对象。

同时需要搭配 await 来阻塞内部异步,来讲操作

await

定义

MDN:

await 表达式会暂停当前「async function」的执行,等待 Pormise 处理完成,若 Promise 正常处理,则回调的 resolve 函数作为 await 表达式的值,继续进行 async function。

表达式

一个 Promise 对象或者任何要等待的值。

返回值

返回 Promise 对象的处理结果。如果等待的不是 Promise 对象,则返回该值本身。

所以上面代码,内部的执行顺序是

async function submit(){
    // 开始执行
    console.log('请求开始!')
    
    // 遇到 await,等待处理结果
    let data = await fetch('127.0.0.1:8888')
        .then(res => res.json())
        .then(res => {
            // 处理完成,返回处理结果
            console.log('请求成功!')
            return res
        })
    
    // 等待 await 处理完成后,执行。console.log('请求结束');}

注意:如果返回值不是 Promise,则把该值转换为已经常处理的 Promise,等待处理结构(就是抛出该值)

async function f2() {
  var y = await 20;
  console.log(y); // 20
}
f2(); 

应用场景

await 可以阻塞主函数,直到后面的 Promise 对象处理完成,这就很容易的解决了按顺控制异步操作。

  • 当 B 请求必须要 A 请求完成后,才能根据 A 请求的结果,进行是否继续请求 B 的时候
  • 根据所有请求完成后,进行统计请求成功、失败数量等
  • 异步操作最后的回调

正文完
 0