axios

anxios的二次分装和API接口管理

在项目开发中，一般会在项目的 src 目录下创建 api 文件夹，在 api 文件夹下创建用来二次封装的文件 http.js 文件

目录结构：

|–node_modules

|–public

|–src

—​ |—api

​ — |—http.js

http,js 内容：

import axios from 'axios';
import qs from 'qs';// qs为第三方库

//可以在根目录的 package.json 配置 NODE_ENV 
switch(process.env.NODE_ENV){ 
case 'production':
  axios.defaults.baseURL = "生产环境地址";
  break;
case 'test'
  axios.defaults.baseURL ="测试环境地址";
default;
  axios.defaults.baseURL ="开发环境地址";
}
/*
设置超时时间
设置是否允许跨域携带身份凭证
*/
axios.defaults.timeout = 12000;
axios.defailts.withCredentials = true;

/*
设置请求传输数据的格式
只支持POST请求，根据实际要求决定设置不设置
*/
axios.defailts.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defailts.transformRequest = data => {qs.stringify(data)}; //qs===query string

/*
设置请求拦截器
客户端发送请求 => [请求拦截器] => 服务器 
*/
axios.interceptors.request.use(
  config => {//请求成功时执行
    //获取本地存储中的token
    let token = localStorage.getItem('token');
    token && (config.headers.Authorization = token);
    return config;
  },
  error => {//请求失败时执行
    return Primise.reject(error)
  }
 ) 

/*
响应拦截器
服务器返回信息 => [响应拦截器统一处理] => 客户端 
*/
axios.interceptors.response.use(
  response=>{
     return response.data;
  },error => {//拦截失败
    return Primise.reject(error);
    let {response } = error;
    if(response) {
        switch (response.status) {
           case 401://权限问题,提示未登录或无权限等；
           break;
           case 403://服务器拒绝执行 （token过期）
           break;
           case 404://找不到页面
           break;
        }
    } else {
        //服务器连结果都没有返回
        if(!window.navigator.onLine) {
            //断网处理：跳转断网页面/提示网络错误等等
            return;
        }
        return Promise.reject(error)
    }
  }
) 

export default axios

参考文件：axios中文文档