async 和 await
async 和 await 代码结合,可以让异步代码像同步代码一样。
async 函数
- async函数的返回值为 promise 对象
- promise 对象的结果由 async 函数执行的返回值决定
1.返回一个字符串
// async 函数
async function fn(){
// 返回一个字符串
return '青岛'
}
const result = fn()
console.log(result)
2.返回的结果不是一个 Promise 类型的对象, 那就是成功的 Promise
// async 函数
async function fn(){
return
}
const result = fn()
console.log(result)
3.抛出错误
// async 函数
async function fn(){
// 抛出错误, 返回的结果是一个失败的 Promise
throw new Error('出错啦!')
}
const result = fn()
console.log(result)
4.返回的结果是 promise 对象
// async 函数
async function fn(){
// 返回的结果是一个 Promise 对象
return new Promise((resolve, reject)=>{
resolve('成功的数据')
reject("失败的数据")
})
}
const result = fn()
console.log(result)
5.调用 then 方法
// async 函数
async function fn(){
// 返回的结果是一个 Promise 对象
return new Promise((resolve, reject)=>{
/*resolve('成功的数据')*/
reject("失败的数据")
})
}
const result = fn()
// 调用 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("成功的值!")
})
// await 要放在 async 函数中
async function main(){
let result = await p
console.log(result) // 成功的值!
}
// 调用函数
main()
返回失败
// 创建 promise 对象
const p = new Promise((resolve, reject)=>{
reject('失败了!')
})
// await 要放在 async 函数中
async function main(){
try {
let result = await p
console.log(result)
}catch(e){
console.log(e) // 失败了!
}
}
// 调用函数
main()
async 和 await 结合
读取文件
- 创建
千字文.md
天地玄黄,宇宙洪荒。
日月盈昃,辰宿列张。
寒来暑往,秋收冬藏。
闰余成岁,律吕调阳。
- 创建
读取文件.js
// 1.引入 fs 模块
const fs = require("fs")
// 读取 千字文
function readText(){
return new Promise((resolve, reject) => {
fs.readFile("./千字文.md",(err,data) => {
// 如果失败
if(err) reject(err)
// 如果成功
resolve(data)
})
})
}
// 声明一个 async 函数
async function main(){
// 获取千字文内容
let text = await readText()
console.log(text.toString())
}
main()
- 在终端输入命令
node 读取文件.js
async 与 await 封装 AJAX 请求
使用 then 方法测试
// 发送 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 测试
// 发送 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)
}
}
}
})
}
// async 与 await 测试
async function main(){
// 发送 AJAX 请求
let result = await sendAJAX("https://api.apiopen.top/getJoke")
console.log(result)
}
对象方法的扩展
-
Object.values()
方法返回一个给定对象的所有可枚举属性值的数组 -
Object.entries()
方法返回一个给定对象自身可遍历属性 [key, value] 的数组 -
Object.getOwnPropertyDescriptors()
方法返回指定对象所有自身属性的描述对象
// 声明对象
const school = {
name:"计算机语言",
cities: ['北京','上海','深圳'],
xueke: ['前端','Java','大数据']
}
// 获取所有对象的键
console.log(Object.keys(school))
// 获取所有对象的值
console.log(Object.values(school))
// entries
console.log(Object.entries(school))
// 创建Map (entries得到的值为数组,便于创建Map)
const m = new Map(Object.entries(school))
console.log(m)
console.log(Object.getOwnPropertyDescriptors(school))
不积跬步无以至千里 不积小流无以成江海