随笔集：简单认识vue中axios的请求拦截和响应拦截_axios请求拦截返回reject后-CSDN博客

简单了解vue中axios的请求拦截和响应拦截

只要是一个正常的vue项目一定会涉及到后端的数据请求和返回。但每次请求和返回都不一定是一样的，所以我们得在发送请求之前或者接受数据之后进行一些初步性的判断和操作。

下方罗列出一些基本常用的axios功能

//请求超时时间
axios.defaults.timeout = 30000  	

// 返回的状态码范围
axios.defaults.validateStatus = function (status) { 	
  return status >= 200 && status <= 505
}

// HTTP请求拦截
axios.interceptors.request.use(config => {
	//请求之前要做的操作例如：请求头加上token
}, error => {
  return Promise.reject(error)
})

// HTTP响应拦截
axios.interceptors.response.use(res => {
	//返回code后之后要做的操作例如：token失效后跳到登陆页面
}, error => {
  NProgress.done()
  return Promise.reject(new Error(error))
})

下面是我做过的一个实例

import {serialize} from '@/util/util'
import {getStore} from '../util/store'
import NProgress from 'nprogress' // progress bar
import errorCode from '@/const/errorCode'
import router from "@/router/router"
import {Message} from 'element-ui'
import 'nprogress/nprogress.css'
import store from "@/store"; // progress bar style
axios.defaults.timeout = 30000
// 返回其他状态吗
axios.defaults.validateStatus = function (status) {
  return status >= 200 && status <= 500 // 默认的
}
// 跨域请求，允许保存cookie
axios.defaults.withCredentials = true
// NProgress Configuration
NProgress.configure({
  showSpinner: false
})

// HTTPrequest拦截
axios.interceptors.request.use(config => {
  NProgress.start() // start progress bar
  const isToken = (config.headers || {}).isToken === false
  let token =  store.getters.access_token
  if (token && !isToken) {
    config.headers['Authorization'] = 'Bearer ' + token// token
  }
  if (config.isJson){
    config.headers['Content-Type'] = 'application/json';
  }
  // headers中配置serialize为true开启序列化
  if (config.methods === 'post' && config.headers.serialize) {
    config.data = serialize(config.data)
    delete config.data.serialize
  }
  return config
}, error => {
  return Promise.reject(error)
})
// 4057b18c-4143-48c8-802d-73784cea612d


// HTTPresponse拦截
axios.interceptors.response.use(res => {
  NProgress.done()
  const status = Number(res.status) || 200
  const message = res.data.msg || errorCode[status] || errorCode['default']
  console.log(res.status,status,res.data.code);
  
  if (status === 40||res.data.code == 50) {
    store.dispatch('FedLogOut').then(() => {
      router.push({path: '/login'})
    })
    return
  }

  if (status !== 200 || res.data.code === 1) {
    Message({
      message: message,
      type: 'error'
    })
    return Promise.reject(new Error(message))
  }

  return res
}, error => {
  NProgress.done()
  return Promise.reject(new Error(error))
})

export default axios

引用axios


import request from '@/router/axios'
import {baseUrl} from '@/config/env'

// 添加动态
export function addBanner(query) {
  return request({
    url: baseUrl+'/social/web/text/addTestDynamicDetail',
    method: 'post',
   data: query
  })
}

调用请求

import { addBanner } from '@/api/admin/addTestDynamicDetail'
addBanner(params).then(res => {
  console.log(res)
}).catch((err) => {
  console.log(err);
})

一些常用的状态码

200 OK 请求处理成功，返回相关信息
204 No Content 请求处理成功，但响应报文没有主题返回
206 PartialContent 客户端进行了范围请求，服务器成功执行请求并返回指定范围的实体内容
301 Moved Permanently永久性重定向。请求的资源已经被分配到新的url
302 Found 临时性重定向
304 Not Modified客户端发送附带条件的请求后，服务器允许请求，但内容并没修改，返回304。
400 Bad Request请求报文存在语法错误。需要修正请求报文后再次发送请求
403 Forbidden 请求资源的访问被服务器拒绝。服务器没必要给出拒绝的理由。
404 Not Found 服务器上无法找到被请求的资源
500 Internet Server Error服务器在执行请求时发生了错误。可能是Web应用存在的 bug 或者临时的障碍
503 Service Unavailable 服务器处于超载或者故障状态。如果事先得知何时可以解决故障，可以将时间写入Retry-after首部字段再返回给客户端。