一、Promise
1.异步函数 与 回调函数的说明
回调函数:
- 把一个函数当成参数传递, 将来特定的时机调用, 这个函数就叫回调函数
- 什么时候会用到回调函数, 异步的时候 延时器
setTimeoutajax(传入函数, 作为回调, 将来在特定时机调用)
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
回调函数的问题:
- 回调函数的阅读性不好, 回调不会立马执行
- 回调函数如果大量的嵌套, 可维护性差 (回调地狱)
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来了
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 三个文件
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()
}
