react中axios結(jié)合后端實現(xiàn)GET和POST請求方式
react axios結(jié)合后端實現(xiàn)GET和POST請求
區(qū)別在這里不做介紹了,POST方法比GET方法稍微安全一點,GET方法比POST方法要快一些,個人感覺傳遞單個參數(shù)用GET,傳遞多個參數(shù)用POST。
get實現(xiàn)方式1(參數(shù)直接在url中)
- 前端
export function getAllSubstationsByUser() { ? return axios.get(`/api/integratedEnergy/all/${user}/substations`); }
- 后端
? ?@RequestMapping(value = "/all/{user}/all/substations", method = RequestMethod.GET) ? ? public ?ResponseEntity<List<Map<String, Object>>> getAllSubstationsByUserAreas(@PathVariable("user") String user) { ? ? String a = user; ? ? // todo 實現(xiàn)方法 }
get時間方式2(作為JSONString跟在url末尾)
- 前端
? const params = { ? ? ? user: 'admin', ? ? }; ? ?? export function getAllSubstationsByUser(params) { ? return axios.get(`/api/integratedEnergy/all/substations`, { params }); }
- 后端
? ? @RequestMapping(value = "/all/substations", method = RequestMethod.GET) ? ? public ResponseEntity<List<Map<String, Object>>> getAllSubstationsByUserAreas(@RequestParam(value = "user", defaultValue = "") String user) { ? ? ? ? List<Map<String, Object>> mapList = new ArrayList<>(); ? ? ? ? String a = user; ? ? ? ? // todo 實現(xiàn)方法 ? ? ? ? return new ResponseEntity<>(mapList, HttpStatus.OK); ? ? }
post實現(xiàn)(傳遞JSONObject)
- 前端
const params = { id: 'admin', name: '用戶' } export function getChildrenDevicesByParent(params) { ? return axios.post(`/api/integratedEnergy/all/child/devices`, params); }
- 后端
? ?@RequestMapping(value = "/all/child/devices", method = RequestMethod.POST) ? ? public ResponseEntity<List<Map<String, Object>>> getStorageHistoryData(@RequestBody JSONObject params) { ? ? List<Map<String, Object>> mapList = new ArrayList<>(); ?? ?String id = params.getString("id").trim()); ?? ?String name = params.getString("name").trim()); ?? ?// todo 實現(xiàn)方法 ? ? return new ResponseEntity<>(mapList, HttpStatus.OK); ? ? }
react 項目axios請求配置
axios請求封裝
1、安裝 npm I axios
2、首先在根目錄下建立server.js文件內(nèi)容如下
import axios from 'axios' axios.defaults.baseURL = '' ?//根據(jù)項目自己更改 //一些配置,發(fā)起請求和響應(yīng)可以打印出來查看 axios.interceptors.request.use((config)=>{ ? ? //這里是用戶登錄的時候,將token寫入了sessionStorage中了,之后進(jìn)行其他的接口操作時,進(jìn)行身份驗證。 ? ? config.headers.token = localStorage.getItem("cookie"); ? ? return config; }) //在response中 axios.interceptors.response.use(config =>{ ? ? return config; }) const http = { ? ? post:'', ? ? get:'', ? ? getParams:'' }
http.post = function (api, data){ ?// post請求 ? ? return new Promise((resolve, reject)=>{ ? ? ? ? axios.post(api,data).then(response=>{ ? ? ? ? ? ? resolve(response) ? ? ? ? }) ? ? }) } http.get = function (api, data){ // get請求 ? ? return new Promise((resolve, reject)=>{ ? ? ? ? axios.get(api,data).then(response=>{ ? ? ? ? ? ? resolve(response) ? ? ? ? }) ? ? }) } http.getParams = function (api, param){ //get請求 需要傳參 ? ? return new Promise((resolve, reject)=>{ ? ? ? ? axios.get(api, {params: param}).then(response => { ? ? ? ? ? ? resolve(response.data) ? ? ? ? }, err => { ? ? ? ? ? ? reject(err) ? ? ? ? }).catch((error) => { ? ? ? ? ? ? reject(error) ? ? ? ? }) ? ? }) } export default http
3、組件中使用
import http from '../../server'; ?// 首先引入server文件 http.get('api/接口名稱').then(res => { ? ? ? ?console.log(res) }).catch(error => { ? ? ? ?console.error(error) })
這個時候請求接口我們回遇到跨域的問題,接下來告訴你們?nèi)绾谓鉀Q跨域
1、在根目錄下建立setupProxy.js文件內(nèi)容如下
const proxy = require('http-proxy-middleware'); module.exports = function(app) { ? app.use( ? ? '/api', ? ? proxy.createProxyMiddleware({ ? ? ? target: 'http://172.21.211.132:8000', // 后臺服務(wù)地址以及端口號 ? ? ? changeOrigin: true, // 是否跨域 ? ? ? pathRewrite: { ? ? ? ? '^/api': '' // 路徑重寫,用/api代替target里的地址 ? ? ? } ? ? }) ? ); };
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
useEffect?返回函數(shù)執(zhí)行過程源碼解析
這篇文章主要為大家介紹了useEffect?返回函數(shù)執(zhí)行過程源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-04-04React onClick/onChange傳參(bind綁定)問題
這篇文章主要介紹了React onClick/onChange傳參(bind綁定)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02React利用scheduler思想實現(xiàn)任務(wù)的打斷與恢復(fù)
這篇文章主要為大家詳細(xì)介紹了React如何利用scheduler思想實現(xiàn)任務(wù)的打斷與恢復(fù),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-03-03react源碼層分析協(xié)調(diào)與調(diào)度
本文主要介紹了深入理解React協(xié)調(diào)與調(diào)度(Scheduler)原理,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2022-10-10ReactNative實現(xiàn)圖片上傳功能的示例代碼
本篇文章主要介紹了ReactNative實現(xiàn)圖片上傳功能的示例代碼,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-07-07