資訊專欄INFORMATION COLUMN
摘要：有三種狀態(tài)，等待中，已完成，已失敗。對象狀態(tài)不受外界影響，只有異步操作的結(jié)果可以改變狀態(tài)，這就是的由來怎么用接受一個函數(shù)作為參數(shù)，這個參數(shù)函數(shù)的兩個參數(shù)分別是和，用來執(zhí)行了兩種狀態(tài)的回調(diào)函數(shù)。當實例生成后，用方法來指定兩種狀態(tài)的回調(diào)函數(shù)。
什么是Promise
官方的解釋：Promise是一個用來傳遞異步操作消息的對象。
Promise有三種狀態(tài)，pending（等待中），resolved（已完成），rejected（已失?。?。對象狀態(tài)不受外界影響，只有異步操作的結(jié)果可以改變狀態(tài)，這就是“promise“的由來
Promise接受一個函數(shù)作為參數(shù)，這個參數(shù)函數(shù)的兩個參數(shù)分別是resolved和rejected，用來執(zhí)行了兩種狀態(tài)的回調(diào)函數(shù)。
當Promise實例生成后，用then方法來指定兩種狀態(tài)的回調(diào)函數(shù)。舉一個簡單例子
//axios是一個基于Promise的http請求，可以直接調(diào)用then
this.axios.get(url).then((res)=>{
//請求成功 resolved的回調(diào)
},(err)=>{
//請求失敗 rejected的回調(diào)
}）
}）
將多個Promise封裝成一個
假如你需要等待多個Promise請求resoved后在執(zhí)行，可以調(diào)用Promise.all()
這個api接受一個promise實例數(shù)組做參數(shù)。
//1.定義三種狀態(tài)
const PENDING = "pending"
const RESOLVED = "resolved"
const REJECTED = "rejected"
function MyPromisr(fn){
//重命名this，防止接下來找不到正確的this
const that = this
that.state = PENDING //初始狀態(tài)為等待
that.value = null //value用于保存resolved或rejoiced傳入的值
that.resolvedCallbacks = [] //成功請求后的回調(diào)數(shù)組
//定義完成的回調(diào)函數(shù)
function resolved(value) {
// 只有在等待狀態(tài)才可以改變狀態(tài)
if (that.state === PENDING) {
that.state = RESOLVED
that.value = value
that.resolvedCallbacks.map(cb => cb(that.value))
}
}
//定義拒絕的回調(diào)函數(shù)
function rejected(value) {
// 只有在等待狀態(tài)才可以改變狀態(tài)
if (that.state === PENDING) {
that.state = REJECTED
that.value = value
that.rejectedCallbacks.map(cb => cb(that.value))
}
}
// 定義了兩種狀態(tài)的回調(diào)函數(shù)后,執(zhí)行mypromise傳參的函數(shù)
try {
fn(resolved,rejected)
} catch (e) {
rejected(e)
}
}
// 定義then
MyPromise.prototype.then = function(onFulfilled,onRejected){
const that = this
onFulfilled = typeof onFulfilled === "function" ? onFulfilled :v => v
onRejected =
typeof onRejected === "function"
? onRejected
: r => {
throw r
}
if (that.state === PENDING) {
that.resolvedCallbacks.push(onFulfilled)
that.rejectedCallbacks.push(onRejected)
}
if (that.state === RESOLVED) {
onFulfilled(that.value)
}
// console.log(that.state,"has change")
if (that.state === REJECTED) {
onRejected(that.value)
}
}
//調(diào)用
new MyPromise((resolved,rejected) => {
setTimeout(()=>{
resolved(1)
rejected(2)
},0)
}).then(value=>{
console.log(value)
},value=>{
console.log(value)
})
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/105210.html
摘要：如果狀態(tài)是等待態(tài)的話，就往回調(diào)函數(shù)中函數(shù)，比如如下代碼就會進入等待態(tài)的邏輯以上就是簡單版實現(xiàn)實現(xiàn)一個符合規(guī)范的接下來大部分代碼都是根據(jù)規(guī)范去實現(xiàn)的。 為更好的理解， 推薦閱讀Promise/A+ 規(guī)范 實現(xiàn)一個簡易版 Promise 在完成符合 Promise/A+ 規(guī)范的代碼之前，我們可以先來實現(xiàn)一個簡易版 Promise，因為在面試中，如果你能實現(xiàn)出一個簡易版的 Promise ...
JavaScript筆試部分 點擊關(guān)注本公眾號獲取文檔最新更新,并可以領(lǐng)取配套于本指南的 《前端面試手冊》 以及最標準的簡歷模板. 實現(xiàn)防抖函數(shù)（debounce） 防抖函數(shù)原理：在事件被觸發(fā)n秒后再執(zhí)行回調(diào)，如果在這n秒內(nèi)又被觸發(fā)，則重新計時。 那么與節(jié)流函數(shù)的區(qū)別直接看這個動畫實現(xiàn)即可。 showImg(https://segmentfault.com/img/remote/146000002...
前言 作為一個后端過來的同學,剛?cè)腴T前端的時候,被js種種「反人類」的概念折騰的死去活來的.其中一個印象比較深刻的,就是promise,感覺實在太難理解了...所有就有了寫個簡單的promise的想法.希望能幫助到一些跟我一樣,感覺promise很難理解的新同學. promise的教程網(wǎng)上多如牛毛,其中寫的比較通俗易懂的莫過于阮一峰的es6,反正我是他的書才懂的.所以今天,我們也不會來復述一遍如何...
摘要：第一種直接調(diào)用避免在不必要的情況下使用，是一個危險的函數(shù)，他執(zhí)行的代碼擁有著執(zhí)行者的權(quán)利。來自于此外，實現(xiàn)需要考慮實例化后對原型鏈的影響。函數(shù)柯里化的主要作用和特點就是參數(shù)復用提前返回和延遲執(zhí)行。手寫路徑導航 實現(xiàn)一個new操作符 實現(xiàn)一個JSON.stringify 實現(xiàn)一個JSON.parse 實現(xiàn)一個call或 apply 實現(xiàn)一個Function.bind 實現(xiàn)一個繼承 實現(xiàn)一個J...
摘要：在和中都保留了數(shù)組的強引用，所以在中簡單的清除變量內(nèi)存并沒有得到釋放，因為還存在引用計數(shù)。而在中，它的鍵是弱引用，不計入引用計數(shù)中，所以當被清除之后，數(shù)組會因為引用計數(shù)為而被回收掉。其實我們主要注意的引用是不計引用計數(shù)的，就好理解了。 showImg(https://segmentfault.com/img/remote/1460000019147368?w=900&h=383); 前...
閱讀 985·2019-08-30 15:55
閱讀 1468·2019-08-30 13:55
閱讀 2061·2019-08-29 17:13
閱讀 2894·2019-08-29 15:42
閱讀 1394·2019-08-26 14:04
閱讀 1085·2019-08-26 13:31
閱讀 3336·2019-08-26 11:34
閱讀 904·2019-08-23 18:25
