20190611-对async和await的一点理解

0

首先看下这段代码:

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的时候
  • 根据所有请求完成后,进行统计请求成功、失败数量等
  • 异步操作最后的回调

你可能感兴趣的

载入中...