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

Ianthe ·

更新时间:2024-09-20

· 1976 次阅读

前言

安装

引入

环境的切换

请求拦截

响应拦截

api的统一管理

总结

前言

在react项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。如果还对axios不了解的，可以移步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的全局变量process,process.env.NODE_ENV可以区分是开发环境还是生产环境。


//保存环境变量
const isPrd = process.env.NODE_ENV == 'production';
//区分开发环境还是生产环境基础URL
export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'

这里导出基础URL是为了防止有其他地方用到资源不一样，需要区分生产环境还是开发环境，导入就直接可以用了。

请求拦截

我们在发送请求前可以进行一个请求的拦截，为什么要拦截呢，我们拦截请求是用来做什么的呢？比如，有些请求是需要用户登录之后才能访问的，或者post请求的时候，我们需要序列化我们提交的数据。这时候，我们可以在请求被发送之前进行一个拦截，从而进行我们想要的操作。


//设置axios基础路径
const service = axios.create({
  baseURL: basicUrl
})
// 请求拦截器
service.interceptors.request.use(config => { 
  // 每次发送请求之前本地存储中是否存在token，也可以通过Redux这里只演示通过本地拿到token
  // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
  // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
  const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('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来判断你的登录是否过期，如果没有携带，则说明没有登录过。

响应拦截


// 响应拦截器
service.interceptors.response.use(response => {
  //根据返回不同的状态码做不同的事情
  // 这里一定要和后台开发人员协商好统一的错误状态码
  if (response.code) {
    switch (response.code) {
      case 200:
        return response.data;
      case 401:
        //未登录处理方法
        break;
      case 403:
        //token过期处理方法
        break;
      default:
        message.error(response.data.msg)
    }
  } else { 
    return response;
  }
})
//最后把封装好的axios导出
export default service

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

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

api的统一管理

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

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


//导入我们封装好的axios 
import service from './index'

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


http://www.development.com/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 = process.env.NODE_ENV == 'production';
//区分开发环境还是生产环境基础URL
export const basciUrl = isPrd ? 'https://www.production.com' : 'http://www.development.com'
//设置axios基础路径
const service = axios.create({
  baseURL: basicUrl
})
// 请求拦截器
service.interceptors.request.use(config => { 
  // 每次发送请求之前本地存储中是否存在token，也可以通过Redux这里只演示通过本地拿到token
  // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
  // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
  const token = window.localStorage.getItem('userToken') || window.sessionStorage.getItem('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;
})
// 响应拦截器
service.interceptors.response.use(response => {
  //根据返回不同的状态码做不同的事情
  // 这里一定要和后台开发人员协商好统一的错误状态码
  if (response.code) {
    switch (response.code) {
      case 200:
        return response.data;
      case 401:
        //未登录处理方法
        break;
      case 403:
        //token过期处理方法
        break;
      default:
        message.error(response.data.msg)
    }
  } else { 
    return response;
  }
})
//最后把封装好的axios导出
export default service

总结

到此这篇关于React项目中axios的封装与API接口管理的文章就介绍到这了,更多相关React中axios封装与API接口内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！

封装 api接口 api React

1024 个赞