react中axios結合後端實現GET和POST請求方式

2023-02-14 06:00:30

react axios結合後端實現GET和POST請求

區別在這裡不做介紹了，POST方法比GET方法稍微安全一點，GET方法比POST方法要快一些，個人感覺傳遞單個引數用GET，傳遞多個引數用POST。

get實現方式1（引數直接在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 實現方法
}

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 實現方法
        return new ResponseEntity<>(mapList, HttpStatus.OK);
    }

post實現（傳遞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 實現方法

    return new ResponseEntity<>(mapList, HttpStatus.OK);
    }

react 專案axios請求設定

axios請求封裝

1、安裝 npm I axios

2、首先在根目錄下建立server.js檔案內容如下

import axios from 'axios'
axios.defaults.baseURL = ''  //根據專案自己更改
//一些設定，發起請求和響應可以列印出來檢視
axios.interceptors.request.use((config)=>{
    //這裡是使用者登入的時候，將token寫入了sessionStorage中了，之後進行其他的介面操作時，進行身份驗證。
    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)
})

這個時候請求介面我們回遇到跨域的問題，接下來告訴你們如何解決跨域

1、在根目錄下建立setupProxy.js檔案內容如下

const proxy = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    proxy.createProxyMiddleware({
      target: 'http://172.21.211.132:8000', // 後臺服務地址以及埠號
      changeOrigin: true, // 是否跨域
      pathRewrite: {
        '^/api': '' // 路徑重寫,用/api代替target裡的地址
      }
    })
  );
};

總結

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。