Promise之深入淺出

littleGrow 發(fā)布于2019-08-23 12:14 / 1780人閱讀

摘要：不兼容問題，本文不予以處理，出門左轉(zhuǎn)，找谷哥。如果中的回調(diào)函數(shù)拋出一個(gè)錯(cuò)誤，那么返回的將會(huì)成為拒絕狀態(tài)，并且將拋出的錯(cuò)誤作為拒絕狀態(tài)的回調(diào)函數(shù)的參數(shù)值。

Promise與async

主要內(nèi)容：

promise基本實(shí)現(xiàn)原理
promise 使用中難點(diǎn)（鏈?zhǔn)秸{(diào)用，API基本上返回都是一個(gè)新Promise，及參數(shù)傳遞）
promise 對(duì)異常處理

參考：
?    30分鐘，讓你徹底明白Promise原理 
?    阮一峰ES6入門 
?    JavaScript Promise：簡介

0. 基本用法

基本的promise使用

1. 兼容性

查看caniuse

查兼容性基本上主流瀏覽器支持沒有問題。

IE不兼容問題，本文不予以處理，出門左轉(zhuǎn)，找谷哥。具體查看 babel，或者自己實(shí)現(xiàn)一個(gè)Promise

2. ajax XMLHttpRequest封裝

//get 請(qǐng)求封裝
function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open("GET", url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

1. Promse API

Promise API 分為 :MDN

靜態(tài)方法

prototype上方法

Promise.prototype.then() 來分析

首先來看看 Promise.prototype.then()返回一個(gè)Promise,但Promise內(nèi)部有返回值，且返回值，可以是個(gè)值，也可能就是一個(gè)新Promise

   *具體規(guī)則如下：*

- *如果then中的回調(diào)函數(shù)返回一個(gè)值，那么then返回的Promise將會(huì)成為接受狀態(tài)，并且將返回的值作為接受狀態(tài)的回調(diào)函數(shù)的參數(shù)值。*
- *如果then中的回調(diào)函數(shù)拋出一個(gè)錯(cuò)誤，那么then返回的Promise將會(huì)成為拒絕狀態(tài)，并且將拋出的錯(cuò)誤作為拒絕狀態(tài)的回調(diào)函數(shù)的參數(shù)值。*
- *如果then中的回調(diào)函數(shù)返回一個(gè)已經(jīng)是接受狀態(tài)的Promise，那么then返回的Promise也會(huì)成為接受狀態(tài)，并且將那個(gè)Promise的接受狀態(tài)的回調(diào)函數(shù)的參數(shù)值作為該被返回的Promise的接受狀態(tài)回調(diào)函數(shù)的參數(shù)值。*
- *如果then中的回調(diào)函數(shù)返回一個(gè)已經(jīng)是拒絕狀態(tài)的Promise，那么then返回的Promise也會(huì)成為拒絕狀態(tài)，并且將那個(gè)Promise的拒絕狀態(tài)的回調(diào)函數(shù)的參數(shù)值作為該被返回的Promise的拒絕狀態(tài)回調(diào)函數(shù)的參數(shù)值。*
- *如果then中的回調(diào)函數(shù)返回一個(gè)未定狀態(tài)（pending）的Promise，那么then返回Promise的狀態(tài)也是未定的，并且它的終態(tài)與那個(gè)Promise的終態(tài)相同；同時(shí)，它變?yōu)榻K態(tài)時(shí)調(diào)用的回調(diào)函數(shù)參數(shù)與那個(gè)Promise變?yōu)榻K態(tài)時(shí)的回調(diào)函數(shù)的參數(shù)是相同的。*

上面是官方規(guī)則，神馬，具體白話就是核心是返回參數(shù)及返回promise的狀態(tài)

參考：MDN

是不是 覺得很暈，沒關(guān)系，可以先看 下一節(jié)，看完后，再回過來看具體的說明

2. Prmise 鏈?zhǔn)秸{(diào)用

鏈?zhǔn)秸{(diào)用
 1.  核心就是 then catch 等方法返回一個(gè)Promise
2.  鏈?zhǔn)?調(diào)用數(shù)據(jù)傳遞（注意）

1. 值傳遞問題

簡單例子

//正常狀態(tài)
const promise1 = new Promise((resolve, reject) => {
    resolve("0000")//
})
promise1.then(result => {
    console.log(result) //0000
       return "1111";//類似于 return Promise.resolve("1111"); 參數(shù)是data，promise 狀態(tài)時(shí) resolve
}).then(data => {
    console.log(data) // 1111
})

一個(gè)實(shí)際的例子:（拿來大神的例子JavaScript Promise：簡介）

get("story.json").then(function(response) {
  console.log("Success!", response);
})

