这篇“react axios请求拦截如何实现”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“react axios请求拦截如何实现”文章吧。
react axios请求拦截的实现方法：1、下载axios；2、在src目录下创建一个utils文件夹用于存放公用js；3、在utils目录下创建http.js文件；4、创建axios实例；5、添加请求拦截器；6、判断cookie有没有存储token，并处理请求头即可。
react 封装axios请求拦截、响应拦截、封装post、get请求
默认你已经创建好了一个react项目
首先我们需要下载axios，我存储用户信息是用react-cookie,你们可以选择使用本地存储
npm i axios --savenpm i react-cookie --save
然后在src目录下创建一个utils文件夹用于存放公用js，
继续utils目录下创建http.js文件。
另一个标记的index.js则是下面会说到的入口文件
打开http.js文件，我们得开始干正事了
如果你已经下载好了axios和cookie则需要引入，其中axios是必须的cookie不是
import axios from "axios";import cookie from 'react-cookies'//这是使用代理的路径，如果你想了解的话可以看我之前的文章或者~~问我let baseUrl = '/api'// 创建axios实例，在这里可以设置请求的默认配置const instance = axios.create({ timeout: 10000, // 设置超时时间10s，如果10秒没有返回结果则中断请求，认为连接超时 baseURL: baseUrl // 根据自己配置的代理去设置不同环境的baseUrl})// 文档中的统一设置post请求头instance.defaults.headers.post['Content-Type'] = 'application/json';// 如果你是上传文件的话需要设置为// instance.defaults.headers.post['Content-Type'] = 'multipart/form-data';
开始请求拦截部分
请求拦截就是在你的请求还没有发送之前，你可以对你的请求做一些修改
instance.interceptors.request.use(config => { var token = cookie.load('token')//获取你登录时存储的token// 判断cookie有没有存储token，有的话加入到请求头里 if (token) { config.headers['token'] = token//在请求头中加入token }// 如果还需要在请求头内添加其他内容可以自己添加 "[]" 内为自定义的字段名 "=" 后的内容为字段名对应的内容 // config.headers['自定义键'] = '自定义内容'// 如果此时觉得某些参数不合理，你可以删除它，删除后将不会发送给服务器// delete config.data.userName // userName是你传递的参数名，或许你可以试着在控制台输出config看看它包含了什么// 对应可以删除也可以在此添加一些参数// config.data.userName = '天道酬勤' return config}, error => { // 对请求错误做些什么 return Promise.reject(error)})
开始响应拦截部分
响应拦截就是在你的接口返回数据后，拦截器会先获取，你可以判断是否正常或数据完好再把数据返回到发起请求的地方
instance.interceptors.response.use(response => { if (response.statusText === 'OK') { return Promise.resolve(response.data) } else { return Promise.reject(response.data.msg) }}, error => {// 请求报错的回调可以和后端协调返回什么状态码，在此根据对应状态码进行对应处理 if (error.response) {// 如401我就让用户返回登录页 if (error.response.status === 401) { this.props.history.push('/login'); }// 比如返回报错你的页面可能会崩溃，你需要在它崩溃之前做一些操作的话，可以在这里 return Promise.reject(error) } else { return Promise.reject('请求超时, 请刷新重试') }})
你添加了请求拦截器，则须使用自定义的请求，否则拦截器将没有意义
一般我都是封装两个请求，一个post、一个get就足够了
export const get = (url, params, config = {}) => { return new Promise((resolve, reject) => { instance({ method: 'get', url, params, ...config }).then(response => { resolve(response) }).catch(error => { reject(error) }) })}export const post = (url, data, config = {}) => { return new Promise((resolve, reject) => { instance({ method: 'post', url, data, ...config }).then(response => { resolve(response) }).catch(error => { reject(error) }) })}
这里已经将封装好的请求方式抛出了，需要在入口文件里引用，设置为全局变量，你也可以在需要的地方按需引入，但我不太建议
入口文件是src目录下的index.js文件，如果不清楚的话上面图片有做标记
import React, { Component } from 'react';import { get, post } from './utils/http';Component.prototype.get = get;Component.prototype.post = post;
使用的话
let data = {userName: 'admin',password: '123456'}// post请求实例this.post("url",data).then(res=>{// 这里是成功回调console.log(res)}).catch(err=>{// 这里是错误回调console.log(err)})// get请求实例this.get("url",data).then(res=>{// 这里是成功回调console.log(res)}).catch(err=>{// 这里是错误回调console.log(err)})
完整代码
import axios from "axios";import cookie from 'react-cookies'let baseUrl = '/api'// 创建axios实例，在这里可以设置请求的默认配置const instance = axios.create({ timeout: 20000, // 设置超时时间10s // baseURL: baseUrl // 根据自己配置的反向代理去设置不同环境的baseUrl})// 文档中的统一设置post请求头。下面会说到post请求的几种'Content-Type'instance.defaults.headers.post['Content-Type'] = 'application/json'instance.interceptors.request.use(config => { var token = cookie.load('token')//获取本地存储的token// 判断cookie有没有存储token，有的话加入到请求头里 if (token) { config.headers['token'] = token//在请求头中加入token }// 如果还需要在请求头内添加其他内容可以自己添加 [] 内为自定义的字段名 = 后的内容为字段名对应的内容 // config.headers['api'] = api return config}, error => { // 对请求错误做些什么 return Promise.reject(error)})instance.interceptors.response.use(response => { if (response.statusText === 'OK') { return Promise.resolve(response.data) } else { return Promise.reject(response.data.msg) }}, error => {// 请求报错的回调可以和后端协调返回什么状态码，在此根据对应状态码进行对应处理 if (error.response) {// 如401我就让用户返回登录页 if (error.response.status === 401) { this.props.history.push('/login'); } return Promise.reject(error) } else { return Promise.reject('请求超时, 请刷新重试') }})export const get = (url, params, config = {}) => { return new Promise((resolve, reject) => { instance({ method: 'get', url, params, ...config }).then(response => { resolve(response) }).catch(error => { reject(error) }) })}export const post = (url, data, config = {}) => { return new Promise((resolve, reject) => { instance({ method: 'post', url, data, ...config }).then(response => { resolve(response) }).catch(error => { reject(error) }) })}
以上就是关于“react axios请求拦截如何实现”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
