二次封装axios

前后端交互方式

• 原生ajax
  • jQ ajax
  • axios(基于promise封装的ajax),在浏览器和node端都可使用
• fetch(es6内置类,天生就是由promise构成)

axios基础配置

axios({
    //baseUrl+url就是请求地址
    baseUrl:"",
    url:"",
    method:"",//默认get请求
    params:{},  //get系列请求传的参数
    data:{},    //post系列请求传的参数
    headers:{"Content-Type":"x-www-form-urlencoded"},//设置请求头
    timeout: 1000,
    withCredentials: false, // 默认false,非同源策略下是否携带资源凭证
    paramsSerializer:params=>Qs.stringify(params),
    //对params进行数据格式处理
    responseType: 'json',   //返回数据的格式类型
    transformRequest:data=>Qs.parse(data),
    validateStatus:status=>{
        return /^(2|3)\d{2}$/.test(status)
    }
})
axios.get('url',{})
axios.post('url',{},{})

封装axios的公共信息

    //设置options公共信息
    axios.defaults.xxx=yyy
    let instance=axios.create({})
    
    //设置请求拦截器,把config拦截设置后返回,发生在请求之前
    axios.interceptors.request.use(config=>{
        let token=localStorage.getItem("token")
        token?config.headers["Authorization"]=token:null
        return config
    })
    
    //响应拦截器
    axios.interceptors.response.use(response=>{
        //请求成功回来response对象属性
        //data,status/statusText,request(xhr对象),headers,config
        return response.data
    },result=>{
        //请求失败
        if(result.response){
            switch(result.response.status){
                case 401:   //访问权限
                break;
                case:403    //服务端拒绝执行(可能没有登录)
                break;
                case 404:   //页面找不到
                break;
                case 500:   //服务端错误
                break;
                case 503:   //服务端繁忙
                break
            }
            return Promise.reject()
        }
        //网络问题
        if(!window.navigator.online)return Promise.reject()
    })

总结

axios的二次封装,就是封装一些公共的内容,公共的options,请求拦截器,响应拦截器 调用use都传入两个函数,一个成功调用,一个失败调用,请求拦截器,一般设置token等公共的请求头,响应拦截器会在成功时设置只返回响应主体,在请求失败后,判断是网络问题还是客户端或服务端问题(status以4/5开头的),根据不同的响应返回不同的结果