前後端交互（Promise、fetch、axios、async/awit用法）

1.Promise概述

Promise是異步編程的一種解決方案，從語法上講，Promise是一個對象，從它可以獲取異步操作的消息。

1.2Promise的好處：

1.2.1. 可以避免多層異步調用嵌套的問題（回調地獄）

1.2.2. Promise對象提供了簡潔的API，使得控制異步操作更加容易。

1.3Promise的基本使用

  var p = new Promise(function(resolve, reject) {
        // 在這裏處理異步任務
        // 成功時調用resolve
        // 失敗時調用reject
      });

      p.then(
        function(ret) {
          // 從resolve得到正常的結果
        },
        function(ret) {
          // 從reject得到錯誤的信息
        }
      );

1.4 基於Promise處理Ajax請求

function QueryData() {
        var p = new Promise(function(resolve, reject) {
          var xhr = new XMLHttpRequest();
          xhr.onreadystatechange = function() {
            if (xhr.readyState !== 4) return;
            if (xhr.readyState == 4 && shr.status == 200) {
              // 處理正常的情況
              resolve(xhr.response);
            } else {
              // 處理異常情況
              reject("服務器錯誤");
            }
          };
          xhr.open("get", url);
          xhr.send(null);
        });
        return p;
      }

      QueryData("http://localhost:3000/data").then(
        function(data) {
          console.log(data);
        },
        function(info) {
          console.log(info);
        }
      );

1.5 使用以下代碼可以發送多次Ajax請求

  QueryData(url)
        .then(function(data) {
          return QueryData(url);
        })
        .then(function(data) {
          return QueryData(url);
        })
        .then(function(data) {
          return QueryData(url);
        });

1.6 then參數中的函數返回值

1.返回Promise實例對象（返回的該實例對象會調用下一個then）

2.返回普通值（返回的普通會直接傳遞給下一個then，通過then參數中函數的參數接收該值）

1.7 Promise常用的API

1.7.1.實例方法

p.then() 得到異步任務的正確結果

p.catch() 獲取異常信息

p.finally() 成功與否都會執行

1.7.2.對象方法

Promise.all() 併發處理多個異步任務，所有任務都執行完成才能得到結果

Promise.race() 併發處理多個異步任務，只要有一個任務完成就能得到結果

 

2.fetch的基本用法

fetch("http://loaclhost:3000/data")
        .then(function(data) {
          // text()方法，屬於fetchAPI的一部分，它返回Promise實例對象，用於獲取後臺返回的數據
          return data.text();
        })
        .then(function(data) {
          console.log(data);
        });

2.1 GET請求方式的參數傳遞

fetch("http://loaclhost:3000/data?id=123")
        .then(function(data) {
          // text()方法，屬於fetchAPI的一部分，它返回Promise實例對象，用於獲取後臺返回的數據
          return data.text();
        })
        .then(function(data) {
          console.log(data);
        });

2.2 POST請求方式的參數傳遞

fetch("http://loaclhost:3000/data", {
        methods: "post",
        body: "username=lisi&password=123",
        headers: {
          "Content-Type": "application/x-www-form-urlencoded"
        }
      })
        .then(function(data) {
          // text()方法，屬於fetchAPI的一部分，它返回Promise實例對象，用於獲取後臺返回的數據
          return data.text();
        })
        .then(function(data) {
          console.log(data);
        });

3.axios的基本用法

      axios.get("http://loaclhost:3000/data").then(ret => {
        // data屬性名稱是固定的，用於獲取後臺響應的數據
        console.log(ret.data);
      });

3.1GET請求方式的參數傳遞

1.直接通過url地址傳參即可。

2. 通過params選項傳遞參數。

axios
        .get("http://loaclhost:3000/data", {
          params: {
            id: 123
          }
        })
        .then(ret => {
          // data屬性名稱是固定的，用於獲取後臺響應的數據
          console.log(ret.data);
        });

3.2POST請求方式的參數傳遞（默認傳遞的是json格式的數據）

  axios
        .post("http://loaclhost:3000/datapost", {
            id: 123,
            username:'ww'
        })
        .then(ret => {
          // data屬性名稱是固定的，用於獲取後臺響應的數據
          console.log(ret.data);
        });

3.3 axios的響應結果

響應結果的主要屬性：

1.data:實際響應回來的數據

2.headers：響應頭信息

3.status：響應狀態碼

4. statusText：響應狀態信息

3.4 攔截器

3.4.1 請求攔截器

axios.interceptors.request.use(
        function(config) {
          config.headers.mytoken = "nihao";
          return config;
        },
        function(err) {
          //  這裏處理錯誤信息
          console.log(err);
        }
      );

3.4.2 響應攔截器（在獲取數據之前對數據進行一些加工處理）

 axios.interceptors.response.use(
        function(res) {
          // 處理返回的數據
          return res;
        },
        function(err) {
          //  這裏處理錯誤信息
          console.log(err);
        }
      );

4. async/await的基本用法

 async function QueryData(id) {
        const ret = await axios.get("http://loaclhost:3000/data");
        return ret;
      }

      QueryData.then(ret => {
        console.log(ret);
      });