react请求数据统一处理（axios）_axios accept-优快云博客

本文介绍了一种通过统一处理所有请求的方式提升开发效率和简化后期维护的方法。具体包括配置axios以解决跨域问题，并通过拦截器管理请求和响应，同时定义了多个API接口以方便调用。

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

开发中为了方便开发和便于维护，我们将所有的请求统一处理。这样可以提高我们的开发效率，而且便于后期的维护。

在src目录下新建文件夹api，创建三个js文件：server.js,serverAPI.config.js,api.js.如下图：

server.js文件处理axios跨域问题。代码如下：


import axios from 'axios';
//取消请求
let CancelToken = axios.CancelToken
axios.create({
    timeout: 15000 ,// 请求超时时间
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
})

//开始请求设置，发起拦截处理
axios.interceptors.request.use(config => {
    //得到参数中的requestname字段，用于决定下次发起请求，取消相应的  相同字段的请求
    //post和get请求方式的不同，使用三木运算处理
    let requestName = config.method === 'post'?config.data.requestName :config.params.requestName
    //判断，如果这里拿到上一次的requestName，就取消上一次的请求
    if(requestName) {
        if(axios[requestName]&&axios[requestName].cancel){
            axios[requestName].cancel()
        }
        config.cancelToken = new CancelToken(c => {
            axios[requestName] = {}
            axios[requestName].cancel = c
        })
    }
    return config
}, error => {
    return Promise.reject(error)
})
// respone拦截器
axios.interceptors.response.use(
    response => {
        const res = response.data;

        //这里根据后台返回来设置
        if (res.msg === "success") {
            return response.data;
        } else {
            return Promise.reject(error);
        }
    },
    error => {
        return Promise.reject(error)
    }
)

export default axios

serverAPI.config.js文件处理所有接口

/***
 * 
 *统一定义接口，有利于维护 
 * 
 **/

const HISTORY= 'https://www.xxxxx.com/';
const URL ={
    histOpen:HISTORY+'type/pagelist',//接口1
    histdata:HISTORY+'type/pagedata' //接口2
}
export default URL

api.js文件，统一定义接口方法

import server from './server';
import url from './serviceAPI.config';

//接口1方法
export function histOpen(data){
    return server({
        url: url.histOpen,
        method: 'post',
        dataType: "json",
	contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        data: data
    })
}

//接口2方法
export function histdata(data){
    return server({
        url: url.histdata,
        method: 'post',
        dataType: "json",
	contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        data: data
    })
}

使用时在需要的组件里面引入api.js,举个栗子

import React from 'react';
import {histOpen} from './../api/api';
export default class Login extends React.Component{
    constructor(props){
        super(props)
        this.state = {
            numbers:[],
            historyList:{//参数
                PageSize:25,
                PageNum:1
            }
        }
    }
    async componentDidMount(){
        const islogin = await histOpen(this.state.historyList);
        this.setState({
            numbers:islogin.datas
        })
     
    }
    render(){
       
        return(
            <div>
                <p>随便填写</p>
            </div>
        )
    }
}