axios的简易二次封装

基本使用

import axios from 'axios';
import qs from 'qs'
// 引入进度条
import nprogress from 'nprogress'
// 引入进度条样式
import 'nprogress/nprogress.css'
//axios 基本使用
axios.get(url, {
    params: {

    }
}).then(() => {

}).catch(() => {

})

1:根据环境变量区分接口默认地址

switch(process.env.NODE_ENV){
    case 'production':
        axios.defaults.baseURL = 'http://生产:3000'
        break
    case 'beat':
        axios.defaults.baseURL = 'http://测试:3000'
        break
    default:
        axios.defaults.baseURL = 'http://测试:3000'
        break
}

2:配置超时时间和跨域的时候 是否携带凭证

 axios.defaults.timeout = 10000
 axios.defaults.withCredentials = true

3:设置请求传递的数据的格式 x-www-form-urlencoded 看服务器要求什么格式

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

4：拦截器：请求拦截器 响应拦截器

设置请求拦截器 reuqest

 axios.interceptors.request.use(config=>{
            // congig 配置对象 里面有请求头
            // 携带token
            let token = localStorage.getItem('TOKEN')
            token &&  (config.headers.Authorization = token)
            nprogress.start() // 开启进度条
            return config;
        },error=>{
            return Promise.reject(error)
        })

设置响应拦截器 服务器返回信息-> 响应拦截器(网络错误处理，授权错误处理 普通错误处理) -> 客户端处理

  axios.interceptors.response.use(response=>{
        nprogress.end()// 关闭进度条
        return response.data // 响应拦截器中返回主体
        },error =>{
            let {response} = error
            if(response){
                //服务器最起码返回结果了
                switch(response.status){// 根据不同状态码做不同处理
                    case 401 : // =>权限
                    // 跳转路由或提示
                    break;
                    case 403 : // TOKEN过期 服务器拒绝执行
                    // dosomthing
                    break
                    case 404 : // 找不到地址
                    //dosomthing
                    break
                }
            }else{
                // 服务器连结果都没有返回,
                if(!Window.navigator.onLine){//断网
                    //断网处理:可以跳转断网页面/根据需求处理
                    return
                }
                return Promise.reject(error)
            }
        })

五：取消请求

使用场景：快速连续点击一个按钮，比如是订单的 就会生成两个订单。tab切换频繁的切换查询，如果响应很慢，也会产生重复请求
如何解决：XMLHttpRquest对象中有个属性 .abort(),就是可以中断用已经发生的请求。
https://juejin.cn/post/6968630178163458084#heading-28