react中axios结合后端实现GET和POST请求方式.docxVIP

第

react中axios结合后端实现GET和POST请求方式

目录reactaxios结合后端实现GET和POST请求get实现方式1（参数直接在url中）get时间方式2（作为JSONString跟在url末尾）post实现（传递JSONObject）react项目axios请求配置axios请求封装总结

reactaxios结合后端实现GET和POST请求

区别在这里不做介绍了，POST方法比GET方法稍微安全一点，GET方法比POST方法要快一些，个人感觉传递单个参数用GET，传递多个参数用POST。

get实现方式1（参数直接在url中）

exportfunctiongetAllSubstationsByUser(){

?returnaxios.get(`/api/integratedEnergy/all/${user}/substations`);

}

??@RequestMapping(value=/all/{user}/all/substations,method=RequestMethod.GET)

??public?ResponseEntityListMapString,ObjectgetAllSubstationsByUserAreas(@PathVariable(user)Stringuser){

??Stringa=user;

??//todo实现方法

}

get时间方式2（作为JSONString跟在url末尾）

?constparams={

???user:admin,

??};

exportfunctiongetAllSubstationsByUser(params){

?returnaxios.get(`/api/integratedEnergy/all/substations`,{params});

}

??@RequestMapping(value=/all/substations,method=RequestMethod.GET)

??publicResponseEntityListMapString,ObjectgetAllSubstationsByUserAreas(@RequestParam(value=user,defaultValue=)Stringuser){

????ListMapString,ObjectmapList=newArrayList();

????Stringa=user;

????//todo实现方法

????returnnewResponseEntity(mapList,HttpStatus.OK);

??}

post实现（传递JSONObject）

constparams={id:admin,name:用户}

exportfunctiongetChildrenDevicesByParent(params){

?returnaxios.post(`/api/integratedEnergy/all/child/devices`,params);

}

??@RequestMapping(value=/all/child/devices,method=RequestMethod.POST)

??publicResponseEntityListMapString,ObjectgetStorageHistoryData(@RequestBodyJSONObjectparams){

??ListMapString,ObjectmapList=newArrayList();

???Stringid=params.getString(id).trim());

???Stringname=params.getString(name).trim());

???//todo实现方法

??returnnewResponseEntity(mapList,HttpStatus.OK);

??}

react项目axios请求配置

axios请求封装

1、安装npmIaxios

2、首先在根目录下建立server.js文件内容如下

importaxiosfromaxios

axios.defaults.baseURL=?//根据项目自己更改

//一些配置，发起请求