（25）es6——es8async和await关键字
文章结构
- async
- await
-
- 对await第五点进行验证
- async和await的作用
- async和await的应用示例
-
- async和await读取文件
- async-await封装ajax请求
async
async用来修饰函数，被async修饰的函数调用执行默认返回一个promise对象，值由
被修饰函数的返回值
async function fn(){
// 默认返回undefined
// 1、返回非promise对象，状态为完成
return 123;
// 2、抛出一个对象，状态为拒绝
throw new Error('错误');
// 3、返回一个promise对象，状态和值由返回的promise对象的值决定
return new Promise(function(resolve,reject){
resolve(123);
})
}
let result = fn();
console.log(result);
// 如果返回的是一个promise对象，则可以调用then方法
result.then(function(value){
console.log(value);
})
await
1、await必须写在async函数中
2、await右侧的表达式要是一个promise对象
3、await返回的是promise成功的值
4、await的promise失败了，会抛出异常，要用try...catch捕获
5、await会造成阻塞，当前任务后面的代码必须等到await拿到值，才会解析执行。如果await
后面的代码执行时间太长，不好。
const p = new Promise(function(resolve, reject) {
resolve(123);
// reject('error');
})
// await只能在async函数中使用
async function fn() {
// await后面的promise对象是拒绝使用trycatch接收错误
try {
// await后面一般是promise对象，await的值是promise对象的返回值
let result = await p;
console.log(result);
} catch (e) {
//TODO handle the exception
console.log(e);
}
}
fn();
对await第五点进行验证
function Consume() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("数据");
}, 5000)
})
}
async function fn() {
const result = await Consume();
console.log("拿到值了");
// 原本我们是想拿到接口中的数据进行判断与进行一些逻辑，但是拿的到吗？
setInterval(() => {
console.log(result);
}, 500)
}
fn();
async和await的作用
“同步”拿到一些异步，耗时的操作返回值。
比如我们发送一个请求拿数据，用这个数据来执行后续代码。
如果直接像以前一样同步书写，那么在执行时，js不会等待这个异步耗时操作返回值就直接
读取。见下方示例。
function Consume() {
let str;
// 用延时模拟开发中请求接口2秒之后才拿到数据
setInterval(() => {
str = "数据"
}, 2000)
return str;
}
function fn() {
const result = Consume();
// 原本我们是想拿到接口中的数据进行判断与进行一些逻辑，但是拿的到吗？
setInterval(() => {
console.log(result);
}, 500)
}
fn();
我们发现result的值一直输出undefined。
因为发生了下面的对话：
js引擎：“Consume啊，我要给result赋值了，根据=标记的是你，所以我来找你问一下result的值是什么？”
Consume：“result的值啊，就是str吧，呐，默认就是undefined，给你吧。但是…”
js引擎：“停停停，好了好了，有值是吧，有值就行，我才不管那些，我没时间等你拿什么真正的值给我，我先走了，拜拜”
Consume内心（ps：请求这个异步还没有返回str真正的值，你现在拿到的值不是别人真正想要的啊喂）
转脸就将result的值赋值成了undefined并存在栈内存中，并开启一个定时器，每0.5秒去栈内存中拿一次result的值。
大约2秒后...
接口：“我回来了，我拿到值了，呐，Consume给你。”
Consume: “唉，你给我我也只能叫js引擎把我们栈内存中的str修改成你给我的值。我没有那么高的权限叫js去修改另外一个栈内存的中result的值啊，哎。”
此时js引擎还一直在每隔0.5秒去拿一次result的值
而使用await的话
function Consume() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve("数据");
}, 2000)
})
}
async function fn() {
const result = await Consume();
setInterval(() => {
console.log(result);
}, 500)
}
fn();
js引擎：“Consume啊，我要给result赋值了，根据=标记的是你，所以我来找你问一下result的值是什么？”
Consume先出示了“await”证件，此时js引擎意识到Consume地位不一般，脸上的表情也严肃起来
Consume：“result的值啊，就是str吧，呐，默认就是undefined，给你吧。但是请求这个异步还没有返回str真正的值，你现在拿到的值不是别人真正想要的。你可以等一下吗？”
js引擎：“好嘞好嘞”。
大约2秒后...
接口：“我回来了，我拿到值了，呐，Consume给你。”
Consume: “js引擎你过来，帮我把这个栈内存中的str改成这个值，并且你要的result的值也是这个”
js引擎：“好勒好勒，哥，我把str的值改了，那我这边就先走了。”
async和await的应用示例
async和await读取文件
const fs = require('fs');
function readfile1() {
return new Promise(function(resolve, reject) {
fs.readFile('./files/文件1.md',function(err,data){
resolve(data);
})
})
}
function readfile2() {
return new Promise(function(resolve, reject) {
fs.readFile('./files/文件2.md',function(err,data){
resolve(data);
})
})
}
function readfile3() {
return new Promise(function(resolve, reject) {
fs.readFile('./files/文件3.md',function(err,data){
resolve(data);
})
})
}
async function main(){
let data1 = await readfile1();
let data2 = await readfile2();
let data3 = await readfile3();
console.log(data1.toString(),data2.toString(),data3.toString());
}
async-await封装ajax请求
DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>title>
head>
<body>
<script type="text/javascript">
function req(url){
return new Promise(function(resolve,reject){
const xhr = new XMLHttpRequest();
xhr.open('GET',url);
xhr.send();
xhr.onreadystatechange = function(){
if(xhr.readyState === 4){
if(xhr.status >= 200 && xhr.status < 300){
resolve(xhr.response);
}else{
reject(xhr.status);
}
}
}
})
}
async function getajax(){
let result = await req('https://api.apiopen.top/getJoke');
console.log(result);
}
getajax();
script>
body>
html>