axios二次封装

axios二次封装
import axios from 'axios';
import qs from 'qs';

1.根据环境变量  区分接口的默认地址
swich(process.env.NODE_ENV){
  case "production":
    axios.defaults.baseURL="测试环境地址"
    break;
  case "test":    
    axios.defaults.baseURL="生产环境地址"
    break;
  default:    
    axios.defaults.baseURL="http://127.0.0.1:3000"
    break;
}

2.设置超时时间和跨域是否允许携带凭证
axios.defaults.timeout=10000;        //超时时间
axios.defaults.withCredentials=true    //是否允许携带凭证

3.设置请求传递的数据的格式(看服务器要求什么格式)    //x-www-from-urlencoded格式
axios.defaults.headers['Content-Type']='application/x-www-from-urlencoded';
axios.defaults.transformRequest=data=>qs.stringify(data);    //qs为第三方库

4.设置请求拦截器
客户端发送请求  =>[请求拦截器] => 服务器
Token校验（JWT） 接收服务器返回的token至，存储到vuex
每一次向服务器发送请求，都应该带上token
axios.interceptors.request.use(()=>{
    //携带token
    let token=localStorage.getItem('token');
    token &&(config.headers.Authorization=token)
    return config;
},err=>{
    return Promise.reject(error);
});

5.设置响应拦截器
axios.interceptors.response.use(response=>{
    自定义响应成功的http状态码
},error=>{

});

核心：封装request=>封装接口
request请求封装：
import axios from 'axios'

const request =axios.create({
    baseURL:'http://localhost:3000'
})

export default request

接口封装：
import request from '../until/request'

export function 函数名 (params=>{}){
    return request({
        method:'GET',
        url:'/products',
        params,
})
}

export  function 函数名 (id){
    return request({
        metond:'GET'
        url:`/products/${id}`
        params,
})
}

设置api目录的index.js
import 接口文件名 from '接口文件'

export default{
    接口文件名    
}

在main.js中写入：
import api from './api/index.js'

Vue.prototype.$api=api

---