vue中使用axios(个人使用过的)

使用封装的axios(instance.js)

下面代码中使用到token和timestamp(时间戳)是项目中的要求,根据自己的需求进行修改就好了

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;
复制代码

使用instance.js

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

上传文件的时

这时候我们需要使用一个纯净的axios,然后将axios的header中的 Content-Type 设置为 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;
}
复制代码

转载于:https://juejin.im/post/5cf0e9b8e51d45777621bb20