Vue语法
promise 的使用
Promise构造函数的参数是一个函数,函数里面的代码是异步的,即Promise里面的操作,和Promise()外面的操作时异步"同时"进行的。Promise中的函数的第一个参数是回调函数,resolve用来触发then里面的代码,第二个参数是回调函数,reject用来触发catch中的代码,throw new Error();也可以触发catch,
<script>
new Promise((resolve, reject) =>{
setTimeout(() =>{
//成功的时候调用resolve
resolve('成功data')
//失败的时候调用reject
reject('error message')
}, 1000)
}).then((data) =>{
//处理成功后的逻辑
console.log(data);//这个data 是接收的resolve参数--
}).catch((err) =>{
console.log(err);
})
</script>
在一个promise链中,只要任何一个promise被reject,promise链就被破坏了,reject之后的promise都不会再执行,而是直接调用.catch方法。
p1().then(p2).then(p3)
.then(function(data) {
console.log('data: ' + data);
})
.catch(function(error) {
console.log('error: ' + error);
});
function p1() {
return new Promise(function(resolve, reject) {
console.log('p1 resolved');
resolve(123);
});
}
function p2() {
return new Promise(function(resolve, reject) {
console.log('p2 rejected');
reject(456);
});
}
function p3() {
return new Promise(function(resolve, reject) {
console.log('p3 resolved');
resolve(789);
});
}// 执行结果p1 resolvedp2 rejectederror: 456
async await
Promise构造函数的参数是一个函数,函数里面的代码是异步的,即Promise里面的操作,和Promise()外面的操作时异步"同时"进行的。此外,只要在函数前面加上async 关键字,也可以指明函数是异步的。
async关键字实际是通过Promise实现,如果async 函数中有返回一个值 ,当调用该函数时,内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回,但如果timeout 函数内部抛出错误,那么就会调用Promise.reject() 返回一个promise 对象。若某函数调用一个异步函数(比如内部含有primise),该函数应用async修饰。
await表示“等待”,修饰返回promise 对象的表达式。注意await 关键字只能放到async 函数里面。
await表示“等待”,修饰返回promise 对象的表达式。注意await 关键字只能放到async 函数里面。
function doubleAfter2seconds(num) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2 * num)
}, 2000);
} )
}//写一个async 函数,从而可以使用await 关键字, await 后面放置的就是返回promise对象的一个表达式,所以它后面可以写上 doubleAfter2seconds 函数的调用
async function testResult() {
let result = await doubleAfter2seconds(30);
console.log(result);
}
await 等待后面的promise对象执行完毕,然后拿到promise resolve 的值并进行返回。显然await可以修饰axios请求,等待得到结果再往下进行,如:
async getUserList(){
const {data: res} = await this.$http.get('users', {
params: this.queryInfo
})
//console.log(res)
if (res.meta.status !== 200) return this.$message.error('获取用户列表失败! ')
this.userlist = res.data.users
this.total = res.data.total
}
补充:
1.promise简单用法
function2(){
// 你的逻辑代码
return Promise.resolve(/* 这里是需要返回的数据*/)
}
function3(){
// 你的逻辑代码
return Promise.resolve(/* 这里是需要返回的数据*/)
}
// 调用
function1(){
this.function2().then(val => {
this.function3();
});
}
2.promise高阶用法
init1(){
return new Promise((resolve, reject) => {
let data={
dateStr:this.time
};
api.get('url', null).then( res => {
//自己的操作
resolve()
}).catch(err => {
reject()
});
});
};
init2(){
return new Promise((resolve, reject) => {
let data={
dateStr:this.time
};
api.get('url', null).then( res => {
//自己的操作
resolve()
}).catch(err => {
reject()
});
});
};
//调用
Promise.all([this.init1(),this.init2()]).then(() => {
//两个都调成功以后执行的操作
//主要是loading问题
}).catch(err => {
// 抛出错误信息
});