【无标题】

chihtung_hsu

已于 2023-07-26 18:18:29 修改

阅读量297

点赞数

分类专栏：前端文章标签： javascript 前端 json

于 2023-02-21 16:37:32 首次发布

本文链接：https://blog.csdn.net/chitung_hsu/article/details/129145412

版权

前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

http请求参数之Query String Parameters、Form Data、Request Payload

HTTP请求中不同的请求方式和设置不同的Content-Type时，参数传递的方式会不一样，一起了解这三种形式：Query String Parameters、Form Data、Request Payload；

一. GET请求

Query String Parameters

GET请求时，参数会以url string 的形式进行传递，即?后的字符串则为其请求参数，并以&作为分隔符。

General

Request URL: http://test.com?from_type=省&from_name='四川省'
Request Method: GET

Query String Parameters

from_type=省&from_name=‘四川省’

二. Post请求

post请求会出现两种形式的请求体：

2.1 FormData
当发起一次Post请求，若未指定Content-Type，则默认Content-Type为application/x-www-form-urlencoded,即参数会以FormData的形式进行传递，不会显示出现在请求URL中。

因此，若想传送formData，需要将设置Content-Type为multipart/form-data

例如：

export async function uploadFile<R = any>(file: Blob, url='', fileName='img.png') {
    const newFile = file instanceof File ? file : new File([file], fileName);
    const formData = new FormData();
    formData.append(newFile.name, newFile);
    const { data } = await Axios.post<R>(url, formData, {
        headers: {
            'Content-Type': 'multipart/form-data'
        }
    })
    return data
}

补充知识：FormData: https://developer.mozilla.org/zh-CN/docs/Web/API/FormData

2.2 Request Payload

当发起一次post请求，若Content-Type为application/json，则参数会以Request Payload的形式进行传递（数据格式为json）,不会显示出现在请求url中。

注意：在使用ajax跨域请求时，如果设置Header的ContentType为 application/json，它会发两次请求，第一次先发Method为OPTIONS的请求到服务器，
这个请求会询问服务器支持那些请求方法(比如GET,POST)等。如果这个请求支持跨域的话，就会发送第二个请求，否则的话在控制台会报错，第二个请求不会请求。

在这里插入图片描述

在使用axios时，注意到配置选项中包含params和data两者，以为他们是相同的，实则不然。

因为params是添加到url的请求字符串中的，用于get请求。服务器并不会读取http body里面的数据,这样我们传递的就是Params里的请求的参数了。（get请求下data不能用）

而data是添加到请求体（body）中的，服务器读取http body里面的数据那就需要用POST请求了，POST请求的参数就存放在body；（但是post请求下parms可以在特定情况下使用）

1、get请求参数是带在url上的，必须使用params，这个是肯定的，但是post的请求就不一定了
2、 post请求既可以使用params，也可以使用data
区别是：data是放在body里的，在url中看不见参数，但是使用params的话，说明参数在url里面是能够看见的
可以根据不同的情况使用参数传参

实在区分不开，就简单一句话，你能看见的参数，传参就用params，看不见的参数，就用data

params是添加到url的请求字符串中的，一般用于get请求。
data是添加到请求体（body）中的，一般用于post请求。

上面，只是一般情况. 其实，post请求也可以使用params方式传值，但是get请求没有data方式，本文就来介绍一下post的两种传值方式

https://blog.csdn.net/a13683857889/article/details/125711854?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_baidulandingword~default-8-125711854-blog-126400158.235^v38pc_relevant_anti_t3&spm=1001.2101.3001.4242.5&utm_relevant_index=11