axios 配置

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

1. 配置 axios 基本信息

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

import axios from "axios";
import { Message } from "element-ui";
import router from "@/router";
// 创建axios实例
const service = axios.create({
  // api 的 base_url
  baseURL: xxx,
  timeout: 15000 // 请求超时时间
});

// request 请求拦截器
service.interceptors.request.use(
  config => {

    //设置header
    config.headers["Content-Type"] = "application/x-www-form-urlencoded";
    config.headers["Content-Type"] = "application/json;  charset=UTF-8";

    // 让每个请求携带自定义token 请根据实际情况自行修改
    if (sessionStorage.getItem("token")) {
      // header添加token
      config.headers["Authorization"] = sessionStorage.getItem("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 == 401) {
      Message({
        message: "请重新登陆",
        center: true
      });
      router.push("/login");
      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;
    }
    console.log("err" + error); // for debug
    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'

// 请求函数
export function getUser (req) {
  return axios({
    method: "post",
    url: "/user/getInfo",
    data: req
  })
}

3. 使用函数

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

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

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=>{})
      }))
  },