關(guān)鍵字: Promise js異步 vue
參考文章:
http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html
https://blog.csdn.net/shan1991fei/article/details/78966297
https://blog.csdn.net/hey_zng/article/details/75151853
https://segmentfault.com/a/1190000010420744

背景

最近寫前端業(yè)務(wù)严卖，需要順序請(qǐng)求多個(gè)api正驻，因此研究了一下比較好的異步寫法。在此記錄俘闯。

Promise.then寫法

1. 一般寫法

• Promise對(duì)象在new 的時(shí)候接收function類型的參數(shù)
• .then函數(shù)接收一個(gè)function類型的參數(shù)，該function需要返回一個(gè)Promise對(duì)象
• .then中的回調(diào)函數(shù)如果有返回值侥袜，會(huì)作為下一個(gè).then回調(diào)函數(shù)的輸入；如果沒有返回值募胃，則默認(rèn)返回undefined

2. 循環(huán)內(nèi)的使用

• 先執(zhí)行for循環(huán)，然后才會(huì)異步調(diào)用then里的promise畦浓，所以需要如下的執(zhí)行方式：

var pList= [];
for (var i = 0; i < 10; i++) {
    pList.push(createPromise());//放入Promise對(duì)象
}
Promise.all(pList)
    .then(function(responses) { //這邊的then接收的是之前所有all函數(shù)的執(zhí)行結(jié)果痹束，是一個(gè)list
        for (i = 0; i < responses.length; i++)
            console.log(responses[i].data);
        }

    )

關(guān)于Promise對(duì)象的個(gè)人體會(huì)

promise語法的本質(zhì)是為了方便寫回調(diào)函數(shù)

例子：

var p = new Promise( _ => {
    {一段異步代碼}
})
p.then( r => {
  console.log('callback');
})

等價(jià)于：

new Promise( _ => {
    {一段異步代碼}
    {console.log('callback');}
})

• promise的寫法保證執(zhí)行完{異步代碼}后再執(zhí)行之后的內(nèi)容。
• 每個(gè).then函數(shù)可以理解為向上一個(gè)Promise對(duì)象的function中嵌套代碼

個(gè)人實(shí)踐中總結(jié)出的結(jié)構(gòu)化寫法

在VUE中按面向?qū)ο蟮乃悸穼懏惒讲糠?/h5>

• fileX.js中定義了class A

export class A {
    constructor() {this.str = '請(qǐng)求api...'}
    load() { //模擬api異步請(qǐng)求(VUE中的request對(duì)象)
        return new Promise(function(resolve, reject) {
            setTimeout(resolve, 1000, 'aaaa')}
        ).then(_=>console.log(this.str))
    }
}

• 如下寫法可以保證執(zhí)行順序以及函數(shù)的閉包環(huán)境（直接寫.then(a.load)會(huì)導(dǎo)致load函數(shù)中的this對(duì)象丟失）：

let a = new A()
let b = new A()
a.load().then( _ => b.load())
    .then(_=>console.log('asasas'))

使用async-await關(guān)鍵字代替.then的寫法

async 關(guān)鍵字作用于function讶请，從而在函數(shù)內(nèi)可以使用await關(guān)鍵字標(biāo)識(shí)異步方法

f_say = function(timeout, str) { //對(duì)應(yīng)api
    return new Promise(function(resolve, reject) {setTimeout(resolve, timeout, str)} )
}
f_test1 = async function(timeout, str) { //對(duì)應(yīng)api請(qǐng)求與處理函數(shù)
    const v = await f_say(timeout, str)
    console.log(v)
}
f_test = async function(){ //對(duì)應(yīng)外部順序業(yè)務(wù)
    await f_test1(1000, 'aaaa');
    console.log('!a!');
    await f_test1(100, 'bbbb');
    console.log('!b!');
    await f_test1(5000, 'cccc');
    console.log('!c!');
}
f_test()

可以保證f_test()函數(shù)中的各語句順序執(zhí)行