请求的那些事🙆‍♂️

前言💕

  • 前端🤦‍♂️：你的接口又报400了。
  • 后端😡：我的接口没问题，postman请求都是好使的，肯定是你传参的问题。
  • 前端🤷‍♀️:你出来,咱俩掰扯掰扯🤜。
  • 后端🕵️‍♀️：来来来🤛。

拳脚相加的过程中问题解决了😅。上面的问题在工作当中肯定特别容易遇到，都是沟通上的问题今天就简单来说说，前端请求入参和后台接收参数🤞，让后端不在针对你🤣。

前期准备🎶

在工作当中用的最多的请求方式应该就是get或者post了😜,我们先下载postman或者apifox你不是说你用psotman发请求吗，我就按照postman的形式来模拟前端请求😉。

操练起来🏓

GET请求

一般GET请求的传参是把参数包含在URL中。

  • 1.浏览器当前的实现是不允许get发送body,但后端应用可以发送。比如nodejs或postman。
  • 2.特殊情况可以用后端服务转发一下, 因为前端不能使用get方法从浏览器里发送body。
  • 3.get请求携带参数我们都采用params传参。

postman中发起一个带参数的get请求


你可以看到我在url中拼接了参数但是下方的params中自动增加了key和value不管你信不信🤔,但是确实他是自动增加的👀，如果在params中拼写参数，url也会自动增加对应的key和value👏。

在axios中模拟postman发送GET请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 第一种方式
axios
.get('/api/wpfk/getEnterpriseInfo',
{
  params:{
      qymc:"北京星巴克咖啡有限公司大庆万达店"
  }
})
.then(function(res){
   console.log(res)
})
// 第二种方式,多个参数通过&连接 例:a=1&b=2
axios
.get('/api/wpfk/getEnterpriseInfo?qymc=北京星巴克咖啡有限公司大庆万达店',
{
  params:{
     
  }
})
.then(function(res){
   console.log(res)
})

因为涉及到跨域问题,我需要在vue.config.js中做一个代理。

  • vue.config.js
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
      transpileDependencies: true,
      devServer: {
        // 当访问/api/xxx时会被代理到127.0.0.1:3000/xxx
        proxy: {
          '/api': {
            target: 'http://127.0.0.1:3000/',
            pathRewrite: {'^/api' : ''}, 
            changeOrigin: true,
            secure: false,
          },
        }
      }
    })

    如果后端不知道怎么接这些参数你告诉他可以下岗啦🤷‍♀️，我把我熟悉的列在下面，如果你们也是用以下语言做后台，可以直接甩给他😘。

nodeJs express框架接收GET参数

1
2
3
4
5
6
7
8
9
10
11
12
// 第一步: 导入express
const express = require('express');
// 第二步: 创建web服务器
const app = express();
app.get('/wpfk/getEnterpriseInfo',function(req,res,next){
    console.log(req.query)
    res.send('Hello world.')
})
// 第三步: 启动服务器
app.listen(3000, ()=>{
 console.log( ' 300服务启动了' )
 })

python flask框架接收GET参数

1
2
3
4
5
6
7
8
9
10
11
12
13
from flask import Flask,request
app = Flask(__name__)

@app.route('/wpfk/getEnterpriseInfo',methods=["GET","POST"])
def index():
    # 接收get请求参数
    params1 = request.args.get("qymc")
    params2 = request.values.get("qymc")
    print(params1,params2)
    return '<h1>Hello World</h1>'

if __name__ == '__main__':
    app.run()

POST请求

POST请求的消息主体放在body中🕵️‍♀️，服务端根据请求头中的Content-Type字段来获取消息主体的编码⽅式，进⽽进⾏解析数据，我主要来介绍比较常用的一下3种类型👇。

  • application/x-www-form-urlencoded 👀

最常见的POST提交数据的⽅式如果不设置 content-type 属性🥩，默认为application/x-www-form-urlencoded⽅式提交数据🥙，提交的表单数据会转换为键值对并按照 key1=val1&key2=val2 的⽅式进⾏编码key和val都进⾏了URL转码🍞。

  • multipart/form-data 👀

    另⼀个常见的POST数据提交的⽅式😊,Form表单的Content-Type设置为multipart/form-data🛴，它会将表单的数据处理为⼀条消息，以标签为单元，⽤分隔符分开🎑。由于这种⽅式将数据有很多部分🚖，它既可以上传键值对，也可以上传⽂件，甚⾄多个⽂件🐱‍👓。

  • application/json 👀

    Content-Type: application/json作为响应头⽐较常见🍱。实际上，现在越来越多的⼈把它作为请求头🥚，⽤来告诉服务端,消息主体是序列化后的JSON字符串🍞，其中⼀个好处就是JSON格式⽀持⽐键值对复杂得多的结构化数据🥡。

注意：如果您有二进制（非字母数字）数据（或相当大的有效载荷）要传输🍙，请使用multipart/form-data，其他情况建议使用application/x-www-form-urlencoded或者application/json🍗。

postman中发起一个post请求(application/x-www-form-urlencoded)


在postman中选择body下的x-www-form-urlencoded请求头会自动变成Content-Type:application/x-www-form-urlencoded,无需我们手动在去修改请求头🥞。

