理解:
Promise返回一個(gè)對象,這個(gè)對象的構造函數里面可以傳入函數,函數的第一個(gè)參數是一個(gè)回調函數,即成功的回調函數。函數的第二個(gè)參數也是回調函數,失敗的回調函數。這個(gè)對象可以.then().catch(),所以可以寫(xiě)成new Promise().then().catch(),也可以寫(xiě)成var a = new Promise(); a.then().catch();
Promise構造函數的參數是一個(gè)函數,函數里面的代碼是異步的,即Promise里面的操作,和Promise()外面的操作時(shí)異步"同時(shí)"進(jìn)行的,
Promise中的函數的第一個(gè)參數是回調函數,resolve用來(lái)觸發(fā)then里面的代碼,第二個(gè)參數是回調函數,reject用來(lái)觸發(fā)catch中的代碼,throw new Error();也可以觸發(fā)catch,
await可以是Promise同步,即不會(huì )立即執行Proimse外面(或者說(shuō)下面)的代碼,而await只能用在async標記的函數中,這樣async函數本身就是異步的,而async函數里面的代碼是同步的
async本身是異步的,可以這樣理解,async函數執行到await的時(shí)候就立即返回,開(kāi)始執行async下面的代碼,與await等待執行的代碼同時(shí)執行
漸進(jìn)理解:
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是兩個(gè)回調函數,調用resolve會(huì )觸發(fā)then,reject會(huì )觸發(fā)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('我勒個(gè)去!');//觸發(fā)catch
console.log(r)
}).catch(e=>{
console.log('promise catch')
console.log(e)
})
},
//throw new Error('哈哈哈哈')也會(huì )觸發(fā)catch
test:function(){
//做飯
function cook(){
console.log('開(kāi)始做飯。');
var p = new Promise(function(resolve, reject){ //做一些異步操作
setTimeout(function(){
console.log('做飯完畢!');
resolve('雞蛋炒飯');
}, 1000);
});
return p;
}
//吃飯
function eat(data){
console.log('開(kāi)始吃飯:' + data);
var p = new Promise(function(resolve, reject){ //做一些異步操作
setTimeout(function(){
console.log('吃飯完畢!');
resolve('一塊碗和一雙筷子');
}, 2000);
});
return p;
}
function wash(data){
console.log('開(kāi)始洗碗:' + 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返回到是一個(gè)對象,可以在對象后面加then,then要在resolve后才會(huì )觸發(fā),所以會(huì )順序執行,但是它本身是異步的,所以沒(méi)有.then的代碼會(huì )是會(huì )異步執行
test:function(){
//做飯
function cook(){
console.log('開(kāi)始做飯。');
var p = new Promise(function(resolve, reject){ //做一些異步操作
setTimeout(function(){
console.log('做飯失??!');
reject('燒焦的米飯');
}, 1000);
});
return p;
}
//吃飯
function eat(data){
console.log('開(kāi)始吃飯:' + data);
var p = new Promise(function(resolve, reject){ //做一些異步操作
setTimeout(function(){
console.log('吃飯完畢!');
resolve('一塊碗和一雙筷子');
}, 2000);
});
return p;
}
cook()
.then(eat, function(data){
console.log(data + '沒(méi)法吃!');
})
console.log('cooke done ???')
},
//reject 方法就是把 Promise 的狀態(tài)置為已失?。≧ejected),這時(shí) 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返回的是一個(gè)Promise對象,then的第一個(gè)參數就是async函數的返回值
如果var a = await testAsync();返回值就是"hello async",因為await等待的就是Promise的返回,而async返回到就是一個(gè)Promise,然后這個(gè)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)
},
//使網(wǎng)絡(luò )請求同步,但是仔細一看,其實(shí)axios.post也有then catch,所以可以有更簡(jiǎn)單的調用
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)
},
或者寫(xiě)成request:async function(){}
mounted:function(){
console.log('test async')
this.request()
console.log('async done')
},
//async函數使其內部同步,同級調用還是異步,async函數下面的接口會(huì )在async函數中的await執行完之前調用
聯(lián)系客服