弄清楚promise、async、await-js教程-PHP中文網

上一篇呢，主要是聊了聊同步、異步，他們各自引申出來的'執行棧'、'消息隊列'，以及'宏任務'、'微任務'，如果大家對這幾個概念不太了解，可以去這個連結：

https://www.jianshu.com/p/61e7844e68d8

宏任務與微任務都是非同步的，其中包括ajax請求、計時器等等，我們初步的了解promise，知道他是解決異步的一種方式，那麼我們常用的一共有哪幾種方法呢?

因為涉及的知識點比較多，這篇文章主要是講一下，回呼函數和promise：

一、回呼函數

先上代码：
function f2() {
    console.log('2222')
}
function f1(callback){
    console.log('111')
　　setTimeout(function () {
　　　　callback(); 
　　}, 5000);
　　console.log('3333')
}
f1(f2);

先看下打印值是：
111
3333
五秒后2222

登入後複製

相當於主執行緒執行完了，會透過回呼函數去呼叫f2函數，這個沒什麼毛病。但看下下面的例子：

现在我们读取一个文件，fileReader就是一个异步请求

// 这个异步请求就是通过回调函数的方式获取的

var reader = new FileReader()
var file = input.files[0]
reader.readAsText(file, 'utf-8',function(err, data){
    if(err){
        console.log(err)
    } else {
        console.log(data)
    }
})

登入後複製

現在看起來也很不錯，但是如果檔案上傳出錯了，我們還要在回調裡面做判斷，要是我們讀取完這個檔案接著要讀取多個文件呢？是不是應該這麼寫：

读取完文件1之后再接着读取文件2、3

var reader = new FileReader()
var file = input.files[0]
reader.readAsText(file1, 'utf-8',function(err1, data1){
    if(err1){
        console.log(err1)
    } else {
        console.log(data1)
    }
    reader.readAsText(file2, 'utf-8',function(err2, data2){
        if(err2){
            console.log(err2)
        } else {
            console.log(data2)
        }
        reader.readAsText(file3, 'utf-8',function(err3, data3){
            if(err3){
                console.log(err3)
            } else {
                console.log(data3)
            }
        })
    })
})

登入後複製

這麼寫可以實現需求，但是這個程式碼的可讀性就比較差，看起來就不那麼優雅，也就是我們常說的‘回調地獄’。那麼要怎麼破解這種嵌套式的回呼呢？ ES6為我們提供了promise：

二、promise

首先我們從字面意思上理解一下什麼是promise？ promise可以翻譯成承諾、保證，這個地方你可以理解為：

女朋友讓我做了一件事，雖然還沒幹完，但是我保證這件事會有一個結果給你，成功（fulfiled）或失敗（rejected），還有一個等待狀態（pending）。

还是先上例子

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2000) // 成功以后这个resolve会把成功的结果捕捉到
        // reject(2000) // 失败以后这个reject会把失败的结果捕捉到
    }, 1000)
    console.log(1111)
})

promise.then(res => {
    console.log(res) // then里面第一个参数就能拿到捕捉到的成功结果
}, err =>{
    console.log(res)// then里面第二个参数就能拿到捕捉到的失败结果
})

打印结果：

1111
2000（一秒以后）

登入後複製

1、then鍊式操作

Promise物件的then方法傳回一個新的Promise對象，因此可以透過鍊式呼叫then方法。

then方法接收兩個函數作為參數，第一個參數是Promise執行成功時的回調，第二個參數是Promise執行失敗時的回調，這個上面的例子說的很明白了，第二個參數捕捉的就是失敗的回呼。

兩個函數只會有一個被調用，這句話怎麼理解呢？
女朋友讓你去做番茄雞蛋湯，你要嘛就去做，要嘛就不做，叫外賣，肯定沒有第三種選擇。

函數的回傳值將被用作建立then回傳的Promise物件。這句話該怎麼理解呢？還是上例子：

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2000)
    }, 1000)
    console.log(1111)
})
promise.then(res => {
    console.log(res) // 这个地方会打印捕捉到的2000
    return res + 1000 // 这个函数的返回值，返回的就是这个promise对象捕捉到的成功的值
}).then(res => {
    console.log(res) //这个地方打印的就是上一个promise对象return的值
})

所以打印顺序应该是：

1111
2000
3000

登入後複製