//這里的 response 是 JSON，但是我們當(dāng)前收到的是其純文本。也可以設(shè)置XMLHttpRequest.responseType =json
get("story.json").then(function(response) {
  return JSON.parse(response);
}).then(function(response) {
  console.log("Yey JSON!", response);
})

//由于 JSON.parse() 采用單一參數(shù)并返回改變的值，因此我們可以將其簡化為：
get("story.json").then(JSON.parse).then(function(response) {
  console.log("Yey JSON!", response);
})

function getJSON(url) {
  return get(url).then(JSON.parse);
}
//getJSON() 仍返回一個(gè) promise，該 promise 獲取 URL 后將 response 解析為 JSON。

2. 異步操作隊(duì)列

上面至今是return 值 ，直接調(diào)用下一下then就OK了。

但如果return Promise,則？

Promise.resolve(111).then(function(d){
    console.log(d);
    return Promise.resolve(d+111);//返回promise
}).then(function(d2){
    console.log(d2);
})
// 111,222

3. 基本實(shí)現(xiàn)原理

主要是如何自己實(shí)現(xiàn)一個(gè)簡單的Promise

//極簡實(shí)現(xiàn)
function Promise(fn) {
    var value = null,
        callbacks = [];  //callbacks為數(shù)組，因?yàn)榭赡芡瑫r(shí)有很多個(gè)回調(diào)

    this.then = function (onFulfilled) {
        callbacks.push(onFulfilled);
    };

    function resolve(value) {
        callbacks.forEach(function (callback) {
            callback(value);
        });
    }

    fn(resolve);
}

4. finnaly 實(shí)現(xiàn)

Promise.prototype.finally = function (callback) {
  let P = this.constructor;
  return this.then(
    value  => P.resolve(callback()).then(() => value),
    reason => P.resolve(callback()).then(() => { throw reason })
  );
};

5. 異常處理

異常分類：

同步異常

異步異常無法try-catch 得到

多層Promise嵌套，獲異常取具體的一個(gè)promise異常，而不是全部

1. Promise 異常處理基本套路

基本處理異常中，有兩種方案then(undefined, func) 與catch()

但then(undefined, func) 與catch()不同，具體參見代碼方案3

//方案1 使用 Promise.prototype.catch()來catch
const promise1 = new Promise((resolve, reject) => {
    reject("no")// 
})
promise1.then(result => {
    console.log(result) // 永遠(yuǎn)不會(huì)執(zhí)行
}).catch(error => {
    console.log(error) // no
})

//方案2 使用 Promise.prototype.then()中第二個(gè)參數(shù) 來處理
const promise1 = new Promise((resolve, reject) => {
    reject("no")// 
})
promise1.then(result => {
    console.log(result) // 永遠(yuǎn)不會(huì)執(zhí)行
}，error => {
    console.log(error) // no
})

//方案2  （方案1  方案2 對(duì)比）
var promise2 = new Promise((resolve, reject) => {
    resolve("yes")// 
})
promise2.then(result => {
    throw new Error("then");
    console.log(result) 
},error => {
    console.log("1111",error) // no
}).catch(error=>{
   console.log("2222",error)// 最終 err在此處被捕獲，而不是 then 中
})

2. 異常不同分類

Promise可能遇到的異常種類

//1.異常 reject()
const promise1 = new Promise((resolve, reject) => {
    reject("no")// 
})
promise1.then(result => {
    console.log(result) // 永遠(yuǎn)不會(huì)執(zhí)行
}).catch(error => {
    console.log(error) // no
})

//2.異常 顯示throw
const promise1 = new Promise((resolve, reject) => {
    throw Error("no")
})
promise1.then(result => {
    console.log(result) // 永遠(yuǎn)不會(huì)執(zhí)行
}).catch(error => {
    console.log(error) // 
})

//3.執(zhí)行異常
const promise1 = new Promise((resolve, reject) => {
    aaaa;
})
promise1.then(result => {
    console.log(result) // 永遠(yuǎn)不會(huì)執(zhí)行
}).catch(error => {
    console.log(error) // 
})

