promise、async、await是什么意思-創(chuàng)新互聯(lián)

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

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

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

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

因?yàn)樯婕暗闹R(shí)點(diǎn)比較多，這篇文章主要是講一下，回調(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

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

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

// 這個(gè)異步請(qǐng)求就是通過回調(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)在看起來也很不錯(cuò)，但是如果文件上傳出錯(cuò)了，我們還要在回調(diào)里面做判斷，要是我們讀取完這個(gè)文件接著要讀取多個(gè)文件呢？是不是應(yīng)該這么寫：

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

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

二、promise

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

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

還是先上例子

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

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

打印結(jié)果：

1111
2000（一秒以后）

1、then鏈?zhǔn)讲僮?/p>

Promise對(duì)象的then方法返回一個(gè)新的Promise對(duì)象，因此可以通過鏈?zhǔn)秸{(diào)用then方法。

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

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

函數(shù)的返回值將被用作創(chuàng)建then返回的Promise對(duì)象。這句話應(yīng)該怎么理解呢？還是上例子：

let promise = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(2000)
    }, 1000)
    console.log(1111)
})
promise.then(res => {
    console.log(res) // 這個(gè)地方會(huì)打印捕捉到的2000
    return res + 1000 // 這個(gè)函數(shù)的返回值，返回的就是這個(gè)promise對(duì)象捕捉到的成功的值
}).then(res => {
    console.log(res) //這個(gè)地方打印的就是上一個(gè)promise對(duì)象return的值
})

所以打印順序應(yīng)該是：

1111
2000
3000

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

2、catch捕捉操作

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

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

打印結(jié)果：

1111
2000（一秒以后）

除了then和catch之外，promise還有兩個(gè)語法，all和race，我們也簡(jiǎn)單用一下：

3、all

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

鏈?zhǔ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í)行完了！')
})

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

4、race

現(xiàn)在又有一個(gè)需求，同樣是接口A、B、C，只要有一個(gè)響應(yīng)了，我就可以調(diào)接口D，那么怎么實(shí)現(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最快

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

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都是以一個(gè)Promise對(duì)象組成的數(shù)組作為參數(shù)，不同的是，只要當(dāng)數(shù)組中的其中一個(gè)Promsie狀態(tài)變成resolved或者rejected時(shí)，就可以調(diào)用.then方法了。

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

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

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

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

廣告

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

成都定制網(wǎng)站建設(shè)