axios的二次封装

上代码

import axios from 'axios'
import qs from 'qs'

// 请求前

// 会根据项目的开发，生产测，试环境不一样而对应不同地址 （接口）
// 如果出现cors跨域方式,向服务器发送请求时，允许我们带自行凭证（携带cookie），不能每次都需要单独写一遍 需要提前都处理掉，
// post请求格式需要其他处理服务器接受1、JSON格式2、urlencoded格式，统一处理好（不在每发一次就单独处理一次）
// 在服务器发请求时，某些操作导致请求错误，也需要统一处理

// 返回结果
// 当从服务器拿回来结果时，需要告诉我成功还是失败，失败的原因，如果返回401 未认证，可以做统一处理跳到登录页面，再或者断网了也需要自己处理
// 统一配置好，提前封装，操作更简单


// axios.get(url,{
//     params:{

//     }
// }).then(response=>{

// }).catch(error=>{

// })

/**
 * 1、根据环境变量进行接口区分
 * baseURL：公共前缀
 */

switch(process.env.NODE_ENV) {
    case "production":
        axios.defaults.baseURL = 'http://api.baidu.com';
        break;
    case "test":
        axios.defaults.baseURL = 'http://192.168.20.12:8080'
        break
    default:
        axios.defaults.baseURL = 'http://127.0.0.1:3000' 
}

/**
 * 设置超时请求时间
 */
axios.defaults.timeout = 10000;

/**
 * 设置cors跨域允许携带资源凭证
 */
axios.defaults.withCredentials = true

/** 
 * 设置post请求头:告知服务器请求主题的数据格式
 * post 请求想写成  xxx=xxx&xxx=xxx的形式  （get请求就是这种格式）
 * 设置请求传递数据的格式
 * 这种格式交 x-www-form-urlencoded
 * 看请求数据的格式（服务器要求什么格式）不要求就不设置
 */

axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'
axios.defaults.transformRequest = data=>{
    qs.stringify(data)
}

// axios.post(url,data)  data是一个对象


/**
 * 设置请求拦截器
 * 客户端 -》 请求拦截器-》服务器
 * token校验（JWT）每次客户端向服务器发送请求时，都需要客户端带上token，这个在请求拦截时就需要做处理
 * token也有个过期时期，
 * 接收服务器返回的token，存储到vuex/本地存储（或者其他）
 * 
 */


// config是轻松请求的时候带的配置项
axios.interceptors.request.use(config=>{
    // 携带token
    let token = localStorage.getItem('token')
    // 判断token必须得存在，然后做在请求头部设置 Authorization
    token && (config.headers.Authorization = token)
    // 如果不返回配置项，发给服务器的内容就是空的
    return config 
},error=>{
    return Promise.reject(error)
})

/**
 * 响应拦截器
 * 服务器返回信息 -》 【拦截统一处理】   -》 客户端JS获取信息
 */
axios.defaults.validateStatus = status =>{
    // 自定义响应成功的HTTP状态码 返回 大于200小于300 默认2开头的都默认返回成功
    return /^(2|3)\d{2}$/.test(status)
}
axios.interceptors.response.use(response=>{
        // 状态码2开头成功返回的数据
        return response.data
},error=>{
    let {response} = error
    if(response){
        // 服务区返回结果
        switch(response.status){
            case 401://当前请求需要用户验证（一般未登录）   权限
                break;
            case 403://服务器已经理解请求，但是拒绝执行他（一般是token过期）
                break
            case 404: //找不到页面
                break;
        }
    }else{
        // 服务器没有返回结果1、服务器蹦了，2、客户端没网需要做断网处理（window身上有个内置对象  window.navigator.onLine)
        if(!window.navigator.onLine){
            // 断网处理，可以跳到断网页面
            return
        }
        return Promise.reject(error)
    }
})
// 暴露axios接口
export default axios