vue used axios (personal used)

Use package axios (instance.js)

The following code is used in the token and the timestamp (timestamp) is required in the project, according to their needs to be modified like

import utils from "@/utils";
import axios from "axios";
import qs from "qs";

const instance = axios.create({
  baseURL: "/baseurl/",
  timeout: 90000,
  transformRequest: [data => qs.stringify(data, { arrayFormat: "repeat" })]
});
instance.defaults.headers.common["Content-Type"] = "application/x-www-form-urlencoded";

instance.interceptors.request.use(
  function(config) {
    let token = utils.localStorage.getToken();
    if (token) {
      config.headers.common["token"] = token;
    } else {
      config.headers.common["token"] = "1";
    }
    let timestamp=new Date().getTime();
    config.headers.common["timestamp"] = timestamp;
    return config;
  },
  function(error) {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  function(response) {
    let token = response.headers.token;
    let data = response.data;
    // 更新token
    if (token) {
      utils.localStorage.saveToken(token);
    }
    if (data.code === 0) {
      return data;
    } else if (data.code === -999) {//token失效
      let user = utils.localStorage.getUser();
      utils.localStorage.clear();
      utils.localStorage.saveUser(JSON.stringify(user))
      window.location.replace('/robotmanager/login');
      return Promise.reject(new Error("token失效,请重新登录"));
    } else if (data.code === -998) {
      window.location.replace('/noAllowed');
    }else if (data.code === -1) {
      return Promise.reject(new Error("信息错误"));
    }
    return Promise.reject(new Error("后台接口错误"));
  },
  function(error) {
    let msg = null;
    // console.log(error.response.status);
    if (error.message == 'timeout of 5000ms exceeded') {
      msg = "网络连接超时";
    } else if (error.response.status === 500||error.response.status === 400) {
      msg = "后台接口错误";
    }
    if (msg) {
      return Promise.reject(new Error(msg));
    }
    debugger;
    console.log(error);
    return Promise.reject(error);
  }
);

export default instance;
复制代码

Use instance.js

<!--引入封装的axios-->
import http from "./instance";
<!--引用接口的函数-->
async function getData(params) {
  let data = await http.post("/manager/queryparams",params);
  return data;
}
<!--导出调用接口函数-->
export default {
  getData
};
复制代码

When you upload a file

This time we need to use a pure axios, then axios the header of Content-Type is set to multipart / form-data

import axios from "axios";

async function getData(tableData) {
  let params = new window.FormData();
  Object.keys(tableData).map(key => {
    params.append(key, tableData[key]);
  });
  let token = utils.localStorage.getToken();
  let timestamp=new Date().getTime();
  let data = await axios.post("/rob-fe/manager/appVersionManager/editOneAppVersion", params, {
      headers: { "Content-Type": "multipart/form-data", token ,timestamp}
    })
  return data;
}
复制代码

Reproduced in: https: //juejin.im/post/5cf0e9b8e51d45777621bb20