async和await的应⽤
async和await
1. 介绍
什么是async和await：
async 和 await 是es7技术，可以简化 Promise 操作，提⾼ Promise 代码的 阅读性 和 理解性；
async和await结合起来，可以使得异步调⽤不返回Promise对象，⽽直接把then回调函数的第⼀个形参result给返回出来，使得代码更节俭，提⾼开发效率，也可以保证异步调⽤的顺序执⾏、减少回调地狱出现程度。
async和await的作⽤：
1. 替代then()。
2. 保证各个异步调⽤顺序执⾏，减少回调地狱。
async和await的好处：
1. 代码更节省、结构更清晰、便于阅读和理解。
2. 提⾼开发效率。
应⽤：
对3个⽂件进⾏读取操作
const fs =require('fs')
// 在Promise内部不要设置"业务逻辑"代码，同时内部需要把promise对象进⾏return返回function getContent(filename){
// resolve：代表异步成功执⾏的回调函数
// reject：代表异步失败执⾏的回调函数
return new Promise(function(resolve,reject){
// 异步操作
if(err){return reject('⽂件错误了：'+err)}
resolve(data)
})
})
}
// 封装⼀个函数，⼀并读取3个⽂件内容
// await：要修饰promise对象，async：要放到await外边最近的function函数前边
// await会把promise对象直接变为then⾥边的result结果
// async 和 await 会简化Promise对象操作，使得不⽤调⽤then或catch⽅法，代码更节省、更优雅// 并且可以保证多个异步“顺序”执⾏，还没有回调“地狱”
// async 和 await 是es7技术
// (es6/2015  es7/2016  es8/2017 es9/2018 es10/2019 es2020 es2021)
async function getThreeContent(){
console.log(await getContent('./'))
console.log(await getContent('./'))
console.log(await getContent('./'))
}
// p1
//  .then(result=>{
//    console.log(result)
//  })
//  .catch(err=>{
//  console.log('错误了'+err)
/
/ })
getThreeContent()
2. 应⽤
需求：
通过async和await升级改造获取频道列表的代码
语法：
async function xxx(){
let rst =await yyy()
}
// xxx函数嵌套调⽤yyy函数，yyy会返回⼀个promise对象
// 在xxx前边设置async，在yyy前边设置await
/
/ rst：就是then⽅法回调函数实参的形参，即下述代码的result
function xxx(){
let pro =yyy()
pro
.then(result=>{xxx})
}
应⽤：
不使⽤async和await获取频道的代码：
getChannelList(){
let pro =this.$http({
url:'/mp/v1_0/channels',
method:'get'
})await和async使用方法
pro
.then(result =>{
// console.log(result)
this.channelList = result.data.data.channels
})
.catch(err =>{
return this.$('获得频道失败：'+ err)
})
}
async和await介⼊应⽤：
async getChannelList(){
let result =await this.$http({
url:'/mp/v1_0/channels',
method:'get'
})
this.channelList = result.data.data.channels
}
3. 错误处理try/catch
如果axios请求过程中发⽣错误，可以通过异常机制 try、catch 加以处理，try、catch是 javascript语⾔本⾝技术。
语法：
try{
// 放置有可能产⽣错误的代码
aa
bb
cc
}catch(err){
// 对try内部的错误进⾏捕捉处理
// err：是具体错误对象
dd
}
ee
/
/ try、catch使⽤情形分析：
// 1. 没有任何错误，那么执⾏： a  b  c  e
// 2. try中的b有错误，那么执⾏：  a  d  e
// 特点：
// try内部：如果有错误，错误后续代码不执⾏
// ⽆论是否有错误，try/catch后续代码都会运⾏，其可以保证流程是"完整"的
//  如果try或catch内部有return，就另当别论了
注意：
1. try/catch根据实际情况进⾏使⽤。
2. 如果没有必要也可以不设置，使得项⽬代码更简洁、运⾏速度更快。
应⽤：
async getChannelList(){
try{
// 有可能产⽣错误的代码
let result =await this.$http({
url:'/mp/v1_0/channelsabcd',
method:'get'
})
this.channelList = result.data.data.channels
}catch(err){
// 捕捉错误信息
this.$('获得频道失败！'+ err)
}
}
注意：
1. try/catch可以保证项⽬代码"完整"运⾏，但要设置return就不保证完整了。
2. 如果对错误有完全的把控，可以去除try/catch机制。
4. async和await其他应⽤情形
var obj ={
async getInfo:function(){
await getXXXX()
await getXXXX()
}
}
// 或
function ffff(){
// async需要设置到Promise对象(await)外层最近function的前边位置
getInfo(async function(){
await getXXXX()
//console.log(getXXXX())
})
}
// 或
async function XXXX(){
await getXXXX()
}
注意：
1. async需要设置到Promise对象(await)外边最近的function前边位置。
2. await必须结合async⼀并使⽤。
3. async可以独⽴修饰函数使⽤，返回值是Promise对象(了解)。
4. ⼀个async可以对应多个await，并且各个await顺序执⾏。
5. await 后⾯可以跟任何的JS 表达式(字符串、数值)，但是修饰 Promise对象 更有意义。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。