我是靠谱客的博主 彩色寒风,最近开发中收集的这篇文章主要介绍get && post 请求接口(基于 react )get && post 请求接口,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

get && post 请求接口

get 和 post 都可以在拦截数据的时候携带数据,那么,他们的相同点和区别是什么?

后端服务器代码:在vue 或 react 学习的基础上,暂时不涉及 nodejs 的后端书写方式,拦截请求的方式相同,如有需要可继续向下看

请求数据时传递实参的格式服务器接受实参的固定变量名(形参)公式query 和 body 在服务器存储的类型请求完毕后返回的值返回数据的方式
get{params:{}}req.queryreq.query = params 后面的内容字符串Promiseres.send({}) /res.json({})
post{}req.bodyreq.body = 传递的这个对象对象————

【知识点】

  1. 流程
    1. axios拦截请求,并通过getpost 方式传递参数
    2. express服务器接收req参数,并进行操作,返回res数据
    3. (看不懂没关系,看代码)
  2. 伪代码版流程
// 引入拦截请求的插件(任何地方都可以用)
 import axios from 'axios'
  // 定义要传递的一个
  let obj = {
    a:1,
    b:2,
    c:3
  }
// 拦截请求 并请求接口
  // get 方式
  // axios.get('/api/list',{params:obj})
  // post 方式
  // axios.post('/api/list',obj)


// 服务器接受请求
// react
在 src 目录下,新建  setupProxy.js 文件
module.exports = (app)=>{
		app.get('/api/list',(req,res)=>{
			// 接收数据
			// get___req.query = obj
			// post__req.body = obj
			// 返回数据
			res.send({})
		})
}
// vue
// 如若评论区有需要请给我反馈。
  1. 深入理解
// get && post 数据传输形式以及如何转换为 json 格式

// 1. 拦截并请求数据


  // axios.get('/api/list',{params:obj})
  //  axios.get('/api/list',{params:{obj}})
  
  //  axios.post('/api/list',obj)
 // axios.post('/api/list',{obj})



// 2. 服务器接收数据

  // 服务器(以 express 服务器为例)——包含在 vue 和 react 中
  module.exports = (app)=>{
}
// 3.
    // body 是字符串,query 是对象
    // 因此使用body时,需要转json格式----用插件 body-parser
    // const bodyParser = require('body-parser')
    // 注册: app.use(bodyParser.json())
// 4.
    // get实参传递的注意点 :
    
    // 第一个是直接传递obj,此时:req.query = {a,b,c}
    // 第二个是传递 {obj},此时:req.query = obj
    // 这些都没什么的,
    // 重点在于:obj的数据类型还是对象吗?

    // 知识点2:query 本身是对象,但当传递的值会转为字符串
        app.get('/api/list',(req,res)=>{
      let {a,b,c} = req.query;
    })
    app.get('/api/list',(req,res)=>{
      let {obj} = req.query;
      console.log(typeof obj);//string
    })
    app.post('/api/list',(req,res)=>{
      let {a,b,c} = req.body;
      console.log(typeof req.body);//string
    })
  }

最后

以上就是彩色寒风为你收集整理的get && post 请求接口(基于 react )get && post 请求接口的全部内容,希望文章能够帮你解决get && post 请求接口(基于 react )get && post 请求接口所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(47)

评论列表共有 0 条评论

立即
投稿
返回
顶部