axios在vue中的使用

什么是axios？

axios就是可以发起http请求

1.进行拦截请求和响应拦截

2.转换请求数据和响应数据

3.可以取消数据请求

4.自动转化JSON数据

5.可以进行二次封装和防止重复请求数据

不同的请求类型

1.get请求：从服务端请求数据

2.post请求：从服务端添加数据

3.put请求：从服务端更新数据

4.deletet请求：删除服务端数据

http请求

请求头使用baseURL：

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

响应的状态使用：(status/statusText)

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 again = new Promise(function (resolve) {
    resolve();
  });
  // 返回重复请求
  return again.then(function () {
    return instance(err.config);
  });
}

完整代码

vant2参考文献：vant-contrib.gitee.io/vant/v2

axios参考文献：www.axios-js.com/docs/#Inter…

    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;

Axios在Vue中的使用