在axios中模拟postman发送POST请求

  • 第一种方式
    1
    2
    3
    4
    // 如果有多个参数用&连接 但是如果参数过多我们使用这种方式就显得太傻了，建议采用第二种方式
    axios.post("/api/wpfk/getEnterpriseInfo","qymc=xxxxx").then(function (response) {
      console.log(response.data);
    });
  • 第二种方式 引用qs库
    1
    2
    3
    4
    5
    6
    7
    8
    // npm install qs --save 安装qs库
    import qs from 'qs'
    axios.post("/api/wpfk/getEnterpriseInfo",qs.stringify({
        qymc:'xxx'
    })).then(function (response) {
        console.log(response.data);
    });

    nodeJs express框架接收POST参数

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // 第一步: 导入express
    const express = require('express');
    // 如果是post请求需要安装body-parser npm install body-parser --save
    var bodyParser = require('body-parser')
    // 第二步: 创建web服务器
    const app = express();
    // parse application/x-www-form-urlencoded
    app.use(bodyParser.urlencoded({ extended: false }))


    app.post('/wpfk/getEnterpriseInfo',function(req,res,next){
        console.log(req.body.qymc)
        res.send('Hello world.')
    })
    // 第三步: 启动服务器
    app.listen(3000, ()=>{
     console.log( ' 300服务启动了' )
     })

python flask框架接收POST参数

1
2
3
4
5
6
7
8
9
10
11
12
from flask import Flask,request
app = Flask(__name__)

@app.route('/wpfk/getEnterpriseInfo',methods=["GET","POST"])
def index():
    # 接收POST请求参数 Content-Type为application/x-www-form-urlencoded
    params1 = request.values.get("qymc")
    print(params1)
    return '<h1>Hello World</h1>'

if __name__ == '__main__':
    app.run()

postman中发起一个post请求(multipart/form-data)

postman中选择body下form-data请求头会自动变成Content-Type:multipart/form-data,无需我们手动在去修改请求头🍤。

在axios中模拟postman发送POST请求

1
2
3
4
5
6
7
8
9
10
// 需要手动设置请求头
axios.post("/api/wpfk/getEnterpriseInfo",{
    qymc:'formdata'
},{
  headers:{
    'Content-Type': 'multipart/form-data'
  }
}).then(function (response) {
    console.log(response.data);
});

nodeJs express框架接收POST参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 第一步: 导入express
const express = require('express');
// 解析multipart/form-data需要使用express-formidable  
// 下载包 npm install express-formidable
const formidable = require('express-formidable') // 引入
// 第二步: 创建web服务器
const app = express();
app.use(formidable());

app.post('/wpfk/getEnterpriseInfo',function(req,res,next){
    // req.fields; // 非文件项
  	// req.files; // 文件项
    console.log(req.fields.qymc);
    res.send('Hello world.')
})
// 第三步: 启动服务器
app.listen(3000, ()=>{
 console.log( ' 300服务启动了' )
 })

python flask框架接收POST参数

1
2
3
4
5
6
7
8
9
10
11
12
from flask import Flask,request
app = Flask(__name__)

@app.route('/wpfk/getEnterpriseInfo',methods=["GET","POST"])
def index():
    # 接收POST请求参数 Content-Type为multipart/form-data
    params1 = request.form.get("qymc")
    print(params1)
    return '<h1>Hello World</h1>'

if __name__ == '__main__':
    app.run()

postman中发起一个post请求(application/json)



在postman中选择body下的row 右侧类型选择JSON请求头会自动变成Content-Type:application/json,无需我们手动在去修改请求头🍬。

注意：写内容的时候一定要是标准的JSON使用双引号。

在axios中模拟postman发送POST请求

1
2
3
4
5
6
axios.post("/api/wpfk/getEnterpriseInfo", {
    qymc: "applictionJSON",
  })
  .then(function (response) {
     console.log(response.data);
  });

nodeJs express框架接收POST参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 第一步: 导入express
const express = require('express');
// 解析application/json或者application/x-www-form-urlencoded
var bodyParser = require('body-parser')
// 第二步: 创建web服务器
const app = express();
// parse application/x-www-form-urlencoded
// app.use(bodyParser.urlencoded({ extended: false }))

// 解析application/json
app.use(bodyParser.json())

app.post('/wpfk/getEnterpriseInfo',function(req,res,next){
    console.log(req.body.qymc)
    res.send('Hello world.')
})
// 第三步: 启动服务器
app.listen(3000, ()=>{
 console.log( ' 300服务启动了' )
 })

python flask框架接收POST参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
from flask import Flask,request
app = Flask(__name__)

@app.route('/wpfk/getEnterpriseInfo',methods=["GET","POST"])
def index():
    # 接收POST请求参数 Content-Type为application/json
    params1 = request.get_json()['qymc']
    # 或者
    params2 = request.json.get('qymc')
    print(params1,params2)
    return '<h1>Hello World</h1>'

if __name__ == '__main__':
    app.run()

  • 问：为什么不写一个java的接收参数😧。
  • 答：我不会😌!
  • 问：为什么在发起请求的时候 请求类型multipart/form-data需要设置请求头而其他情况不需要设置请求头😧？
  • 实际上在其他请求中设置请求头也是不会出错的🥠，但是由于智能的axios跟postman一样会自动设置不同的请求头，我们就不需要在重新设置啦😙。axios在传递json序列化参数的时候默认的请求头是application/json🥧，所以在请求类型是multipart/form-data的时候需要单独指定请求头🍮，否则就会变成application/json🍣。

总结

以上只是说了比较常用的几种方式，应该可以满足基本的日常工作了🦪，如果你的后端还质疑你的传参就把这篇文章甩过去，愿人间没有400状态码存在！🙏

参考链接

常见的Content-Type类型

技术
Vue NodeJS Axios Python

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！谢谢