美文网首页
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