今日聚焦!react axios请求拦截怎么实现

时间:2022-11-09 15:56:16       来源:PHP中文网

本教程操作环境:Windows7系统、react17.0.1版、Dell G3电脑。


(资料图片仅供参考)

react axios请求拦截怎么实现?

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就足够了

/* 统一封装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)        })    })}/* 统一封装post请求  */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("请求超时, 请刷新重试")    }})/* 统一封装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)        })    })}/* 统一封装post请求  */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视频教程》

以上就是react axios请求拦截怎么实现的详细内容,更多请关注php中文网其它相关文章!

关键词: 根据自己 对应状态 是否正常