async 和 await 两种语法结合可以让异步代码像同步代码一样
4.1.1.async 函数
- async 函数的返回值为 promise 对象,
- promise 对象的结果由 async 函数执行的返回值决定
4.1.2.await 表达式
- await 必须写在 async 函数中
- await 右侧的表达式一般为 promise 对象
- await 返回的是 promise 成功的值
- await 的 promise 失败了, 就会抛出异常, 需要通过 try...catch 捕获处理
async函数
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>async函数</title> </head> <body> <script> // async 函数 async function fn() { // 返回的结果不是一个 Promise 类型的对象, 返回的结果就是成功 Promise 对象 // return '哈哈'; // 返回一个字符串 // return; // 抛出错误, 返回的结果是一个失败的 Promise // throw new Error('出错啦!'); // 返回的结果是一个 Promise 对象 return new Promise((resolve, reject) => { resolve('成功的数据'); // reject("失败的错误"); }); } const result = fn(); // 调用 then 方法 result.then(value => { console.log(value); }, reason => { console.warn(reason); }) </script> </body> </html>
await
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>await</title> </head> <body> <script> // 创建 promise 对象 const p = new Promise((resolve, reject) => { // resolve("用户数据"); reject("失败啦!"); }) // await 要放在 async 函数中. async function main() { // 当promise执行的是reject,得把await放在try catch中,才能不会异常,否则报错 try { let result = await p; console.log(result); } catch (e) { console.log(e); } } // 调用函数 main(); </script> </body> </html>
async和await结合读取文件
//1. 引入 fs 模块 const fs = require("fs"); // 其实,只需要封装成一个函数,给函数传递不同的路径即可 //读取『为学』 function readWeiXue() { return new Promise((resolve, reject) => { fs.readFile("./resources/为学.md", (err, data) => { // 如果失败 if (err) reject(err); // 如果成功 resolve(data); }) }) } function readChaYangShi() { return new Promise((resolve, reject) => { fs.readFile("./resources/插秧诗.md", (err, data) => { // 如果失败 if (err) reject(err); // 如果成功 resolve(data); }) }) } function readGuanShu() { return new Promise((resolve, reject) => { fs.readFile("./resources/观书有感.md", (err, data) => { // 如果失败 if (err) reject(err); // 如果成功 resolve(data); }) }) } // 声明一个 async 函数 async function main() { // 获取为学内容 let weixue = await readWeiXue(); // 获取插秧诗内容 let chayang = await readChaYangShi(); // 获取观书有感 let guanshu = await readGuanShu(); console.log(weixue.toString()); console.log(chayang.toString()); console.log(guanshu.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>发送 AJAX 请求</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); } } } }) } // promise then 方法测试 // sendAJAX("https://api.apiopen.top/getJoke").then(value=>{ // console.log(value); // }, reason=>{}) // async 与 await 测试 axios async function main() { // 发送 AJAX 请求 let result = await sendAJAX("https://api.apiopen.top/getJoke"); // 再次测试 let tianqi = await sendAJAX('https:// www.tianqiapi.com/api/?version=v1&city=%E5%8C%97%E4%BA%AC&appid=23941491&appsecret=TXoD5e8P') console.log(tianqi); } main(); </script> </body> </html>