get && post 请求接口（基于 react ）

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 = 传递的这个对象	对象	——	——

【知识点】

1. 流程
   1. axios拦截请求，并通过get 或 post 方式传递参数
   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
// 如若评论区有需要请给我反馈。

3. 深入理解

// 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
    })
  }