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){
    // 异步操作
    fs.readFile(filename,'utf8',function(err,data){
      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('./files/03.txt'))
  console.log( await getContent('./files/02.txt'))
  console.log( await getContent('./files/01.txt'))
}
// 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'
  })
  pro
    .then(result => {
    // console.log(result)
    this.channelList = result.data.data.channels
  })
    .catch(err => {
    return this.$message.error('获得频道失败：' + 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.$message.error('获得频道失败！' + 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对象 更有意义。