共计 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 的时候
- 根据所有请求完成后,进行统计请求成功、失败数量等
- 异步操作最后的回调
正文完
发表至: javascript
2019-06-11