概述
get && post 请求接口
get 和 post 都可以在拦截数据的时候携带数据,那么,他们的相同点和区别是什么?
后端服务器代码:在vue 或 react 学习的基础上,暂时不涉及 nodejs 的后端书写方式,拦截请求的方式相同,如有需要可继续向下看
请求数据时传递实参的格式 | 服务器接受实参的固定变量名(形参) | 公式 | query 和 body 在服务器存储的类型 | 请求完毕后返回的值 | 返回数据的方式 | |
---|---|---|---|---|---|---|
get | {params:{}} | req.query | req.query = params 后面的内容 | 字符串 | Promise | res.send({}) /res.json({}) |
post | {} | req.body | req.body = 传递的这个对象 | 对象 | —— | —— |
【知识点】
- 流程
axios
拦截请求,并通过get
或post
方式传递参数express
服务器接收req
参数,并进行操作,返回res
数据- (看不懂没关系,看代码)
- 伪代码版流程
// 引入拦截请求的插件(任何地方都可以用)
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
// 如若评论区有需要请给我反馈。
- 深入理解
// 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 请求接口所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复