axios 配置

为了方便对 axios 操作，我们通常对 axios 进行二次封装。

1. 配置 axios 基本信息

1. 建立 src/ api / index.js 文件并配置axios

import axios from "axios";
import { Message } from "element-ui";
import router from "@/router";
import qs from 'qs';
import store from '@/store';
import { setStore } from '@/utils/store';


// 创建axios实例
const service = axios.create({
  // api的base_url
  // baseURL: process.env.VUE_APP_URL, // 本地-后端解决跨域后
  baseURL: process.env.NODE_ENV === "dev" ? "/api" : process.env.VUE_APP_URL, // 本地-前端解决跨域
  timeout: 15000 // 请求超时时间
});

// request 请求拦截器
service.interceptors.request.use(
  config => {
    //设置header
    config.headers["Content-Type"] = "application/json;charset=UTF-8";

    // 让每个请求携带自定义token 
    if (store.getters.token) {
      // header添加token
      config.headers["Authorization"] = store.getters.token;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  }
);
// respone 响应拦截器
service.interceptors.response.use(
  response => {
    return response;
  },
  error => {
    if (error.response.status == 400) {
      Message({
        message: "参数信息有误",
        center: true
      });
      return;
    } else if (error.response.status == 302) {
      Message({
        message: "用户未登录",
        center: true
      });
      router.push("/login");
      setStore({ name: 'TOKEN', content: '', type: 'session' })
      return;
    } else if (error.response.status == 404) {
      Message({
        message: "连接失败",
        center: true
      });
      return;
    } else if (error.response.status == 500) {
      Message({
        message: "服务器内部错误",
        center: true
      });
      return;
    } else if (error.response.status == 560) {
      Message({
        message: "数据库异常",
        center: true
      });
      return;
    }
    Message({
      message: error.message,
      type: "error",
      duration: 5 * 1000
    });
    return Promise.reject(error);
  }
);

export default service;

2. 封装 axios 函数

例如： src/ api / user / user.js 文件，单独建立文件夹，方便统一管理，同时在开发时，避免git提交时的冲突

import axios from '../index'

// post请求函数
export function getUser (data) {
  return axios({
    method: "post",
    url: "/user/getInfo",
    data
  })
}
// get 请求函数，使用params会自动序列化参数
export function getUser (params) {
  return axios({
    method: "post",
    url: "/user/getInfo",
    params
  })
}

3. 使用函数

import { getUser } from '@/api/user/user.js'

methods:{
    getUser(data)
    .then(res=>{})
    .catch(error=>{})
    .finally(()=>{})
}

4. 并发请求

例如：根据函数1和函数2返回数据的 id 和 phone，作为函数3的入参，去查询用户数据

import { getUser, getPhone, getUserId } from '@/api/user/user.js'

mounted() {
    axios.all([getUserId (), getPhone ()])
      .then(axios.spread(function(userId, phone) {
         console.log('请求1结果', userId)
         console.log('请求2结果', phone)
         let params = {
            phone: phone,
            id: userId
         }
         getUser(params ).then(res=>{})
      }))
  },