react 把前后台的axios请求放在一起_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(

随便填写

)

}

}

---------------------

作者：影夜随风

来源：

原文：https://blog..net/qq_39197547/article/details/82657405

版权声明：本文为博主原创文章，转载请附上博文链接！