欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

ES6中Promise、async、await用法超詳細講解指南

 更新時間：2024年08月09日 10:29:16   作者：碼嘍的自我修養(yǎng)  
async+await是ES6中引入的異步編程解決方案,旨在解決異步編程中的回調(diào)地獄問題,下面這篇文章主要給大家介紹了關(guān)于ES6中Promise、async、await用法超詳細講解的相關(guān)資料,需要的朋友可以參考下

Promise

promise狀態(tài)

Promise總是處于以下三種狀態(tài)之一：

  • pending：初始狀態(tài)
  • fulfilled/resolved：表示成功
  • rejected：表示失敗

狀態(tài)有一些特性：

  • 只能通過執(zhí)行函數(shù)修改
  • 外部無法讀取
  • 外部無法修改

Promise.prototype.then

為Promise實例添加處理程序的主要方法，接收的兩個參數(shù)分別表示進入fulfilled/resolved或rejected狀態(tài)時被調(diào)用，且二者互斥。兩個參數(shù)可選，但必須是函數(shù)類型，非函數(shù)類型會被忽略。一個Promise實例可以有任意多個處理程序（任意多個then調(diào)用）

Promise.prototype.catch

等價于Promise.prototype.then(null,onRejected)

Promise.prototype.finally

無論狀態(tài)是fulfilled/resolved還是rejected都會執(zhí)行，但無法得知具體的狀態(tài)（狀態(tài)無關(guān)），一般主要用于清理工作

執(zhí)行次序

示例1

const p = new Promise(resolve => {
    console.log('1. excute promise');
    setTimeout(() => {
        console.log('3. before resolve')
        resolve();
        console.log('4. after resolve')
    }, 100);
})

p.then(() => {
    console.log('5. execute resolve')
}).then(()=>{
    console.log('6. then2')
}).then(()=>{
    console.log('7. then3')
}).finally(()=>{
    console.log('8. finally')
});
console.log('2. sync then')

/**
result:
1. excute promise
2. sync then
3. before resolve
4. after resolve
5. execute resolve
6. then2
7. then3
8. finally
*/

示例2

const p = new Promise(resolve => {
    setTimeout(() => {
        resolve();
    }, 100);
})

p.then(()=>{
    console.log('then1')
}).then(()=>{
    console.log('then2')
}).then(()=>{
    console.log('then3')
}).then(()=>{
    console.log('then4')
}).then(()=>{
    console.log('then5')
});
console.log('async then')

/**
result:
async then
then1
then2
then3
then4
then5
*/

這個示例中then1、then2、then3、then4、then5相當于是同步執(zhí)行的

鏈式調(diào)用

then的鏈式調(diào)用是Promise最常見的用法，具體方式是每個執(zhí)行器返回一個Promise實例，則后續(xù)每個then都會等待前一個落定后再執(zhí)行，即異步的串行化。以此來解決異步的回調(diào)地獄難題。

es6規(guī)范不支持Promise終止與進度查詢，原因是這樣會使得Promise變得過于復雜。

鏈式傳值

const p = new Promise(resolve => {
    setTimeout(() => {
        resolve(100);
    }, 100);
})

p.then(value => {
    console.log(value)
    return value + 1;
}).then(value => {
    console.log(value)
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(value + 1)
        }, 3000);
    });
}).then(value => {
    console.log(value)
    return value + 1;
}).then(value => {
    console.log(value)
    return value + 1;
}).then(value => {
    console.log(value)
    return value + 1;
});

/**
100
101
102 等待3秒
103
104
*/

如果執(zhí)行函數(shù)返回的是一個Promise對象，則后續(xù)的調(diào)用會等待該對象落定后觸發(fā)，通過resolve方式傳值；如果不是，則后續(xù)立即觸發(fā)，通過return語句向后傳值

catch對調(diào)用鏈的影響

catch處在最后

const p = new Promise(resolve => {
    setTimeout(() => {
        resolve(100);
    }, 100);
})

p.then(value => {
    console.log(value)
    return value + 1;
}).then(value => {
    console.log(value)
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('fail')
        }, 3000);
    });
}).then(value => {
    console.log(value)
    return value + 1;
}).then(value => {
    console.log(value)
    return value + 1;
}).then(value => {
    console.log(value)
    return value + 1;
}).catch(err => {
    console.log('catch', err);
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(400)
        }, 3000);
    });
});
/**
100
101
catch fail
*/

當catch處在調(diào)用鏈最后的時候，則reject后續(xù)的then將不會被觸發(fā)

catch處在中間

const p = new Promise(resolve => {
    setTimeout(() => {
        resolve(100);
    }, 100);
})

p.then(value => {
    console.log(value)
    return value + 1;
}).then(value => {
    console.log(value)
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('fail')
        }, 3000);
    });
}).then(value => {
    console.log(value)
    return value + 1;
}).catch(err => {
    console.log('catch', err);
    return 500;
}).then(value => {
    console.log(value)
    return value + 1;
}).then(value => {
    console.log(value)
    return value + 1;
});
/**
100
101
catch fail
*/

catch處在調(diào)用鏈中間，如果返回的不是一個Promise對象，后續(xù)的then將不會被觸發(fā)

async & await

async

語法：

async function name([param[, param[, ... param]]]) {
   statements
}
  • name：函數(shù)名稱
  • param：要傳遞給函數(shù)的參數(shù)的名稱
  • statements：包含函數(shù)主體的表達式，可以使用await機制
  • 返回值：一個Promise，這個Promise要么會通過一個由async函數(shù)返回的值被解決，要么會通過一個從async函數(shù)中拋出的（或其中沒有被捕獲到的）異常被拒絕

