es6基礎0x023：Promise

Snailclimb 發(fā)布于2019-08-26 13:24 / 2439人閱讀

摘要：同時接受一個變量，稱之為栗子當調用之后，執(zhí)行了，此時的變成了，同時，回調接受一個，作為操作失敗的原因說明語法回調栗子注意在異中的錯誤不會執(zhí)行注意之后會被忽略不會輸出語法回調栗子

0x000 概述

Promise是一個異步編程的解決方案，他經(jīng)常和ajax一起出現(xiàn)，導致很多人以為Promise是一種新的網(wǎng)絡請求技術，其實不然。Promise是一種思考方式、編程方式。

0x000 栗子

先寫一個栗子

setTimeout(()=>{
    console.log("here")
},3000)

很簡單，3s之后將會打印出here，現(xiàn)在換成Promise：

new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
}).then(()=>{
    console.log("here")
})

執(zhí)行結果也是一樣，3s之后將會輸出here，還可以這么寫

let proxy=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
})

setTimeout(()=>{
    proxy.then(()=>{
        console.log("here")
    })
}, 10000)

13s后才輸出here

0x002 初始化

語法

new Promise(executor)

參數(shù)：

executor：處理器函數(shù)，函數(shù)的完整簽名是(resolve, reject)=>{}

返回值：一個Promise實例

栗子

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
})
console.log(promise) // Promise?{}

說明：
使用new Promise實例化一個Promise之后，將它輸出出來，可以看到他有一個pending，這是說明這個promise的狀態(tài)，稱為PromiseStatus，promise一共有3種狀態(tài)，一個promise必定處于下面三個狀態(tài)之一：

pending：初始狀態(tài)

fulfilled：操作成功

rejected：操作失敗

0x003 then

語法：

promise.then(onFulfilled, onRejected)

onFulfilled：操作成功的回調

onRejected：操作失敗的回調

栗子1：

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
})
console.log(promise) // Promise?{}
promise.then(()=>{
    console.log(promise) // Promise?{: undefined}
})

說明1：
當調用resolve之后，then函數(shù)執(zhí)行了，同時promise的PromiseStatus變成了resolved。onFulfilled同時接受一個變量，稱之為PromiseValue：

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve(1)
    }, 3000)
})
promise.then((value)=>{
    console.log(value) // 1
})

栗子2:

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        reject()
    }, 3000)
})
console.log(promise) // Promise?{}
promise.then(()=>{},()=>{
    console.log(promise) // Promise?{: undefined}
})

當調用reject之后，then執(zhí)行了，此時promise的PromiseStatus變成了rejected，同時，onRejected回調接受一個reason，作為操作失敗的原因說明：

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        reject("nothing")
    }, 3000)
})
promise.then(()=>{},(reason)=>{
    console.log(reason) // nothing
})

0x004 catch

語法：

promise.catch(onRejected)

onRejected：回調

栗子：

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
}).then(()=>{
    throw "error"
}).catch((e)=>{
    console.log(`i catch you: ${e}`) // i catch you error 
})

注意1：在異中的錯誤不會執(zhí)行catch

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        throw "error"
    }, 3000)
}).catch((e)=>{
    console.log(`i catch you: ${e}`) // Uncaught error 
})

注意2：resolve之后會被忽略

 let promise=new Promise((resolve, reject)=>{
    resolve()
    throw "error"
}).catch((e)=>{
    console.log(`i catch you: ${e}`)  // 不會輸出
})

0x005 finally

語法：

p.finally(onFinally)

onFainally：回調

栗子：

let promise=new Promise((resolve, reject)=>{
    setTimeout(()=>{
        resolve()
    }, 3000)
}).then(()=>{
    console.log("resolve")
    throw "error"
}).catch((e)=>{
    console.log(`i catch you: ${e}`)
}).finally(()=>{
    console.log("finally")
})
// resolve
// i catch you error
// finally

云服務器 GPU云服務器 es6中的promise promise Promise使用 promise用法

文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108768.html

ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經(jīng)有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發(fā)過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
【前端】ES6入門基礎知識

摘要：關于的入門了解新增模板字符串為提供了簡單的字符串插值功能箭頭函數(shù)操作符左邊為輸入的參數(shù)，而右邊則是進行的操作以及返回的值。將對象納入規(guī)范，提供了原生的對象。增加了和命令，用來聲明變量。關于ES6的入門了解新增模板字符串（為JavaScript提供了簡單的字符串插值功能）、箭頭函數(shù)（操作符左邊為輸入的參數(shù)，而右邊則是進行的操作以及返回的值Inputs=>outputs。）、for-o...

philadelphia 2019-08-21 17:21 評論0 收藏0
JavaScript 異步

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。寫一個符合規(guī)范并可配合使用的寫一個符合規(guī)范并可配合使用的理解的工作原理采用回調函數(shù)來處理異步編程。 JavaScript怎么使用循環(huán)代替(異步)遞歸問題描述在開發(fā)過程中，遇到一個需求：在系統(tǒng)初始化時通過http獲取一個第三方服務器端的列表，第三方服務器提供了一個接口，可通過...

tuniutech 2019-08-21 18:34 評論0 收藏0
ES6的基礎知識(三)

摘要：會觸發(fā)方法第一個回調會觸發(fā)方法第二個回調或方法成功操作失敗操作會終止的執(zhí)行需要方法觸發(fā)向下執(zhí)行執(zhí)行結果實現(xiàn)的參數(shù)是一個函數(shù)有和兩個參數(shù)回調函數(shù)中會指向需要保存才會指向實例對象三種狀態(tài)分別為狀態(tài)只能從變成或者成功回調方法集合失敗回調方法集合觸 promise // resolve()會觸發(fā)then方法第一個回調, reject()會觸發(fā)then方法第二個回調或catch方法 let p ...

lieeps 2019-08-23 16:14 評論0 收藏0
JS筆記

摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。異步編程入門的全稱是前端經(jīng)典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個方面。 TypeScript 入門教程從 JavaScript 程序員的角度總結思考，循序漸進的理解 TypeScript。網(wǎng)絡基礎知識之 HTTP 協(xié)議詳細介紹 HTT...

rottengeek 2019-08-22 13:58 評論0 收藏0