Axios的封装和API接口的管理_axioslight.js-优快云博客

本文链接：https://blog.youkuaiyun.com/kramer_light/article/details/109016707

本文介绍了一个React项目的API接口封装方法，包括如何通过Promise确保数据获取的正确性，并展示了如何配置不同环境下的服务器地址以方便开发与部署。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目录结构

参考代码环境 React 16.13.1
ywkclbConn.js 封装API接口
config.js 用于配置服务器地址等环境参数
在这里插入图片描述

代码

config.js

此处简单配置 url 地址。
项目上线为生产版本时，应将 url 改为对应后台服务器地址；
若项目处于开发版本，则对应为测试服务器。

// config.js
const url = 'http://localhost:3000';

export default url;

ywkclbConn.js

此处代码封装 API。
利用 Promise，保证在页面使用时能获取服务器返回的数据。

// ywkclbConn.js
import axios from 'axios';
import url from '../config';

function getYwkclb() {
  return new Promise((resolve, reject) => {
    axios.get(`${url}/ywcklb/getData`)
      .then((res) => {
        resolve(res.data);
      })
      .catch((err) => {
        reject(err);
      });
  })
}

export default {
  getYwkclb: getYwkclb
}

src/ywkclb/index.js

componentDidMount 是 React 生命周期，在页面渲染后立即执行的函数

// 引入API
import Conn from '../connection/ywkclbConn';

// 此处省略其他代码

// 初始化获取列表数据
componentDidMount() {
  Conn.getYwkclb()
    .then(res => {
        this.setState({data: res.data, total: res.total,
          pageIndex: res.pageIndex, pageSize: res.pageSize});
    .catch((err) => {
      console.log(err);
    })
}

总结

如上述所言，将API和环境配置单独设置为JS文件，便于代码管理和调试。
当生产环境下的服务器地址变更时可以通过更改config.js快捷更新项目。
当调试时api接口出现问题时还可以快速通过更新对应页面下的接口，从而实现代码分割。
最后，当前端开发时建议同时使用mockjs，通过拦截axios并模拟服务器数据，可以减少前后端团队相互等待的时间。