文章目录
async 和 await
async和 await两种语法结合可以让异步代码像同步代码一样
async函数
- async函数的返回值为promise对象
- promise对象的结果由 async函数执行的返回值决定
async函数的定义格式
async function 函数名 (){
函数体
}
eg：
async function fn (){
return 'yang'
// 无论return什么，async的返回结果都是Promise
}
const result = fn()
console.log(result)
async返回结果的解析
- 如果return的不是一个Promise类型的对象，那么async返回的Promise的状态是成功，而且Promise的值是return的值
eg：
async function fn (){
return 'yang'
}
const result = fn()
console.log(result)
- 如果抛出错误，那么async返回的Promise的状态是失败，而且Promise的值是抛出的错误值。
eg：
async function fn (){
throw new Error('出错啦!')
}
const result = fn()
console.log(result)
- 如果return的是Promise对象，那么async返回的Promise的状态和值与return的Promise对象一致
async function fn (){
return new Promise((resolve,reject)=>{
resolve('成功的数据')
})
}
const result = fn()
console.log(result)
await表达式
- await必须写在 async函数中
- await右侧的表达式一般为promise对象
- await返回的是promise成功的值
- await 的 promise失败了，就会抛出异常，需要通过try.Icatch 捕获处理
eg：
const p =new Promise((resolve,reject)=>{
resolve("成功的值")
})
async function main (){
let result = await p
// await p 的返回结果是p指向的Promise对应的值
console.log(result)
}
main()
失败情况下：
const p =new Promise((resolve,reject)=>{
reject("失败的值")
})
async function main (){
try{
let result = await p
console.log(result)
}catch(e){
console.log(e)
}
}
main()
async和await结合实现异步
需求：读取3个文件
js文件：
// 引入fs
const fs = require("fs")
// 读取为学，返回值是Promise函数
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 function main (){
let weixue = await readWeiXue()
let chayangshi = await readChaYangShi()
let guanshu = await readGuanShu()
console.log(weixue.toString())
console.log(chayangshi.toString())
console.log(guanshu.toString())
}
main()
async和await结合发送ajax请求
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
// 发送AJAX请求,返回的结果是 Promise对象
function sendAJAX (url){
return new Promise((reslove,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){
reslove(x.response)
}else{
reject(x.status)
}
}
}
})
}
// Promise then 测试
sendAJAX("https://api.apiopen.top/getJoke").then(value=>{
console.log(value)
},reason =>{
console.log(reason)
})
// async 与 await测试
async function main (){
let result = await sendAJAX("https://api.apiopen.top/getJoke")
console.log(result)
}
main()
</script>
</body>
</html>
ES8对象方法扩展
Object.values()
Object.values()方法返回一个给定对象的所有可枚举属性值的数组
Object.entries()
Object.entries()方法返回一个给定对象自身可遍历属性[key,value]的数组
Object.getOwnPropertyDescriptors()
Object.getOwnPropertyDescriptors()该方法返回指定对象所有自身属性的描述对象。
返回的是对象属性的描述对象。
对象属性的描述对象是什么？如：
const obj = Object.create(null,{
name:{
//对属性的描述
// 设置值
value:'yang',
// 属性特性,
writable:true,
configurable:true,//是否可以删除
enumerable:reue//书否可以枚举
}
})
eg：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<script>
const school={
name:"nefu",
city:"哈尔滨",
xueke:['java','web','python']
}
// 获取所有的键
console.log(Object.keys(school))
// 获取对象所有的值
console.log(Object.values(school))
// entries
console.log(Object.entries(school))
// entries的返回结果可以作为Map的值
const m = new Map(Object.entries(school))
console.log(m.get('city'))
//获取对象属性的 描述对象
console.log(Object.getOwnPropertyDescriptors(school))
</script>
</body>
</html>
输出：