3. 異常鏈?zhǔn)秸{(diào)用

asyncThing1().then(function() {
  return asyncThing2();
}).then(function() {
  return asyncThing3();
}).catch(function(err) {
  return asyncRecovery1();
}).then(function() {
  return asyncThing4();
}, function(err) {
  return asyncRecovery2();
}).catch(function(err) {
  console.log("Don"t worry about it");
}).then(function() {
  console.log("All done!");
})

上述代碼的流程圖形式:

流程圖形式

// promise鏈?zhǔn)秸{(diào)用，catch住異常后，后面就不會(huì)處理異常了
Promise.reject().then(()=>{
  console.log(2222);
},(err)=>{
    console.log(333,err)
    return err})
.catch((err)=>{
  console.log(1111,err);
})
//333 undefined  ，沒有打印 1111

//如果 在鏈?zhǔn)秸{(diào)用中，then 第二個(gè)參數(shù) catch住了異常，沒有return Promise.reject()則后續(xù)鏈?zhǔn)秸{(diào)用返回rosolve狀態(tài)pormise
Promise.reject()
   .then(()=>{
      console.log(111);
    },(err)=>{
        console.log(111,err) //reject 
        return err；
    }).then((data)=>{
        console.log(222,data)；//resolve 執(zhí)行
    },(err)=>{
      console.log(222,err); //未執(zhí)行
    })
//4444 沒有執(zhí)行 1111

4. 異常丟失

很多情況下，promise無法捕獲異常

場(chǎng)景1 macrotask 隊(duì)列中拋出異常：

//場(chǎng)景1
//永遠(yuǎn)不要在 macrotask 隊(duì)列中拋出異常，因?yàn)?macrotask 隊(duì)列脫離了運(yùn)行上下文環(huán)境，異常無法被當(dāng)前作用域捕獲。
function fetch(callback) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
             throw Error("用戶不存在")
        })
    })
}

fetch().then(result => {
    console.log("請(qǐng)求處理", result) // 永遠(yuǎn)不會(huì)執(zhí)行
}).catch(error => {
    console.log("請(qǐng)求處理異常", error) // 永遠(yuǎn)不會(huì)執(zhí)行
})

// 程序崩潰
// Uncaught Error: 用戶不存在

/*
    參考
    作者：黃子毅
    鏈接：https://www.jianshu.com/p/78dfb38ac3d7
    來源：簡書
    簡書著作權(quán)歸作者所有，任何形式的轉(zhuǎn)載都請(qǐng)聯(lián)系作者獲得授權(quán)并注明出處。
*/

//解決場(chǎng)景1 怎么解決，因?yàn)閟etTimeout 是macrotask任務(wù)，執(zhí)行上下文完全不同
/**
    如何解決？
    調(diào)用reject
*/
function fetch() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            reject("收斂一些")
        })
    })
}
fetch().then((resolve, reject) => {
    console.log("resolve");
}).catch(error => {
    console.log("捕獲異常", error) // 捕獲異常 收斂一些
})

場(chǎng)景二 Promise 狀態(tài)只能改變一次

 //異常丟失
   const promise2 = new Promise((resolve, reject) => {
       reject("no")
       console.log("reject after")
     throw Error("no") //異常丟失
   })
   promise1.then(result => {
       console.log(result) // 永遠(yuǎn)不會(huì)執(zhí)行
   }).catch(error => {
       console.log("err",error) // no
   }).catch(error => {
       console.log("err2",error) // 也無法捕獲異常
   })

6.async

基本語法

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}

async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
  return value;   //類似 return Promise.resolve(value)
}
//async 返回一個(gè)promise
asyncPrint("hello world", 50).then(function(d){
   console.log("then",d);
});
/** 打印
hello world
then hello world
*/

云服務(wù)器 GPU云服務(wù)器深入理解webrtc之a(chǎn)ec promise Promise使用 promise用法

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98156.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

littleGrow

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

python之遞歸生成器[yield用法]

閱讀 1417·2021-10-11 10:59
HTML+CSS實(shí)現(xiàn)下拉菜單

閱讀 3116·2019-08-30 15:54
【學(xué)習(xí)筆記】行高 line-height 的基本概念

閱讀 2736·2019-08-30 13:19
瀏覽器渲染的那些事(一)

閱讀 2465·2019-08-30 13:02
移動(dòng)端:web前端實(shí)用小技巧

閱讀 2379·2019-08-30 10:57
JS基礎(chǔ)入門篇（二十一）—事件流

閱讀 3358·2019-08-29 15:40
vue中使用第三方UI庫的移動(dòng)端rem適配方案

閱讀 988·2019-08-29 15:39
修改bootstrap table 源碼實(shí)現(xiàn)固定高時(shí)自定義滾動(dòng)條的樣式

閱讀 2313·2019-08-29 12:40

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Promise之深入淺出

相關(guān)文章

es6之深入理解promise

深入探析koa之異步回調(diào)處理篇

ES6-7

再談Promise

JavaScript 異步編程的四種方式

發(fā)表評(píng)論

0條評(píng)論

littleGrow

男|高級(jí)講師

TA的文章

python之遞歸生成器[yield用法]

HTML+CSS實(shí)現(xiàn)下拉菜單

【學(xué)習(xí)筆記】行高 line-height 的基本概念

瀏覽器渲染的那些事(一)

移動(dòng)端:web前端實(shí)用小技巧

JS基礎(chǔ)入門篇（二十一）—事件流

vue中使用第三方UI庫的移動(dòng)端rem適配方案

修改bootstrap table 源碼實(shí)現(xiàn)固定高時(shí)自定義滾動(dòng)條的樣式

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

Promise之深入淺出

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！