React项目中axios的封装与API接口的管理详解.docxVIP

第

React项目中axios的封装与API接口的管理详解

响应拦截器很好理解，就是服务器返回给我们的数据，我们在拿到之前可以对他进行一些处理。例如上面的思想：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，具体返回的状态码需要处理那些流程还需要跟后台开发人员协商。

上面的message.error()方法时我引入的antd的库提示组件，需要根据你的UI库，对应使用提示组件

api的统一管理

整齐的api就像电路板一样，即使再复杂也能很清晰整个线路。上面说了，我们会新建一个api.js,然后在这个文件中存放我们所有的api接口。

首先我们在api.js中引入我们封装的axios

//导入我们封装好的axios

importservicefrom./index

现在，例如我们有这样一个接口，是一个post请求：

/api/v1/articleEdit

我们可以在api.js中这样封装：

exportconstapiArticleEdit=info=service.post(/api/v1/articleEdit,info);

我们定义了一个apiArticleEdit方法，这个方法有一个参数info，info是我们请求接口时携带的参数对象。而后调用了我们封装的axios方法，第一个参数是我们的接口地址，第二个参数是apiArticleEdit的info参数，即请求接口时携带的参数对象。最后通过export导出apiArticleEdit。

然后在我们的页面中可以这样调用我们的api接口：

importReact,{Component}fromreact

import{apiArticleEdit}from./request/api

exportdefaultclassAppextendsComponent{

componentDidMount(){

//调用api接口，并且提供了两个参数

letparams={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

importaxiosfromaxios;

//引入qs模块，用来序列化post类型的数据

importQSfromqs;

//antd的message提示组件，大家可根据自己的ui组件更改。

import{message}fromantd

//保存环境变量

constisPrd=process.env.NODE_ENV==production;

//区分开发环境还是生产环境基础URL

exportconstbasciUrl=isPrd:

//设置axios基础路径

constservice=axios.create({

baseURL:basicUrl

//请求拦截器

erceptors.request.use(config={

//每次发送请求之前本地存储中是否存在token，也可以通过Redux这里只演示通过本地拿到token

//如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况

//即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断

consttoken=window.localStorage.getItem(userToken)||window.sessionStorage.getItem(userToken);

//在每次的请求中添加token

config.da