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

Posted sonicwater

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue-cli项目中axios的配置文件相关的知识,希望对你有一定的参考价值。

./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‘这个文件中,也可以独立出来。

以上是关于vue-cli项目中axios的配置文件的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli的项目中关于axios的全局配置

vue-cli的项目中关于axios的全局配置

vue的学习之路 vue-cli与axios

VUEvue在vue-cli3环境下基于axios解决跨域问题

vue-cli 引入 axios 并全局配置axios

使用vue-cli+axios配置代理进行跨域访问数据