剛才我們看到了then接受兩個參數，一個是成功的回調、一個是失敗的回調，看起來好像也不是那麼優雅，promise裡除了then還提供了catch方法：

2、catch捕捉操作

這個catch就是專門捕捉錯誤的回呼的，還是先看例子：

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(2000) // 失败以后这个reject会把失败的结果捕捉到
    }, 1000)
    console.log(1111)
})
promise.catch(res => {
    console.log(res) // catch里面就能拿到捕捉到的失败结果
})

打印结果：

1111
2000（一秒以后）

登入後複製

除了then和catch之外，promise還有兩個文法，all和race，我們也簡單用一下：

3、all

現在我們有這麼一個需求，一共有三個介面A、B、C，必須三個介面都成功以後，才能發起第四個請求，要怎麼實現？

鍊式呼叫

let getInfoA = new Promise((resolve, reject) => {
    console.log('小A开始执行了')
    resolve()
}).then(res => {
    let getInfoB = new Promise((resolve, reject) => {
        console.log('小B开始执行了')
        resolve()
    }).then(res => {
        let getInfoC = new Promise((resolve, reject) => {
            console.log('小C开始执行了')
            resolve()
        }).then(res => {
            console.log('全都执行完了！')
        })
    })
})

登入後複製

一層套一層的，好像不是那麼優雅

all

let getInfoA = new Promise((resolve, reject) => {
    console.log('小A开始执行了')
    resolve()
})
let getInfoB = new Promise((resolve, reject) => {
    console.log('小B开始执行了')
    resolve()
})
let getInfoC = new Promise((resolve, reject) => {
    console.log('小C开始执行了')
    resolve()
})
Promise.all([getInfoA, getInfoB, getInfoC]).then(res => {
   console.log('全都执行完了！')
})

登入後複製

接收一個Promise物件組成的陣列作為參數，當這個陣列所有的Promise物件狀態都變成resolved或是rejected的時候，它才會去呼叫then方法。非常完美，非常優雅。

4、race

現在又有一個需求，同樣是介面A、B、C，只要有一個回應了，我就可以調接口D，那怎麼實作呢？

1、傳統方式

let getInfoA = new Promise((resolve, reject) => {
    console.log('小A开始执行了')
    setTimeout((err => {
        resolve('小A最快')
    }),1000)
}).then(res =>{
    console.log(res)
})
let getInfoB = new Promise((resolve, reject) => {
    console.log('小B开始执行了')
    setTimeout((err => {
        resolve('小B最快')
    }),1001)
}).then(res =>{
    console.log(res)
})
let getInfoC = new Promise((resolve, reject) => {
    console.log('小C开始执行了')
    setTimeout((err => {
        resolve('小C最快')
    }),1002)
}).then(res =>{
    console.log(res)
})

打印结果

小A开始执行了
小B开始执行了
小C开始执行了
小A最快

登入後複製

這個方法得寫三遍，好像也不是那麼優雅，一起來看下race該怎麼寫？

2、race

let getInfoA = new Promise((resolve, reject) => {
    console.log('小A开始执行了')
    setTimeout((err => {
        resolve('小A最快')
    }),1000)
})
let getInfoB = new Promise((resolve, reject) => {
    console.log('小B开始执行了')
    setTimeout((err => {
        resolve('小B最快')
    }),1001)
})
let getInfoC = new Promise((resolve, reject) => {
    console.log('小C开始执行了')
    setTimeout((err => {
        resolve('小C最快')
    }),1002)
})
Promise.race([getInfoA, getInfoB, getInfoC]).then(res => {
    console.log(res)
})

打印结果

小A开始执行了
小B开始执行了
小C开始执行了
小A最快

登入後複製

與Promise.all相似的是，Promise.race都是以一個Promise物件組成的陣列作為參數，不同的是，只要當陣列中的其中一個Promsie狀態變成resolved或rejected時，就可以呼叫.then方法了。

promise是ES6用來解決非同步的一個方法，現在用的已經比較廣泛了，像我們常用的axios，他就是用promise封裝的，用起來非常方便。

除了promise，ES6也為我們提供了終極大招async、await，因為這兩個知識塊比較大，所以我們準備下一篇文章講。

個人的微信公眾號：小Jerry有話說，平常會發一些技術文章和讀書筆記，歡迎交流。

推薦教學：《JS教學》

以上是弄清楚promise、async、await的詳細內容。更多資訊請關注PHP中文網其他相關文章！