美文网首页
axios请求响应拦截及请求方法的封装

axios请求响应拦截及请求方法的封装

作者: lynnce | 来源:发表于2019-11-19 15:11 被阅读0次
    import axios from 'axios'
    
    import routerfrom '../router'
    
    let http =axios.create({
    
        baseURL: process.env.NODE_ENV ==='development' ?'http://localhost:9090' :'www.lynnce.com',
    
        timeout:2000
    
    })
    
    const toLogin =() => router.push({name:'/Login'})
    
    const handleErrorStatus =(status,msg) => {
    
    switch (status) {
    
    //  请求需要身份认证,请登陆
    
        case 401 : {
    
          toLogin()
    
          break
    
        }
    
    //  身份过期
    
        case 403 : {
    
          alert('身份过期,需要重新登陆')
    
        }
    
    //  请求资源不存在
    
        case 404 : {
    
          alert('请求资源路径不正确')
    
        }
    
    //  服务器错误
    
        case 500 : {
    
          alert('服务器出现了一点儿问题')
    
        }
    
          default :msg &&alert(msg) //  可自己封装Layer
    
      }
    
    }
    
    //  请求拦截 为每个请求添加authorization请求头 方便后台进行身份验证token
    
    http.interceptors.request.use(
    
      (req) => {
    
        let token = localStorage.getItem('token')
    
        token &&(req.headers.authorization =token)
    
        return req
    
      },
    
    (err) => {
    
        Promise.reject(err)
    
      }
    
    )
    
    //  响应拦截 为每个请求判断请求状态status 200 201 202 301 302 304 401 403 404 500 503 505
    
    //  根据code判断是否需要身份认证 判断请求是否超时 出现网络中断等问题
    
    let time =500
    
    http.interceptors.response.use(
    
      res =>res.status ===200 ? Promise.resolve(res) : Promise.reject(res) ,
    
      err => {
    
        //  如果网络状况不好,或者请求超时,提示信息并重发请求
    
        if(err.code ==='ECONNABORTED' ||err.message ==='network error') {
    
            alert(`网络不是很通畅,${time}ms后请求再次发出`)
    
            return new Promise((resolve,reject) => {
    
              setTimeout(() => {
    
                resolve(http.request(err.config))
    
              },time)
    
          })
    
        }
    
        handleErrorStatus(err.response.status,err.response.data.msg)
    
        return Promise.reject(err.response)
    
      }
    
    )
    
    //  封装请求方法,常用get,post
    
    http.request(method,url,data)
    
    http.get(url,{params:data})
    
    http.post(url,data)
    

    相关文章

      网友评论

          本文标题:axios请求响应拦截及请求方法的封装

          本文链接:https://www.haomeiwen.com/subject/ranwictx.html