一、promise
1.异步函数 与 回调函数的说明
回调函数:
- 把一个函数当成参数传递, 将来特定的时机调用, 这个函数就叫回调函数
- 什么时候会用到回调函数, 异步的时候 延时器
setTimeout
Ajax
(传入函数, 作为回调, 将来在特定时机调用)
[crayon-60083735b9298280450999/]
回调函数的问题:
- 回调函数的阅读性不好, 回调不会立马执行
- 回调函数如果大量的嵌套, 可维护性差 (回调地狱)
promise 就是为了解决回调函数嵌套的问题而存在的
2.promise 的基本语法
目的: promise
是书写异步代码的另一种方式, 解决回调函数嵌套的问题
1.如何创建一个 promise 对象
1 2 3 4 5 6 |
const p = new Promise((resolve, reject) => { //两个参数 promise内部会封装一个异步操作 成功调用 resolve 失败调用 reject }) |
2.如何使用一个promise 对象
1 2 3 |
.then(res => { ... }) 处理成功 .catch(res => { ... }) 处理失败 |
案例:
例如:创建一个读写文件的promise对象
1 2 3 4 5 6 7 8 9 10 11 |
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对象
1 2 3 4 5 6 |
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对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
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
来了
async
和await
,优化了promise
的写法,让代码更加可维护了
1.async和await的特性
1.
async
和await
是一对关键字,成对出现才有效
2.async
用于修饰一个函数,表示一个函数是异步的(遇到await
之前的内容,还是同步的)
3.await
用于等待一个成功的结果,只能用在async
函数中
4.await
后面一般会跟一个promise对象
,await
会阻塞async函数
的执行,直到等到promise
成功的结果(resolve的结果
)
5.await
只会等待promise
成功的结果,如果失败了会报错,需要使用try catch
包裹
2.优化上方promise读取 a, b, c 三个文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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.代码对比
普通函数
1 2 3 4 5 6 7 8 9 10 11 |
switchChange(row) { let params = {id: row.id} changeStatus(params).then(res => { //changeStatus为接口名称 if (res.data.code == 0) { console.log('执行成功') } else { console.log('执行失败'); } }) }, |
使用async和await
1 2 3 4 5 6 7 8 9 10 |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
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.删除操作提示对比
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
//删除操作 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: '已取消删除' }); }); }, |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//删除操作 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表格删除操作页码问题
1 2 3 4 5 6 7 8 9 |
if (res.data.code == 0) { //如果当前页数据只剩下最后一条,最后一条也被删了,此时应该让当前页 -1 if(this.userList.length==1 && this.pageNum>1){ this.pageNum-- } //重新渲染当前页 this.getUserList() } |
element 表格搜索,如果页码出现大量变换,一般重置第一页开始展示
1 2 3 4 5 |
btnSearch() { this.pageNum= 1 this.getUserList() } |
element 分页,切换一页显示条数方法,如果页码出现大量变换,一般重置第一页开始展示
1 2 3 4 5 6 |
handleSizeChange(val) { this.pageNum= 1 this.pageSize=val this.getUserList() } |
element表格添加操作页码问题
1 2 3 4 5 6 7 8 9 |
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() } |
评论抢沙发