vue使用promise、async、await的一点理解
理解:Promise返回一个对象,这个对象的构造函数里面可以传入函数,函数的第一个参数是一个回调函数,即成功的回调函数。函数的第二个参数也是回调函数,失败的回调函数。这个对象可以.then().catch(),所以可以写成new Promise().then().catch(),也可以写成var a = new Promise(); a.then().catch();Promise构造函数...
理解:
Promise返回一个对象,这个对象的构造函数里面可以传入函数,函数的第一个参数是一个回调函数,即成功的回调函数。函数的第二个参数也是回调函数,失败的回调函数。这个对象可以.then().catch(),所以可以写成new Promise().then().catch(),也可以写成var a = new Promise(); a.then().catch();
Promise构造函数的参数是一个函数,函数里面的代码是异步的,即Promise里面的操作,和Promise()外面的操作时异步"同时"进行的,
Promise中的函数的第一个参数是回调函数,resolve用来触发then里面的代码,第二个参数是回调函数,reject用来触发catch中的代码,throw new Error();也可以触发catch,
await可以是Promise同步,即不会立即执行Proimse外面(或者说下面)的代码,而await只能用在async标记的函数中,这样async函数本身就是异步的,而async函数里面的代码是同步的
async本身是异步的,可以这样理解,async函数执行到await的时候就立即返回,开始执行async下面的代码,与await等待执行的代码同时执行
渐进理解:
test:function(){
new Promise((resolve, reject)=>{
console.log('promise')
setTimeout(()=>{
console.log('time out')
console.log(reject)
reject(3455435)
}, 1000)
}).then(r=>{
console.log('promise then')
console.log(r)
}).catch(e=>{
console.log('promise catch')
console.log(e)
})
console.log('new Promise done')
},
//resolve和reject是两个回调函数,调用resolve会触发then,reject会触发catch
test:function(){
new Promise((resolve, reject)=>{
console.log('promise')
setTimeout(()=>{
console.log('time out')
console.log(resolve)
resolve(3455435)
}, 1000)
}).then(r=>{
console.log('promise then')
throw new Error('我勒个去!');//触发catch
console.log(r)
}).catch(e=>{
console.log('promise catch')
console.log(e)
})
},
//throw new Error('哈哈哈哈')也会触发catch
test:function(){
//做饭
function cook(){
console.log('开始做饭。');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('做饭完毕!');
resolve('鸡蛋炒饭');
}, 1000);
});
return p;
}
//吃饭
function eat(data){
console.log('开始吃饭:' + data);
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('吃饭完毕!');
resolve('一块碗和一双筷子');
}, 2000);
});
return p;
}
function wash(data){
console.log('开始洗碗:' + data);
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('洗碗完毕!');
resolve('干净的碗筷');
}, 2000);
});
return p;
}
cook()
.then(function(data){
return eat(data);
})
.then(function(data){
return wash(data);
})
.then(function(data){
console.log(data);
});
console.log('cook done????')
},
//new Promise返回到是一个对象,可以在对象后面加then,then要在resolve后才会触发,所以会顺序执行,但是它本身是异步的,所以没有.then的代码会是会异步执行
test:function(){
//做饭
function cook(){
console.log('开始做饭。');
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('做饭失败!');
reject('烧焦的米饭');
}, 1000);
});
return p;
}
//吃饭
function eat(data){
console.log('开始吃饭:' + data);
var p = new Promise(function(resolve, reject){ //做一些异步操作
setTimeout(function(){
console.log('吃饭完毕!');
resolve('一块碗和一双筷子');
}, 2000);
});
return p;
}
cook()
.then(eat, function(data){
console.log(data + '没法吃!');
})
console.log('cooke done ???')
},
//reject 方法就是把 Promise 的状态置为已失败(Rejected),这时 then 方法执行“失败”情况的回调(then 方法的第二参数)。
test:function(){
async function testAsync(){
return "hello async"
}
var a = testAsync();
console.log(a)
a.then((b)=>{
console.log("a.then")
console.log(b)
})
},
//async返回的是一个Promise对象,then的第一个参数就是async函数的返回值
如果var a = await testAsync();返回值就是"hello async",因为await等待的就是Promise的返回,而async返回到就是一个Promise,然后这个Promise中直接返回了"hello async"
test:function(){
function takeLongTime() {
return new Promise(resolve => {
setTimeout(() => resolve("long_time_value"), 1000);
});
}
async function test() {
console.log('before takeLongTime')
const v = await takeLongTime();
console.log(v);
}
test();
console.log('after test')
},
//await可以阻塞Promise对象,await=async wait,await只能出现在async函数内部
async request(){
var url = this.url
var a = new Promise(resolve=>{
this.axios.post(url,
postData
).then(res=>{
console.log(res.data)
resolve('请求成功')
}).catch(error=>{
console.log(error)
resolve('请求失败')
})
console.log('new Promise done')
})
console.log('before await a')
var b = await a
console.log('await a done')
console.log(b)
},
//使网络请求同步,但是仔细一看,其实axios.post也有then catch,所以可以有更简单的调用
async request(){
var url = this.url
var a = this.axios.post(url,
postData,
{
// 单独配置
withCredentials: true
}
).then(res=>{
console.log(res.data)
return '请求成功'
}).catch(error=>{
console.log(error)
return '请求失败'
})
console.log('before await a')
var b = await a
console.log('await a done')
console.log(b)
},
或者写成request:async function(){}
mounted:function(){
console.log('test async')
this.request()
console.log('async done')
},
//async函数使其内部同步,同级调用还是异步,async函数下面的接口会在async函数中的await执行完之前调用
更多推荐
所有评论(0)