关于axios的二次封装

@1 第一步 我们一般都会先导入axios
        import axios from ‘axios’
@2 第二步 创建axios的实例 可以同时创建多个实例 每个实例配置不同
        const http = axios.create( { 
                // 这里面可以做一些基础的配置 比如基础路径 ,axios 请求超时的时间
                baseURL:'https://www.baidu.com',
                timeout:60000
         })
@3 只针对post请求,请求主体做格式化的处理,安装后台的要求,如果不设置transfromRequest
        会把Data对象转化为JSON字符串传递给服务器, axios内部会识别常用的数据格式,自动设
        置请求头中的Content-Type
        http.defaults.transfromRequest = data =>{
                if(typeof data === 'object') qs.stringfy(data)   // qs.stringfy是转化为name='zs'$age=12
                return data
        }
        http.default.validateStatus = status = > {
                return status >= 200 && status < 400  // 设置状态码在200到400之间都是成功的
        }
@4 设置请求拦截器  并且携带token
        http.interceptors.request.use(config=>{
                if(localstorags.getItem('token')){
                        config.headers.authorzation = localstorage.getItem('token')
                 }
                return config
        })
@5 设置响应拦截器
        http.intercepotrs.response.use(responst=>{
                return responst.data
        }, reson=>{

                 // 请求失败的处理
                let status = reson?.reponse.status
                     code = reson?.code
                if(status){ 
                        // 服务器返回的有结果 没有经过validateStatus状态码的校验
                        switch(+status){
                                case 404:
                                        alert('请求地址不存在')
                                        break;
                                case 500:
                                        alert('服务器发生未知错误')
                                        break;
                                。。。
                        }
                 }else if(code==='ECONNABORTED'){
                        // 请求超时
                        alert(‘当前请求超时’)
                }else if(axios.isCancel(reson)){
                        // 请求中断
                        alert('请求中断')
                }else {
                        alert(‘网络中断,请检查网络')
                }
                return Promise.reject(reson)
        })
@ 6 记得导出
        export default http

你可能感兴趣的:(javascript,开发语言,ecmascript)