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

 更新时间:2023年02月13日 15:43:15   作者:成续源  
这篇文章主要介绍了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里的地址
      }
    })
  );
};

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • ahooks useRequest源码精读解析

    ahooks useRequest源码精读解析

    这篇文章主要为大家介绍了ahooks useRequest的源码精读解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-07-07
  • React hook 'useState' is called conditionally报错解决

    React hook 'useState' is calle

    这篇文章主要为大家介绍了React hook 'useState' is called conditionally报错解决,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • 详解在React项目中安装并使用Less(用法总结)

    详解在React项目中安装并使用Less(用法总结)

    这篇文章主要介绍了详解在React项目中安装并使用Less(用法总结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • React实现一个拖拽排序组件的示例代码

    React实现一个拖拽排序组件的示例代码

    这篇文章主要给大家介绍了React实现一个拖拽排序组件 - 支持多行多列、支持TypeScript、支持Flip动画、可自定义拖拽区域,文章通过代码示例介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • React深入了解原理

    React深入了解原理

    React是用于构建用户界面的JavaScript库, [1]  起源于Facebook的内部项目,该公司对市场上所有 JavaScript MVC框架都不满意,决定自行开发一套,用于架设Instagram的网站
    2022-07-07
  • React Fragment 和空标签(<></>)用法及区别详解

    React Fragment 和空标签(<></>)用法及区别详解

    本文详细介绍了React中的Fragment和空标签的使用,包括它们的区别、使用场景、性能考虑以及最佳实践,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2025-01-01
  • 解决React报错Invalid hook call

    解决React报错Invalid hook call

    这篇文章主要为大家介绍了React报错Invalid hook call解决方法详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • react express实现webssh demo解析

    react express实现webssh demo解析

    这篇文章主要为大家介绍了详解react express实现webssh demo解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-04-04
  • React+redux项目搭建流程步骤分析

    React+redux项目搭建流程步骤分析

    本文介绍了如何搭建一个React项目,包括创建项目、去除无用文件夹、配置项目、安装craco扩展webpack配置、配置代码格式化、创建路由、集成Redux等步骤,感兴趣的朋友跟随小编一起看看吧
    2025-01-01
  • react native之ScrollView下拉刷新效果

    react native之ScrollView下拉刷新效果

    这篇文章主要为大家详细介绍了react native之ScrollView下拉刷新效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-09-09

最新评论