当前位置：首页 > news >正文

ES8语法async与await

news 2025/9/18 11:34:54

async和await两种语法结合可以让异步代码像同步代码一样。

一、async函数

async函数的返回值为Promise对象
promise对象的结果由async函数执行的返回值决定

async function fn() {// 返回一个字符串return '字符串'；// 返回的结果不是一个Promise类型的对象，返回的结果就是成功的Promise对象。return;// 抛出错误，返回的结果是一个失败的Promisethrow new Error('出错啦！');// 返回的结果如果是一个Promise对象return new Promise((resolve,reject)=>{// resolve('成功的数据');reject('失败的数据')；});
}const result = fn();
console.log(result);// 调用then方法
result.then(value => {console.log(value);
}, reason => {console.warn(reason);
})

二、await

await必须写在async函数中
await右侧的表达式一般为Promise对象
await返回的是Promise成功的值
await的Promise失败了，就会抛出异常，需要通过try…catch捕获处理

// 创建promise对象
const p = new Promise((resolve, reject) => {// resolve("用户数据");reject("失败!!");
})
// await要放在async函数中
async function main() {try {let result = await p;console.log(result);} catch (error) {console.log(error);}
}main();

三、async和await结合

// 1.引入js模块
const fs = require('fs');// 读取“.md”文件
function weixue() {return new Promise((resolve, reject) => {fs.readFile('./resourse/为学.md', (err, data) => {// 如果失败if (err) reject(err);// 如果成功resolve(data);});});
}function yougan() {return new Promise((resolve, reject) => {fs.readFile('./resourse/有感.md', (err, data) => {// 如果失败if (err) reject(err);// 如果成功resolve(data);});});
}
function guankan() {return new Promise((resolve, reject) => {fs.readFile('./resourse/观看.md', (err, data) => {// 如果失败if (err) reject(err);// 如果成功resolve(data);});});
}// 2.声明一个async函数
async function main() {// 获取“.md”文件的内容// await返回的结果是成功的值let Weixue = await weixue();let Yougan = await yougan();let Guankan = await guankan();console.log(Weixue.toString());console.log(Yougan.toString());console.log(Guankan.toString());}main();

四、async与await结合封装ajax请求

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 发送AJAX请求，返回的结果是一个Promise对象function sendAJAX(url) {return new Promise((resolve, reject) => {// 1.创建对象const x = new XMLHttpRequest();// 2.初始化x.open('GET', url);// 3.发送x.send();// 4.事件绑定x.onreadystatechange = function () {if (x.readyState === 4) {if (x.status >= 200 && x.status < 300) {// 成功resolve(x.response);}else {// 失败reject(x.status);}}}})}// 测试1  then方法的使用// const result = sendAJAX('https://api.apiopen.top/getJoke').then(value => {//     console.log('成功', value);// }, reason => {//     console.log('失败', reason);// });// 测试2  async与await的使用  一般用axios请求async function main() {try {// 发送AJAX请求const result = await sendAJAX('https://api.apiopen.top/getJoke');const tianqi = await sendAJAX('https://v0.yiketianqi.com/life/yearavg');console.log('成功', result,'\n', tianqi);}catch (error) {console.log('失败', error);}}main();</script></body></html>