淺析Promise

darkerXi 發(fā)布于2019-08-22 15:48 / 1759人閱讀

摘要：聲明，只是簡單地提了提的基本使用，大牛繞道先看一個例子你需要知道是個庫返回一個實例你可以把理解為，它們功能相近，只不過遵循規(guī)范我是第二個我是第二個為了防止你對這個鏈式調(diào)用看得眼花繚亂，我把這個給簡化一下成功回調(diào)失敗回調(diào)成功回調(diào)失敗回調(diào)，準備

聲明，只是簡單地提了提promise的基本使用，大牛繞道^_^

1.先看一個例子

你需要知道
1.axios是個庫
2.axios()返回一個Promise實例
3.你可以把axios()理解為$.ajax()，它們功能相近，只不過axios遵循promise規(guī)范

axios({
    url: "."
}).then((resolve) => {
    console.log(resolve)
    return "我是第二個then"
}, (reject) => {
    console.log(reject)
}).then((resolve_2) => {
    console.log(resolve_2) // "我是第二個then"
}, (reject_2) => { 
    console.log(reject_2)
})

為了防止你對這個鏈式調(diào)用看得眼花繚亂，我把這個給簡化一下

axios({
    url: "."
}).then(成功回調(diào), 失敗回調(diào))
  .then(成功回調(diào)2, 失敗回調(diào)2)

ok，準備好了嗎？下面我們先來了解Promise的一些基本概念

2.Promise的基本概念 2.1Promise的作用

Promise是專門用來解決異步編程問題的，避免了層層嵌套的回調(diào)函數(shù)[Callback Hell]
下面是一個用傳統(tǒng)方法Callback Hell來寫的異步代碼
可以非常明顯地看出來，Callback Hell的方式讓代碼的可讀性變得非常差

function loadImg(src, callback, fail) {
    let img = new Image()
    img.onload = function () {
        // 成功回調(diào)
        callback(img)
    }
    img.onerror = fail // 失敗回調(diào)
    img.src = src
}

let src = "https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
loadImg(src, function (img) {
    console.log(img.width)
}, function () {
    console.log("error")
})

2.2 Promise的三個狀態(tài)

pending初始態(tài)，既不成功也不失敗

fulfilled異步操作成功

rejected異步操作失敗

Promise對象代表一個異步操作，且只有異步操作的結(jié)果，可以決定當前是哪一種狀態(tài)，任何其他操作都無法改變這個狀態(tài)，peding可轉(zhuǎn)化為fulfilled與rejected，但fulfilled與rejected不可相互轉(zhuǎn)化

那知道這三個狀態(tài)又有什么用咧？
OK，我們看下面的代碼

axios({
    url: "."
}).then(成功回調(diào), 失敗回調(diào))

axios({url: "."})
異步操作成功代表了pending -> fulfilled -> then里的第一個參數(shù)【成功回調(diào)】
異步操作失敗代表了pending -> rejected -> then里的第二個參數(shù)【失敗回調(diào)】

3.then和catch的鏈式調(diào)用

因為 Promise.prototype.then 和 Promise.prototype.catch 方法返回promise 對象
所以它們可以被鏈式調(diào)用。

OK，下面讓我們仔細看一下回調(diào)觸發(fā)機制究竟怎樣的過程

axios({
    url: "."
}).then(成功回調(diào), 失敗回調(diào))
  .then(成功回調(diào)2, 失敗回調(diào)2)

是不是看的有點暈？沒關(guān)系，下面我來詳細解釋一下
1.異步操作成功 -> 進入第一個then的成功回調(diào) -> 成功回調(diào)執(zhí)行異步操作成功 -> 由于又返回了一個Promise實例，其狀態(tài)由于異步操作成功，由pending轉(zhuǎn)為了fullfiled，所以還可以再調(diào)用第二個then -> 進入第二個then的成功回調(diào)2
2.異步操作失敗-> 進入第一個then的失敗回調(diào) -> 失敗回調(diào)執(zhí)行異步操作成功 -> 由于又返回了一個Promise實例，其狀態(tài)由于異步操作成功，由pending轉(zhuǎn)為了fullfiled，所以還可以再調(diào)用第二個then -> 進入第二個then的成功回調(diào)2

你的問題：
1.為什么第一個then不論調(diào)用成功回調(diào)還是失敗回調(diào)，第二個then都會調(diào)用成功回調(diào)2呢
答：因為第二個then調(diào)用進入哪個回調(diào)函數(shù)，完全是看第一個then返回的Promise是什么狀態(tài)，換言之 —— 看異步操作成功與否

舉一個栗子

axios({
    url: "."
}).then((resolve) => {
    return xxx 
    // 注意xxx是個未聲明的變量
    // 瀏覽器會報錯，說明異步操作失敗了
    // 所以第一個then返回的Promise的狀態(tài)是 rejected
}, (reject) => {})
    .then((resolve_2) => {
    console.log(1)
}, (reject_2) => {
    // 所以第二個then只會調(diào)用它的第二個參數(shù)
    console.log(2)
})

2.你咋不提catch咧？
因為catch就是then的一個語法糖呀
catch等價于then只有第二個參數(shù)【失敗回調(diào)】的形式
上面的例子用catch，可以這么寫

axios({
    url: "."
}).then((fulfilled) => {
    return xxx
    // 注意xxx是個未聲明的變量
    // 所以第一個then返回的Promise的狀態(tài)是 rejected
}, (rejected) => {
}).catch((rejected) => {
    // 所以直接進入catch
    console.log(2)
})

4.自己寫一個Promise

第一步

// 聲明一個函數(shù) 讓這個函數(shù)返回一個Promise實例
let setPromise = function () {
    return new Promise()
}

第二步

// new Promise()接受一個函數(shù)
// 規(guī)定這個函數(shù)必須要有兩個參數(shù)【成功回調(diào)，失敗回調(diào)】
let a = 0
let setPromise = function () {
    let fn = (x, y) => {
        setTimeout(() => {
            x("success") 
            // 一定要寫上異步操作成功后，會調(diào)用的回調(diào)函數(shù)
        }, 2000)
    }
    return new Promise(fn)
    // 在new的過程中一定有一句fn.call(undefined, fulfilled, rejected)
}

第三步

// 寫的更裝逼點，順別把x，y換個名字【其實是規(guī)定】
let setPromise = function () {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("success")
        }, 2000)
    }) // 在new的過程中一定有一句fn.call(undefined, fulfilled, rejected)
}

第四步

// 你要做什么，就用then輸入到這個Promise實例里面去
let promiseInstance = setPromise()
promiseInstance.then((success) => {
    console.log(success) // "success"
}, () => { 
    console.log("失敗啦")
})

總結(jié)

let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的異步代碼
        setTimeout(() => {
            resolve("success") // 給成功回調(diào)resolve傳遞一個參數(shù) "success"
            console.log("測試一下") // 兩秒之后被執(zhí)行
        }, 2000)
    })
}
// 你要做什么，就用then輸入到這個Promise實例里面去
let promiseInstance = setPromise()
promiseInstance.then((resolve) => {
    // 異步操作執(zhí)行成功后執(zhí)行
    console.log(resolve) // "success"
    console.log("完美運行") // "完美運行"
}, () => {
    console.log("失敗啦")
})

5.最后

其實對于Promise和then有一個更具象化的理解
Promise的中文翻譯是承諾，then的中文翻譯是然后
所以，你可以想象你去買橘子，結(jié)果店里沒有進貨，店員對你Promise，只要他店里到貨，then他就會通知你