前后端交互（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);
      });