axios是干嘛的？

axios就是一个能对服务器发起http请求
1.可以进行拦截请求和响应拦截
2.转换请求数据和响应数据
3.可以取消数据请求
4.可以自动转化JSON数据
5.可以进行二次封装和防止重复请求数据

一共有几种请求类型

1.get请求
1.post请求
1.put请求
1.deletet请求

设置http请求接口

请求头使用baseURL：

const instance = axios.create({
  // 头部地址
  baseURL: "http://47.93.101.203",
  // 请求超时
  timeout: 10000,
});

响应的状态使用：(status/statusText)
一般来说一个请求路径可以对应多个相同的多个请求类型(get/post/put/delete)

使用qs转换

用于来判断类型判断是否需要去转换成为字符串

instance.interceptors.request.use(
          function (config) {
            // qs转换
            config.data =
              config.data instanceof FormData ? config.data : qs.stringify(config.data);
            return config;
          },
          function (error) {
            return Promise.reject(error);
          }
    );

登录的时候判断一下状态码

我们在登录的时候接口会返回一个状态值，我们在axios中去判断状态值是否是正确的
下面这段代码是判断登录的时候状态码和token失效时的状态码（每个接口的状态码都不一样）

function (response) {
    // 判断状态码
    if (response.status == 200) {
      // 状态码登录410000退出登录
      if (response.status == 410000) {
        localStorage.removeItem("token");
        router.replace({
          path: "login",
          query: { redirect: router.currentRoute.fullPath },
        });
      }
    }
    return response;
  },

请求网络判断

我们在是用的时候没有网络是加载不出来数据的，没有网络的时候我们会提示你的网络断开
下面的这段代码就是检测是否有网络，没有网络会提示

function (error) {
    // 判断网络请求
    if (error.message == "Network Error") {
      // 弹出弹窗显示没有网络
      Dialog.confirm(
      // 弹出窗
        { message: "网络错误，请检查服务端，请【点击重试】！", title: "提示" },
        {
          // 点击重新获取检测是否有网络
          confirmButtonText: "点击重试",
          type: "warning",
          showClose: false,
          showCancelButton: false,
          closeOnClickModal: false,
        }
      ).then(() => {
        tautology(error);
      });
    }
    // 返回错误
    return Promise.reject(error);
  }

组合代码

instance.interceptors.response.```
use(
  function (response) {
    // 判断状态码
    if (response.status == 200) {
      // 状态码登录410000退出登录
      if (response.status == 410000) {
        localStorage.removeItem("token");
        router.replace({
          path: "login",
          query: { redirect: router.currentRoute.fullPath },
        });
      }
    }
    return response;
  },
  function (error) {
    // 判断网络请求
    if (error.message == "Network Error") {
      // 弹出弹窗显示没有网络
      Dialog.confirm(
        // 弹出窗
        { message: "网络错误，请检查服务端，请【点击重试】！", title: "提示" },
        {
          // 点击重新获取检测是否有网络
          confirmButtonText: "点击重试",
          type: "warning",
          showClose: false,
          showCancelButton: false,
          closeOnClickModal: false,
        }
      ).then(() => {
        tautology(error);
      });
    }
    // 返回错误
    return Promise.reject(error);
  }
);
复制代码

二次请求

在上面的代码可以看到请求不到网络的时候点击重试会触发下面这段封装的二次请求
    
复制代码

//再次发起请求
function tautology(err) {
  // 创建一个新的Promise;
  let back = new Promise(function (resolve) {
    resolve();
  });
  // 返回重复请求
  return back.then(function () {
    return instance(err.config);
  });
}
复制代码

请求完整代码

vant2的网址：https://vant-contrib.gitee.io/vant/v2
axios的网址：http://www.axios-js.com/docs/#Interceptors
复制代码

import router from "@/router";
// 链接axios
import axios from "axios";
// 链接qs
import qs from "qs";
// 链接vant2
import { Dialog } from "vant";

const instance = axios.create({
  // 头部地址
  baseURL: "http://47.93.101.203",
  // 请求超时
  timeout: 10000,
});
instance.interceptors.request.use(
  function (config) {
    // qs转换
    config.data =
      config.data instanceof FormData ? config.data : qs.stringify(config.data);
    return config;
  },
  function (error) {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  function (response) {
    // 判断状态码
    if (response.status == 200) {
      // 状态码登录410000退出登录
      if (response.status == 410000) {
        localStorage.removeItem("token");
        router.replace({
          path: "login",
          query: { redirect: router.currentRoute.fullPath },
        });
      }
    }
    return response;
  },
  function (error) {
    // 判断网络请求
    if (error.message == "Network Error") {
      // 弹出弹窗显示没有网络
      Dialog.confirm(
        // 弹出窗
        { message: "网络错误，请检查服务端，请【点击重试】！", title: "提示" },
        {
          // 点击重新获取检测是否有网络
          confirmButtonText: "点击重试",
          type: "warning",
          showClose: false,
          showCancelButton: false,
          closeOnClickModal: false,
        }
      ).then(() => {
        tautology(error);
      });
    }
    // 返回错误
    return Promise.reject(error);
  }
);

//再次发起请求
function tautology(err) {
  // 创建一个新的Promise;
  let back = new Promise(function (resolve) {
    resolve();
  });
  // 返回重复请求
  return back.then(function () {
    return instance(err.config);
  });
}
// 抛出
export default instance;