vue-cli项目中axios的配置文件

Posted 2021-03-17 sonicwater

./src/api/index.js
首先引入axios，引入配置好的路由，并配置响应拦截器

import axios from "axios";
import router from "../router";
// http 响应拦截器
axios.interceptors.response.use(
  response => {
    // 对响应数据做处理
    return response;
  },
  error => {
    if (error.response) {
      switch (error.response.status) {
        case 401:
          router.push({
            path:'./login'
          })
      }
    }
    return Promise.reject(error);
  }
)

状态码401是对身份的验证，如果验证失败，需要跳转到登陆页面。

配置请求拦截器

axios.interceptors.request.use(
  config => {
    if( localStorage.getItem('token') ){
      config.headers.Authorization = localStorage.getItem('token')
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
)

如果本地存储存在token（如果token存入了vuex的store就从store取），每请求前在参数的headers.Authorization中存入token。

写一个创建请求时的配置

let qs from 'qs';
let config = {
  baseURL: process.env.VUE_APP_BASEURL,
  method: "get",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded"
  },
  transformRequest: [
    function(data) {
      // 由于使用的form-data传数据所以要格式化
      data = qs.stringify(data);
      return data;
    }
  ]
};

• process.env.VUE_APP_BASEURL是vue-cli自己手动配置的值。
• transformRequest允许在向服务器发送前，修改请求数据，只能用在 ‘PUT‘, ‘POST‘ 和 ‘PATCH‘ 这几个请求方法，后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream。
• qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。

写一个测试接口调用

//测试接口调用
export const getTestData = params => {
  return axios.post("getTestData", params, config).then(res => res.data);
};

接口调用可以全写在‘./src/api/index.js‘这个文件中，也可以独立出来。