async關(guān)鍵字用于聲明異步函數(shù)，可以用在函數(shù)聲明、函數(shù)表達式、箭頭函數(shù)、方法上：

async function foo() {}
let bar = async function () {}
let baz = async () => {}
class Person{
    async say(){}
}

異步函數(shù)如果使用return關(guān)鍵字返回了值，則這個值會被Promise.resolve()包裝成一個Promise對象：

async function test() {
    return 2;
}
test().then(value => {
    console.log(value)
})
console.log(1)

/**
1
2
*/

如果函數(shù)體中拋出了異常，可以用catch處理：

async function test() {
    const result = 100 / a;
    return result;
}
test().catch(value => {
    console.log(value)
})
console.log(1)
/**
1
ReferenceError: a is not defined
*/

一些資料中會說拒絕Promise的異常不被異步函數(shù)捕獲，但在最新版的Chrome（95.0.4638.69）、Microsoft Edge（95.0.1020.40）、Firefox（93.0）都是支持的：

async function test() {
    return Promise.reject('error');
}
test().catch(value => {
    console.log(value)
})
console.log(1)
/**
1
error
*/

await

語法：

[返回值] = await 表達式;

  • 表達式：一個Promise對象或者任何要等待的值
  • 返回值：返回Promise對象的處理結(jié)果。如果等待的不是Promise對象，則返回該值本身

在用法上，await可以單獨使用，也可以在表達式中使用：

async function func(){
    console.log(await Promise.resolve('foo'))
}
func();
/**
foo
*/

await只能在async函數(shù)內(nèi)頂層使用，不支持嵌套

 在使用多個await關(guān)注其結(jié)果，忽視其順序有時候是個好事，因為不同的規(guī)范對于await處理Promise是有差異的。

總結(jié) 

到此這篇關(guān)于ES6中Promise、async、await用法超詳細講解指南的文章就介紹到這了,更多相關(guān)ES6 Promise、async、await內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

  • JS數(shù)組Object.keys()方法的使用示例

    JS數(shù)組Object.keys()方法的使用示例

    這篇文章主要介紹了JS數(shù)組Object.keys()方法的使用,結(jié)合實例形式分析了javascript使用Object.keys()方法進行數(shù)組遍歷、讀取相關(guān)操作技巧,需要的朋友可以參考下
    2019-06-06
  • JavaScript 中定義函數(shù)用 var foo = function () {} 和 function foo()區(qū)別介紹

    JavaScript 中定義函數(shù)用 var foo = function () {} 和 function foo()區(qū)

    這篇文章主要介紹了JavaScript 中定義函數(shù)用 var foo = function () {} 和 function foo()區(qū)別介紹,需要的朋友可以參考下
    2018-03-03
  • JavaScript 大數(shù)據(jù)相加的問題

    JavaScript 大數(shù)據(jù)相加的問題

    寫一個函數(shù)處理大數(shù)據(jù)的相加問題，所謂的大數(shù)據(jù)是指超出了整型，長整型之類的常規(guī)數(shù)據(jù)類型表示范圍的數(shù)據(jù)。實現(xiàn)語言不限。
    2011-08-08
  • javascript面向?qū)ο髣?chuàng)建對象的方式小結(jié)

    javascript面向?qū)ο髣?chuàng)建對象的方式小結(jié)

    這篇文章主要介紹了javascript面向?qū)ο髣?chuàng)建對象的方式,結(jié)合實例形式總結(jié)分析了javascript常見的7種創(chuàng)建對象的方式,需要的朋友可以參考下
    2019-07-07
  • JavaScript中Dom操作實例詳解

    JavaScript中Dom操作實例詳解

    這篇文章主要介紹了JavaScript中Dom操作,結(jié)合實例形式詳細分析了javascript針對dom元素節(jié)點增刪改查相關(guān)操作技巧與注意事項,需要的朋友可以參考下
    2019-07-07
  • 詳解如何使用微信小程序云函數(shù)發(fā)送短信驗證碼

    詳解如何使用微信小程序云函數(shù)發(fā)送短信驗證碼

    這篇文章主要介紹了詳解如何使用微信小程序云函數(shù)發(fā)送短信驗證碼，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2019-03-03
  • JS實現(xiàn)title標題欄文字不間斷滾動顯示效果

    JS實現(xiàn)title標題欄文字不間斷滾動顯示效果

    這篇文章主要介紹了JS實現(xiàn)title標題欄文字不間斷滾動顯示效果,通過javascript時間函數(shù)定時操作動態(tài)修改頁面元素實現(xiàn)滾動效果,需要的朋友可以參考下
    2016-09-09
  • 純js+css實現(xiàn)在線時鐘

    純js+css實現(xiàn)在線時鐘

    這篇文章主要為大家詳細介紹了純js+css實現(xiàn)在線時鐘，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2020-08-08
  • Bootstrap表格使用方法詳解

    Bootstrap表格使用方法詳解

    這篇文章主要為大家詳細介紹了Bootstrap表格使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-02-02
  • Angular中針對路由Routing原理刨析

    Angular中針對路由Routing原理刨析

    在Angular中，最好在一個頂級模塊中加載和配置路由，它專注于路由功能，然后由根模塊AppModule導入它，最后還有初始化并監(jiān)聽瀏覽器的地址變化
    2023-01-01

最新評論