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中，这种Content-Type一般用于提交原生的form表单。

对于想通过form表单上传文件、图片等内容，需要将设置Content-Type为multipart/form-data，参数也会以FormData形式传递。

例如：

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)等。如果这个请求支持跨域的话，就会发送第二个请求，否则的话在控制台会报错，第二个请求不会请求。

POST提交数据之—Content-Type的理解