Axios 基础配置

# Axios 基础配置

# 全局的 axios 默认值

引入 axios 后

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

# 自定义实例默认值

// 创建实例时设置配置的默认值
var instance = axios.create({
baseURL: 'https://api.example.com'
});

// 在实例已创建后修改默认值
instance.defaults.headers.post['Content-Type'] = 'application/json'
instance.defaults.headers.common['Authorization'] = AUTH_TOKEN;
import axios from "axios";
import { Loading, Message } from "element-ui"; // 使用elementUI的组件来给提示
import router from "@/router";
import { removeCookies } from "./auth";
let loadingInstance = null; // 加载全局的loading

//创建axios实例,在这里可以设置请求的默认配置
const instance = axios.create({
  timeout: 10000,
  baseURL: process.env.VUE_APP_BASE_API, //根据自己配置的反向代理去设置不同环境的baeUrl
  headers: {
    token: sessionStorage.getItem("token") || ""
  },
  withCredentials: true
});
// 统一设置post请求头
instance.defaults.headers.post["Content-Type"] =
  "application/x-www-form-urlencoded";
//这里简单列出一些常见的http状态码信息,可以自己去调整配置
const httpCode = {
  400: "请求参数错误",
  401: "权限不足, 请重新登录",
  403: "服务器拒绝本次访问",
  404: "请求资源未找到",
  500: "内部服务器错误",
  501: "服务器不支持该请求中使用的方法",
  502: "网关错误",
  504: "网关超时"
};

/** 添加请求拦截器 **/
instance.interceptors.request.use(
  config => {
    loadingInstance = Loading.service({
      // 发起请求时加载全局loading,请求失败或有响应时会关闭
      spinner: "fa fa-spinner fa-spin fa-3x fa-fw",
      text: "拼命加载中...",
      background: "rgba(0, 0, 0, 0.7)"
    });
    // 这里:可以根据业务需求可以在发送请求之前做些什么:例如我这个是导出文件的接口,因为返回的是二进制流,所以需要设置请求响应类型为blob,就可以在此处设置。
    if (config.url.includes("xx/xxxx")) {
      config.headers["responseType"] = "blob";
    }
    // 这里是文件上传,发送的是二进制流,所以需要设置请求头的'Content-Type'
    // if (config.url.includes('pur/contract/upload')) {
    //   config.headers['Content-Type'] = 'multipart/form-data'
    // }
    // if (config.url.includes('callback.htm')) {
    //   config.headers['Access-Control-Allow-Origin'] = 'xxxxxx'
    // }
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

/** 添加响应拦截器  **/
instance.interceptors.response.use(
  response => {
    loadingInstance.close();
    // console.log(response)
    // 响应结果里的status: 与后台的约定,可以根据实际情况去做对应的判断
    if (response.status == "200") {
      return Promise.resolve(response.data);
    } else {
      Message({
        // message: response.data.message,
        message: "出错了~",
        type: "error"
      });
      return Promise.reject(response);
    }
  },
  error => {
    loadingInstance.close();
    if (error.response) {
      // 根据请求失败的http状态码去给用户相应的提示
      let tips =
        error.response.status in httpCode
          ? httpCode[error.response.status]
          : error.response.data.message;
      Message({
        message: `${error.response.status} ${tips}`,
        type: "error"
      });
      // token或者登陆失效情况下跳转到登录页面,根据实际情况,在这里可以根据不同的响应错误结果,做对应的事。这里我以401判断为例
      if (error.response.status === 401) {
        setTimeout(() => {
          removeCookies();
          router.push({
            path: `/login`
          });
        }, 500);
      }
      return Promise.reject(error);
    } else {
      Message({
        message: "请求超时, 请刷新重试",
        type: "error"
      });
      return Promise.reject(new Error("请求超时, 请刷新重试"));
    }
  }
);

/* 统一封装get请求 */
export const get = (url, params, config = {}) => {
  return new Promise((resolve, reject) => {
    instance({
      method: "get",
      url,
      params,
      ...config
    })
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
};

/* 统一封装post请求  */
export const post = (url, data, config = {}) => {
  return new Promise((resolve, reject) => {
    instance({
      method: "post",
      url,
      data,
      ...config
    })
      .then(response => {
        resolve(response);
      })
      .catch(error => {
        reject(error);
      });
  });
};

/* 或者写成下面这样: Promise.resolve() 和 Promise.reject()返回的是promise对象,二者都是语法糖  */
// export const post = (url, data, config = {}) => {
//   return instance({
//     method: 'post',
//     url,
//     data,
//     ...config
//   }).then(response => {
//     return Promise.resolve(response)
//   }).catch(error => {
//     return Promise.reject(error)
//   })
// }

api 文件夹 使用 返回promise

import { get, post } from '@/utils/axios'

export const login = (params) => post('/login', params)

export const logout = (params) => post('/logout', params)