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))
不积跬步无以至千里 不积小流无以成江海
