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

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

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

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

猜你喜欢