Promies的概念鏈式呼叫

axios基於promis的API進行封裝的 Promise主要解決了非同步操作回撥函式的多層巢狀形成回撥地獄的問題、

Promise-概念及基本使用

Promise可以用來解決上一節回撥函式巢狀的問題,mdn檢視如何使用它

概念

Promise 是一個物件，它代表了一個非同步操作的最終完成或者失敗。

axios就是基於Promise封裝的

基於Promise之後的約定:

通過then獲取成功結果

通過catch獲取失敗結果

可以用鏈式的方式處理多個彼此依賴的非同步操作

一路點下去

類似陣列方法arr.map().filter().map().filter()

上一個方法的返回值,可以繼續點出後續的方法

返回的是Promise Promise原型Prototype裡面有很多方法 .then .catch,rejevtd Promise是一個建構函式 p是例項化物件 return Promise例項化物件.then .then 會形成鏈式呼叫

<body>
    <h2>測試axios返回的是否是Promise</h2>
    <script src="./lib/axios.js"></script>
    <script>
      // axios基於promis的API進行封裝的 

      // const p = axios({}).then(() => {});
      // console.log(p); //返回的是Promise Promise原型Prototype裡面有很多方法 .then .catch,rejevtd

      // 兩種狀態只能執行 一次 誰寫上面誰先執行
      // Promise是一個建構函式 p是例項化物件   return Promise例項化物件.then .then 會形成鏈式呼叫

      const p = new Promise((resolve, reject) => {
        resolve();  
//狀態成功時執行.then回撥函式
        reject(); //狀態失敗時執行.catch回撥函式
      });
      p.then(() => {
        console.log("成功了");
      }).catch(() => {
        console.log("我失敗了");
      });

      // 過一秒 引數傳過去 ‘成功’
      const p1 = new Promise((resolve, reject) => {
        // console.log("resolve是一個方法", resolve);//ƒ () { [native code] }
        setTimeout(() => {
          resolve("我成功了");
        }, 1000);
      }).then((res) => {
        console.log("res是resolve成功時傳過來的引數", res);
      });
    </script>
  </body>

Promise的鏈式呼叫

<body>
    <h2>鏈式呼叫</h2>
    <script src="./lib/axios.js"></script>
    <script>
      //  resolve   reject (形參) 名字可以改,但是建議別改
      // 例項化物件可以調原型上的方法 可以進行鏈式呼叫
      // Promise是一個建構函式 p是例項化物件 return Promise例項化物件.then .then 形成鏈式呼叫
      const p = new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve("我是1");
        }, 1000);
      })
        .then((res) => {
          console.log("1", res);
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve("我是2");
            }, 2000);
          });
        })
        .then((res) => {
          console.log("2", res);
          return new Promise((resolve, reject) => {
            setTimeout(() => {
              resolve("我是3");
            }, 3000);
          });
        })
        .then((res) => {
          console.log("3", res);
        });
    </script>
  </body>

Promies的概念鏈式呼叫

Promise-概念及基本使用

Promies的概念鏈式呼叫

《javascript設計模式》學習筆記四：Javascript面向物件程式設計鏈式呼叫例項分析

JavaScript鏈式呼叫原理與實現方法詳解

promise鏈式呼叫的應用

請實現滑鼠點選頁面中中任意標籤和實現鏈式呼叫，每日刷兩題

詳解JavaScript中的鏈式呼叫

js簡單實現鏈式呼叫

C# 最簡單的鏈式呼叫例子

P14.3-Promise終極鏈式呼叫寫法

Promise的鏈式呼叫和axios處理高併發

詳解jQuery 鏈式呼叫

通過ref返回解決C# struct結構體鏈式呼叫的問題

[轉載]（基礎）Promise中then()方法使用，多次呼叫、鏈式呼叫

Java實體類實現鏈式操作例項解析

ES6 class類鏈式繼承，例項化及react super(props)原理詳解

C++使用模板類實現鏈式棧

佇列的順序儲存與鏈式儲存c語言實現

資料結構--線性表的鏈式儲存（3）

鏈式前向星

鏈式前向星&&dij堆優化

Promies的概念 鏈式呼叫

Promise-概念及基本使用

相關推薦

Promies的概念鏈式呼叫