react请求数据统一处理（axios）

本是古典何须时尚 2021-09-16 08:30 630阅读 0赞

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

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

![70][]

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>
            )
        }
    }

[70]: /images/20210908/a0f719ba2ecc42c99796a5b9d0dffd07.png