亚洲激情专区-91九色丨porny丨老师-久久久久久久女国产乱让韩-国产精品午夜小视频观看

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

react中axios怎么結合后端實現GET和POST請求

發布時間:2023-02-14 09:28:05 來源:億速云 閱讀:123 作者:iii 欄目:開發技術

這篇文章主要講解了“react中axios怎么結合后端實現GET和POST請求”,文中的講解內容簡單清晰,易于學習與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學習“react中axios怎么結合后端實現GET和POST請求”吧!

    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里的地址
          }
        })
      );
    };

    感謝各位的閱讀,以上就是“react中axios怎么結合后端實現GET和POST請求”的內容了,經過本文的學習后,相信大家對react中axios怎么結合后端實現GET和POST請求這一問題有了更深刻的體會,具體使用情況還需要大家實踐驗證。這里是億速云,小編將為大家推送更多相關知識點的文章,歡迎關注!

    向AI問一下細節

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    AI

    灵武市| 尼勒克县| 青浦区| 平泉县| 驻马店市| 礼泉县| 扶风县| 拉萨市| 稻城县| 饶阳县| 娄烦县| 乐山市| 屯昌县| 焦作市| 灵寿县| 漯河市| 错那县| 社会| 仪征市| 武陟县| 文昌市| 大姚县| 阜新| 呼玛县| 青冈县| 松阳县| 德化县| 来安县| 苏尼特右旗| 上虞市| 准格尔旗| 搜索| 深水埗区| 托克逊县| 治多县| 灵山县| 闵行区| 陕西省| 沂南县| 视频| 永州市|