React项⽬中axios的封装与API接⼝的管理详解
⽬录
前⾔
安装
引⼊
环境的切换
请求拦截
响应拦截
api的统⼀管理
总结
前⾔
在react项⽬中，和后台交互获取数据这块，我们通常使⽤的是axios库，它是基于promise的http库，可运⾏在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。如果还对axios不了解的，可以移步。
安装
//使⽤npm安装
npm install axios;
//使⽤yarn安装
yarn add axios
引⼊
在项⽬根⽬录中，新建⼀个request⽂件夹，然后在⾥⾯新建⼀个index.js和⼀个api.js⽂件。index.js⽂件⽤来封装我们的axios，api.js⽤来统⼀管理我们的接⼝。
//在index.js中引⼊axios
import axios from 'axios';
//引⼊qs模块，⽤来序列化post类型的数据
import QS from 'qs';
//antd的message提⽰组件，⼤家可根据⾃⼰的ui组件更改。
import { message } from 'antd'
环境的切换
我们的项⽬环境可能有开发环境、测试环境和⽣产环境。我们通过node的环境变量来匹配我们的默认的接⼝url前缀。这⾥需要node的全局变量v.NODE_ENV可以区分是开发环境还是⽣产环境。
//保存环境变量
const isPrd = v.NODE_ENV == 'production';
//区分开发环境还是⽣产环境基础URL
export const basciUrl = isPrd ? 'www.production' : 'www.development'
这⾥导出基础URL是为了防⽌有其他地⽅⽤到资源不⼀样，需要区分⽣产环境还是开发环境，导⼊就直接可以⽤了。
请求拦截
我们在发送请求前可以进⾏⼀个请求的拦截，为什么要拦截呢，我们拦截请求是⽤来做什么的呢？⽐如，有些请求是需要⽤户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进⾏⼀个拦截，从⽽进⾏我们想要的操作。
//设置axios基础路径
const service = ate({
baseURL: basicUrl
})
// 请求
quest.use(config => {
// 每次发送请求之前本地存储中是否存在token，也可以通过Redux这⾥只演⽰通过本地拿到token
// 如果存在，则统⼀在http请求的header都加上token，这样后台根据token判断你的登录情况
// 即使本地存在token，也有可能token是过期的，所以在响应中要对返回状态进⾏判断
const token = Item('userToken') || Item('userToken');
//在每次的请求中添加token
config.data = Object.assign({}, config.data, {
token: token,
})
//设置请求头
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
}
config.data = QS.stringify(config.data)
return config
}, error => {
return error;
})
这⾥说⼀下token，⼀般是在登录完成之后，将⽤户的token通过localStorage或者sessionStorage存在本地，然后⽤户每次在进⼊页⾯的时候（即在main.js中），会⾸先从本地存储中读取token，如果token存在说明⽤户已经登陆过，则更新Redux中的token状态。然后，在每次请求接⼝的时候，都会在请求的header中携带token，后台⼈员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。
响应拦截
// 响应
sponse.use(response => {
//根据返回不同的状态码做不同的事情
// 这⾥⼀定要和后台开发⼈员协商好统⼀的错误状态码
if (de) {
switch (de) {
case 200:
return response.data;
case 401:
//未登录处理⽅法
break;
case 403:
//token过期处理⽅法
break;
default:
<(response.data.msg)
}
sessionstorage和localstorage} else {
return response;
}
})
//最后把封装好的axios导出
export default service
响应很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进⾏⼀些处理。例如上⾯的思想：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类型进⾏⼀些我们需要的错误，具体返回的状态码需要处理那些流程还需要跟后台开发⼈员协商。
上⾯的()⽅法时我引⼊的antd的库提⽰组件，需要根据你的UI库，对应使⽤提⽰组件
api的统⼀管理
整齐的api就像电路板⼀样，即使再复杂也能很清晰整个线路。上⾯说了，我们会新建⼀个api.js，然后在这个⽂件中存放我们所有的api接⼝。
⾸先我们在api.js中引⼊我们封装的axios
//导⼊我们封装好的axios
import service from './index'
现在，例如我们有这样⼀个接⼝，是⼀个post请求：
www.development/api/v1/articleEdit
我们可以在api.js中这样封装：
export const apiArticleEdit = info => service.post('/api/v1/articleEdit', info);
我们定义了⼀个apiArticleEdit⽅法，这个⽅法有⼀个参数info，info是我们请求接⼝时携带的参数对象。⽽后调⽤了我们封装
的axios⽅法，第⼀个参数是我们的接⼝地址，第⼆个参数是apiArticleEdit的info参数，即请求接⼝时携带的参数对象。最后通过export导出apiArticleEdit。
然后在我们的页⾯中可以这样调⽤我们的api接⼝：
import React, { Component } from 'react'
import { apiArticleEdit } from './request/api'
export default class App extends Component {
componentDidMount() {
// 调⽤api接⼝，并且提供了两个参数
let params = { type: 2, author: '北孤清茶' }
apiArticleEdit(params).then(res => {
// 获取数据成功后的其他操作
//.....
console.log(res)
})
}
render() {
return (
<div>
</div>
)
}
}
其他的api接⼝，就在api.js中继续往下⾯扩展就可以了。友情提⽰，为每个接⼝写好注释哦
api接⼝管理的⼀个好处就是，我们把api统⼀集中起来，如果后期需要修改接⼝，我们就直接在api.js中到对应的修改就好了，⽽不⽤去每⼀个页⾯查我们的接⼝然后再修改会很⿇烦。关键是，万⼀修改的量⽐较⼤。还有就是如果直接在我们的业务代码修改接⼝，⼀不⼩⼼还容易动到我们的业务代码造成不必要的⿇烦。
好了，最后把完成的axios封装代码奉上。
//在index.js中引⼊axios
import axios from 'axios';
/
/引⼊qs模块，⽤来序列化post类型的数据
import QS from 'qs';
//antd的message提⽰组件，⼤家可根据⾃⼰的ui组件更改。
import { message } from 'antd'
//保存环境变量
const isPrd = v.NODE_ENV == 'production';
//区分开发环境还是⽣产环境基础URL
export const basciUrl = isPrd ? 'www.production' : 'www.development'
//设置axios基础路径
const service = ate({
baseURL: basicUrl
})
// 请求
quest.use(config => {
// 每次发送请求之前本地存储中是否存在token，也可以通过Redux这⾥只演⽰通过本地拿到token
// 如果存在，则统⼀在http请求的header都加上token，这样后台根据token判断你的登录情况
// 即使本地存在token，也有可能token是过期的，所以在响应中要对返回状态进⾏判断
const token = Item('userToken') || Item('userToken');
//在每次的请求中添加token
config.data = Object.assign({}, config.data, {
token: token,
})
//设置请求头
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'
}
//序列化请求参数，不然post请求参数后台接收不正常
config.data = QS.stringify(config.data)
return config
}, error => {
return error;
})
// 响应
sponse.use(response => {
//根据返回不同的状态码做不同的事情
// 这⾥⼀定要和后台开发⼈员协商好统⼀的错误状态码
if (de) {
switch (de) {
case 200:
return response.data;
case 401:
//未登录处理⽅法
break;
case 403:
/
/token过期处理⽅法
break;
default:
<(response.data.msg)
}
} else {
return response;
}
})
//最后把封装好的axios导出
export default service
总结
到此这篇关于React项⽬中axios的封装与API接⼝管理的⽂章就介绍到这了，更多相关React中axios封装与API接⼝内容请搜索以前的⽂章或继续浏览下⾯的相关⽂章希望⼤家以后多多⽀持！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。