Promise解决回调嵌套问题及终极解决方案async 和 await

一、promise

1.异步函数 与 回调函数的说明

回调函数:

  1. 把一个函数当成参数传递, 将来特定的时机调用, 这个函数就叫回调函数
  2. 什么时候会用到回调函数, 异步的时候 延时器 setTimeout ajax (传入函数, 作为回调, 将来在特定时机调用)
console.log(1)

setTimeout(function() {
  console.log(2)
  
  setTimeout(function() {
    console.log(4)
  }, 1000)
  
  console.log(5)
}, 1000)

console.log(3)

//输出顺序: 1 3 2 5 4

回调函数的问题:

  1. 回调函数的阅读性不好, 回调不会立马执行
  2. 回调函数如果大量的嵌套, 可维护性差 (回调地狱)

promise 就是为了解决回调函数嵌套的问题而存在的

2.promise 的基本语法

目的: promise是书写异步代码的另一种方式, 解决回调函数嵌套的问题
1.如何创建一个 promise 对象

const p = new Promise((resolve, reject) => {  //两个参数
    promise内部会封装一个异步操作
    成功调用 resolve
    失败调用 reject
})

2.如何使用一个promise 对象

.then(res => { ... }) 处理成功
.catch(res => { ... }) 处理失败
案例:

例如:创建一个读写文件的promise对象

const fs=require('fs')   //node.js 内置的fs模块就是文件系统模块,负责读写文件
const p = new Promise(function (resolve, reject) {
  fs.readFile('a.txt', 'utf8', (err, data) => {   // promise 内部会封装一个异步的操作
    if (err) {
      reject(err)   // reject: 失败的时候, 需要调用
    } else {
      resolve(data)   // resolve: 成功的时候, 需要调用
    }
  })
})

使用读写文件的promise对象

p.then(res=>{   //res即是resolve返回的data
  console.log(res)
}).catch(err=>{  //err即是reject返回的err
  console.log(err)  
})

3.promise 解决回调地狱的问题

如果有多个 promise 需要依次处理, 支持链式编程.then(),前提条件:前一个promise必须返回(return)一个promise对象

案例:按照顺序依次读取 a, b, c 三个文件
回调地狱: 回调函数嵌套回调函数, 嵌套多了, 将来就很难维护, 很难理清顺序

promise 解决回调地狱的问题优化 :
将读取文件创建promise的过程封装起来,将来一调用函数,就可以创建promise对象

const fs=require('fs')   //Node.js 内置的fs模块就是文件系统模块,负责读写文件
//1.封装promise对象
function read (filename) {
  return new Promise(function (resolve, reject) {
    // promise 内部会封装一个异步的操作
    // resolve: 成功的时候, 需要调用
    // reject: 失败的时候, 需要调用
    fs.readFile(filename, 'utf8', (err, data) => {
      if (err) {
        reject(err)
      } else {
        resolve(data)
      }
    })
  })
}
//2.使用promise对象
read('a.txt').then(res => {
  console.log(res)
  return read('b.txt')    //返回一个promise对象
}).then(res => {         //支持链式编程then(),前提条件:前一个promise必须return一个promise对象
  console.log(res)
  return read('c.txt')
}).then(res => {
  console.log(res)
}).catch(err => {  //捕获错误
  console.log(err)
})
//会依次输出abc文件的内容:aa  bb  cc

二、async和await

虽然promise解决了嵌套回调的可维护问题,但是可读性并没有那么高,因此终极解决方案async和await来了
asyncawait,优化了promise的写法,让代码更加可维护了

1.async和await的特性

1.asyncawait是一对关键字,成对出现才有效
2.async用于修饰一个函数,表示一个函数是异步的(遇到await之前的内容,还是同步的)
3.await用于等待一个成功的结果,只能用在async函数中
4.await后面一般会跟一个promise对象await会阻塞async函数的执行,直到等到promise成功的结果(resolve的结果
5.await只会等待promise成功的结果,如果失败了会报错,需要使用try catch包裹

2.优化上方promise读取 a, b, c 三个文件
async function fn(){
  //async在遇到await之前,内容都是同步的
  console.log(111)
  //async和await 优化的代码编写方法
  const data1=await read('a.txt')
  console.log(data1)
  const data2=await read('b.txt')
  console.log(data2)
  const data3=await read('c.txt')
  console.log(data3)
}
fn()
console.log(222)
//会依次输出:111 222 aa bb cc
3.代码对比

普通函数

   switchChange(row) {
      let params = {id: row.id}
      changeStatus(params).then(res => {     //changeStatus为接口名称
        if (res.data.code == 0) {
          console.log('执行成功')
        } else {
          console.log('执行失败');
        }
      })
    },

使用async和await

    async switchChange(row) {                //1、使用async修饰函数switchChange
      let params = {id: row.id}
      const res = await changeStatus(params) //2、await在async函数中等待一个成功的结果并赋值给res
      if (res.data.code == 0) {              //3、拿到值继续判断操作
        console.log('执行成功')
      } else {
        console.log('执行失败');
      }
    },
4.错误捕获try catch
    async switchChange(row) {
      try {
        let params = {id: row.id}
        const res = await changeStatus(params)
        if (res.data.code == 0) {
          console.log('执行成功')
        } else {
          console.log('执行失败');
        }
      } catch (err) {
        console.log(err);
      }
    },
5.删除操作提示对比
//删除操作
handleDelete(index, row) {
      this.$confirm('此操作将删除该优惠券, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const params = {
          appId: this.appId, //租户ID
          couponId: row.id, //优惠券ID
        };
        deleteCoupon(params).then(res => {
          if (res.data.code == 0) {
               //...
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
   //删除操作
    async handleDelete(index, row) {
      try {
        await this.$confirm('此操作将删除该优惠券, 是否继续?', '提示', {
          type: 'warning'
        })    //当代码执行到此,表明用户在提示时点击了确定按钮
        const params = {
          appId: this.appId, //租户ID
          couponId: row.id, //优惠券ID
        };
        const res = await deleteCoupon(params)
        if (res.data.code == 0) {
           //...
        }
      } catch (err) {
        console.log(err);
      }
    },

拓展:element表格删除操作页码问题

if (res.data.code == 0) {
    //如果当前页数据只剩下最后一条,最后一条也被删了,此时应该让当前页 -1
    if(this.userList.length==1 && this.pageNum>1){
        this.pageNum--
    }
    //重新渲染当前页
    this.getUserList()
}

element 表格搜索,如果页码出现大量变换,一般重置第一页开始展示

btnSearch() {
  this.pageNum= 1
  this.getUserList()
}

element 分页,切换一页显示条数方法,如果页码出现大量变换,一般重置第一页开始展示

handleSizeChange(val) {
  this.pageNum= 1
  this.pageSize=val
  this.getUserList()
}

element表格添加操作页码问题

if (res.data.code == 0) {
    //添加成功后,重新渲染最后一页
    //若一共15条数据,每页5条,共3页。若再增加一条数据,此时应当渲染第4页了
    //注意点:this.total是添加前的,total需要 +1
    this.total++
    this.pageNum=Math.ceil(this.total/this.pageSize)
    this.getUserList()
}
 收藏 (0) 打赏

您可以选择一种方式赞助本站

支付宝扫一扫赞助

微信钱包扫描赞助

未经允许不得转载:共享博客 » Promise解决回调嵌套问题及终极解决方案async 和 await

分享到: 更多 (0)
avatar

评论 抢沙发

  • QQ号
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
切换注册

登录

忘记密码 ?

切换登录

注册

我们将发送一封验证邮件至你的邮箱, 请正确填写以完成账号注册和激活