- 前言
- 🎨剖析async与await
- 1️⃣async 函数
- 2️⃣await 表达式
- 📛注意
- 🎭async与await结合实践
- 🎁async与await结合发送AJAX请求
前几篇文章讲了关于promise的一些基本内容,接下来讲讲关于async和await的相关内容。 async/await 是ES7提出的基于Promise的解决异步的最终方案。
🎨剖析async与awaitasync和await关键字让我们可以用一种更简洁的方式
写出基于Promise的异步行为
,而无需刻意地链式调用promise。
async函数是使用async关键字
声明的函数。
- 函数的返回值为
promise对象
async function main() {
}
let result = main()
console.log(result)
promise对象的状态由async函数内部的返回值
决定
-
如果返回值是
一个非Promise类型
的数据,那么结果就为成功
的promise对象async function main() { return 521 } let result = main() console.log(result)
-
如果返回值是
一个Promise对象
,那么Promise对象返回的结果就决定main函数返回结果async function main() { return new Promise((resolve, reject) => { resolve('ok') }) } let result = main() console.log(result)
-
如果
抛出异常
,那么返回的结果是失败的promise对象
,抛出的结果就是失败的promise对象的结果async function main() { throw 'oh no' } let result = main() console.log(result)
- promise对象的结果由
async函数执行的返回值
决定
类似于then方法里的回调函数
2️⃣await 表达式await 操作符用于等待一个Promise 对象。它只能在异步函数 async 中使用。
await 右侧的表达式一般为 promise 对象
, 但也可以是其它的值(数字,字符串,布尔值等)
- 如果表达式是
promise 对象
, await 返回的是promise 成功的值
。
async function main() {
let p = new Promise((resolve, reject) => {
resolve('ok')
})
let res = await p
console.log(res)
}
main()
打印结果为:ok
- 如果表达式是
其它值
, 直接将此值作为 await 的返回值。
async function main() {
let res2 = await 20
console.log(res2)
}
main()
打印结果为:20
📛注意
- await 必须写在 async 函数中, 但 async 函数中可以没有 await。
- 如果 await 右侧的的 promise 是
失败
的, 就会抛出异常
, 需要通过try...catch 捕获处理
。
async function main() {
let p = new Promise((resolve, reject) => {
// resolve('ok')
reject('error')
})
// 3.如果promise是失败的状态
try {
let res3 = await p
} catch (e) {
console.log(e)
}
}
main()
🎭async与await结合实践
需求:
读取resource文件里的 1.html 2.html 3.html 文件内容,读取完后拼接输出
1.html文件内容:123
2.html文件内容:456
3.html文件内容:789
🌈使用回调函数的方式来实现:
const fs = require('fs')
fs.readFile('./resource/1.html', (err, data1) => {
if (err) throw err
fs.readFile('./resource/2.html', (err, data2) => {
if (err) throw err
fs.readFile('./resource/3.html', (err, data3) => {
if (err) throw err
console.log(data1 + data2 + data3)
})
})
})
可以看出使用这种方法比较繁琐。
🌈使用 async 与 await 实现:
const util = require('util')
const mineReadFile = util.promisify(fs.readFile)
async function main() {
try {
// 读取第一个文件的内容
let data1 = await mineReadFile('./resource/1.html')
let data2 = await mineReadFile('./resource/2.html')
let data3 = await mineReadFile('./resource/3.html')
console.log(data1 + data2 + data3)
} catch (e) {
console.log(e)
}
}
main()
可以看出在使用async和await方法中看不到回调函数的,非常简洁,类似于写同步的函数调用,只需在前面加上await,内部的执行是异步的。
🎁async与await结合发送AJAX请求首先接收AJAX请求的服务器:
const express = require('express')
const app = express()
app.all('/server-AJAX', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*')
response.send('成功啦!')
})
app.listen(8000, () => {
console.log('服务器已经监听到8000端口...')
})
使用async与await结合发送AJAX请求:
DOCTYPE html>
async与await结合发送AJAX
点击获取段子
function sendAJAX(url) {
return new Promise((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
关注
打赏
置顶博客
最近更新
- 深拷贝和浅拷贝的区别(重点)
- 【Vue】走进Vue框架世界
- 【云服务器】项目部署—搭建网站—vue电商后台管理系统
- 【React介绍】 一文带你深入React
- 【React】React组件实例的三大属性之state,props,refs(你学废了吗)
- 【脚手架VueCLI】从零开始,创建一个VUE项目
- 【React】深入理解React组件生命周期----图文详解(含代码)
- 【React】DOM的Diffing算法是什么?以及DOM中key的作用----经典面试题
- 【React】1_使用React脚手架创建项目步骤--------详解(含项目结构说明)
- 【React】2_如何使用react脚手架写一个简单的页面?