創(chuàng)新互聯(lián)www.cdcxhl.cn八線動態(tài)BGP香港云服務器提供商，新人活動買多久送多久，劃算不套路！

在成都網(wǎng)站設(shè)計、做網(wǎng)站過程中，需要針對客戶的行業(yè)特點、產(chǎn)品特性、目標受眾和市場情況進行定位分析，以確定網(wǎng)站的風格、色彩、版式、交互等方面的設(shè)計方向。創(chuàng)新互聯(lián)公司還需要根據(jù)客戶的需求進行功能模塊的開發(fā)和設(shè)計，包括內(nèi)容管理、前臺展示、用戶權(quán)限管理、數(shù)據(jù)統(tǒng)計和安全保護等功能。

這期內(nèi)容當中小編將會給大家?guī)碛嘘P(guān)promise、async、await是什么意思，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

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

因為涉及的知識點比較多，這篇文章主要是講一下，回調(diào)函數(shù)和promise：

一、回調(diào)函數(shù)

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

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

相當于主線程執(zhí)行完了，會通過回調(diào)函數(shù)去調(diào)用f2函數(shù)，這個沒什么毛病。但是看下下面的例子：

現(xiàn)在我們讀取一個文件，fileReader就是一個異步請求

// 這個異步請求就是通過回調(diào)函數(shù)的方式獲取的

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)
    }
})

現(xiàn)在看起來也很不錯，但是如果文件上傳出錯了，我們還要在回調(diào)里面做判斷，要是我們讀取完這個文件接著要讀取多個文件呢？是不是應該這么寫：

讀取完文件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)
            }
        })
    })
})

這么寫可以實現(xiàn)需求，但是這個代碼的可讀性就比較差，看起來就不那么優(yōu)雅，也就是我們常說的‘回調(diào)地獄’。那么怎么破解這種嵌套式的回調(diào)呢？ES6為我們提供了promise：

二、promise

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

女朋友讓我干了一件事，雖然還沒干完，但是我保證這件事會有一個結(jié)果給你，成功（fulfiled）或者失敗（rejected），還有一個等待狀態(tài)（pending）。

還是先上例子

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2000) // 成功以后這個resolve會把成功的結(jié)果捕捉到
        // reject(2000) // 失敗以后這個reject會把失敗的結(jié)果捕捉到
    }, 1000)
    console.log(1111)
})

promise.then(res => {
    console.log(res) // then里面第一個參數(shù)就能拿到捕捉到的成功結(jié)果
}, err =>{
    console.log(res)// then里面第二個參數(shù)就能拿到捕捉到的失敗結(jié)果
})

打印結(jié)果：

1111
2000（一秒以后）

1、then鏈式操作

Promise對象的then方法返回一個新的Promise對象，因此可以通過鏈式調(diào)用then方法。

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

兩個函數(shù)只會有一個被調(diào)用，這句話怎么理解呢？
女朋友讓你去做西紅柿雞蛋湯，你要么就去做，要么就不做，叫外賣，肯定沒有第三種選擇。

函數(shù)的返回值將被用作創(chuàng)建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 // 這個函數(shù)的返回值，返回的就是這個promise對象捕捉到的成功的值
}).then(res => {
    console.log(res) //這個地方打印的就是上一個promise對象return的值
})

所以打印順序應該是：

1111
2000
3000

剛才我們看到了then接受兩個參數(shù)，一個是成功的回調(diào)、一個是失敗的回調(diào)，看起來好像也不是那么優(yōu)雅，promise里除了then還提供了catch方法：

2、catch捕捉操作

這個catch就是專門捕捉錯誤的回調(diào)的，還是先看例子：

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject(2000) // 失敗以后這個reject會把失敗的結(jié)果捕捉到
    }, 1000)
    console.log(1111)
})
promise.catch(res => {
    console.log(res) // catch里面就能拿到捕捉到的失敗結(jié)果
})

打印結(jié)果：

1111
2000（一秒以后）

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

3、all

現(xiàn)在我們有這么一個需求，一共有三個接口A、B、C，必須三個接口都成功以后，才能發(fā)起第四個請求，怎么實現(xiàn)呢？

鏈式調(diào)用

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

一層套一層的，好像不是那么優(yōu)雅

all

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

接收一個Promise對象組成的數(shù)組作為參數(shù)，當這個數(shù)組所有的Promise對象狀態(tài)都變成resolved或者rejected的時候，它才會去調(diào)用then方法。非常完美，非常優(yōu)雅。

4、race

現(xiàn)在又有一個需求，同樣是接口A、B、C，只要有一個響應了，我就可以調(diào)接口D，那么怎么實現(xiàn)呢？

1、傳統(tǒng)方式

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

打印結(jié)果

小A開始執(zhí)行了
小B開始執(zhí)行了
小C開始執(zhí)行了
小A最快

這個方法得寫三遍，好像也不是那么優(yōu)雅，一起來看下race應該怎么寫？

2、race

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

打印結(jié)果

小A開始執(zhí)行了
小B開始執(zhí)行了
小C開始執(zhí)行了
小A最快

與Promise.all相似的是，Promise.race都是以一個Promise對象組成的數(shù)組作為參數(shù)，不同的是，只要當數(shù)組中的其中一個Promsie狀態(tài)變成resolved或者rejected時，就可以調(diào)用.then方法了。

promise是ES6用來解決異步的一個方法，現(xiàn)在用的已經(jīng)比較廣泛了，像我們經(jīng)常用的axios，他就是用promise封裝的，用起來非常方便。

上述就是小編為大家分享的promise、async、await是什么意思了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道。

分享文章：promise、async、await是什么意思-創(chuàng)新互聯(lián)
文章路徑：http://chinadenli.net/article6/dpssog.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、定制網(wǎng)站、微信公眾號、動態(tài)網(wǎng)站、軟件開發(fā)、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)