（封装）请求传参、请求方式、请求/响应头

目录

请求

传参

参数：对象形式{a:a,b:b}

get

查询参数?：https:.../search?query=python&page=2

路径参数/： https:.../12345

get、post

请求体：data: params、headers

方法（以post为例）

简化请求axios.post(url, data)

通用请求axios({ url, method: 'post' })：适用复杂参数

请求方式

GET/POST

HEAD（报文首部，验证URI有效性）

PUT/DELETE(报文文件)

OPTIONS（查询URI支持的HTTP方法）:预检请求

HTTP标头：请求/响应/均可

Connection: keep-alive  TCP 就会一直保持连接。

Cache-Control

public：响应可以被任何缓存（客户端/代理服务器）缓存

private：响应只能被客户端缓存

no-cache：不应直接使用缓存的副本，而是需要先进行验证

no-store：响应和请求都不应被缓存，即不在本地存储中保存副本。

max-age=：秒

缓存

If-Modified-Since/Last-Modified

If-None-Match/ETag：服务器生成的资源标识符（哈希值/实体标签）

性能：Last-Modified>ETag

精度：ETag>Last-Modified

主体：服务端响应/客户端请求

Content-Length：字节Byte为单位

Content-Type/Accept：type/subtype ;parameter

应用程序类型（application）：

application/x-www-form-urlencoded （默认）（URL encoded）表单数据被转换成键值对

application/json：JSON 数据（axios传递对象时默认）application/xml：XML 数据

多媒体类型（multipart）：

multipart/form-data：用于在 HTML 表单上传文件时的数据类型。

文本类型（text）：

Content-Encoding/Accept-Encoding

请求头

User-Agent：发起请求的用户代理（浏览器/应用程序）

Host：访问的主机名+端口

Origin：跨域请求时，指示请求的来源

Connection: keep-alive

Accept-Language：客户端 偏好的语言。

凭证Credentials

Authorization：在需要身份验证的情况下，包含用于认证的凭据

withCredentials：是否发送凭据

Cookie: sessionid=abc123; username=johndoe​​

响应头

Set-Cookie：session_id=abcd123; Path=/; HttpOnly

​​​​​Access-Control-Allow-Origin

Access-Control-Allow-Credentials：是否允许在跨域请求中包含凭据Credentials

Server：HTTP服务器的信息

Location：客户端重定向的URL。

Content-Range: bytes -/ 分段下载

Content-Disposition：如何显示响应体，通常用于下载文件

缓存：Cache-Control+max-age（HTTP/1.1）>Expires（HTTP/1.0）

---

请求

传参

参数：对象形式{a:a,b:b}

就算只有一个参数，如果 后续要加参数呢？

get

查询参数?（多个参数）：https:.../search?query=python&page=2

export const getAppConfig = (params: any)  => {
	return axios.get(`${baseTestUrl}/api/app/getAppConfig`, {
		params,
	});
};

getAppConfig({appKey:appKey})

axios.get('/api/resource', {
  params: {
    key1: 'value1',
    key2: 'value2',
  },
});

路径参数/： https:.../username

  // 将 params 拼接到路径中
  const url = `${baseTestUrl}/api/app/getAppConfig/${encodeURIComponent(params.appKey)}`;
  return axios.get(url);

get、post

POST 请求的参数通常是通过 请求体，虽然也可以通过查询、路径参数

请求体：data: params、headers

Authorization 头传递 token：身份认证、权限验证

export const getSchedulesWithAuth = (params: any): any => {
    const url = `${baseDevUrl}/v4`;
    return axios({
        url,
        method: 'get',
        headers: {
            Authorization: `Bearer ${params.token}`,  // 将 token 作为请求头传递
            "Content-Type": "application/x-www-form-urlencoded",//表单数据
        },
    });
};

axios.post('/api/resource', {
  key1: 'value1',
  key2: 'value2',
});

方法（以post为例）

request ： HTTP 请求库，从 2020 年起停止维护，并且官方推荐开发者迁移到其他库（如 axios 或 node-fetch）

简化请求axios.post(url, data)

axios.post('https://example.com/api', {
  name: 'John',
  age: 30
})

通用请求axios({ url, method: 'post' })：适用复杂参数

axios({
  method: 'post',
  url: 'https://example.com/api',
  data: { name: 'John', age: 30 }
})

请求方式

GET/POST

"幂等"：表示对同一资源的多次请求会产生与一次请求相同的结果。GET请求通常用于获取资源，而不会对资源做出改变，因此它们被认为是幂等的。

HEAD（报文首部，验证URI有效性）

PUT/DELETE(报文文件)

OPTIONS（查询URI支持的HTTP方法）:预检请求

发送预检请求的情况

1. 请求方法 ：可能会改变服务器状态的 HTTP 方法（如 PUT、DELETE 等）。
2. 复杂请求

简单请求：

• HTTP 方法： GET、POST 或 HEAD。
• Content-Type ： application/x-www-form-urlencoded、multipart/form-data 或 text/plain。
• 请求头中不包含自定义字段（例如 Authorization）。

HTTP标头：请求/响应/均可

Connection: keep-alive  TCP 就会一直保持连接。

在隔开一段时间之后发送几次没有数据内容的网络请求来判断当前连接是不是应该继续保留。

可能会造成大量的无用途连接，白白占用系统资源

Cache-Control

public：响应可以被任何缓存（客户端/代理服务器）缓存

private：响应只能被客户端缓存

no-cache：不应直接使用缓存的副本，而是需要先进行验证

no-store：响应和请求都不应被缓存，即不在本地存储中保存副本。

max-age=<seconds>：秒

缓存

If-Modified-Since/Last-Modified

如果将资源的最后修改日期Last-Modified<=If-Modified-Since,会 304（Not Modified）

If-None-Match/ETag：服务器生成的资源标识符（哈希值/实体标签）

使用了该头部，即为条件请求，若请求标识符==资源的当前标识符，则304

If-None-Match: "d41d8cd98f00b204e9800998ecf8427e"

根据当前文件的内容，对文件生成唯一的标识，比如MD5算法

条件请求是指客户端在发起请求时附带一些条件，以便服务器根据这些条件来决定是否返回实际的响应内容。

可以理解为代码中的if，输入确定，但输出根据实际情况而不同

性能：Last-Modified>ETag

精度：ETag>Last-Modified

• 编辑了资源文件，但是文件内容并没有更改，这样也会造成缓存失效。
• Last-Modified 能够感知的单位时间是秒，如果文件在 1 秒内改变了多次，那么这时候的 Last-Modified 并没有体现出修改了。

「如果两种方式都支持的话，服务器会优先考虑ETag」。

主体：服务端响应/客户端请求

Content-Length：字节Byte为单位

Content-Length: 123

Content-Type/Accept：type/subtype ;parameter

应用程序类型（application）：

application/x-www-form-urlencoded （默认）（URL encoded）表单数据被转换成键值对

键值对用&连接，键和值之间用=连接。键和值都会进行URL编码username=myusername&password=mypassword

application/json：JSON 数据（axios传递对象时默认）
application/xml：XML 数据

默认UTF-8，二进制方式传输，适用于不依赖于具体的字符编码

多媒体类型（multipart）：

multipart/form-data：用于在 HTML 表单上传文件时的数据类型。

Content-Disposition: form-data; name="avatar"; filename="avatar.jpg"

文本类型（text）：

text/plain：纯文本文件，例如 .txt 文件。
text/html：HTML 文档，用于网页。
text/css：层叠样式表文件，控制网页的样式。
text/xml：XML 数据。

需要Content-Type指定编码（charset=utf-8），纯文本传输

Content-Encoding/Accept-Encoding

Accept-Encoding: gzip, deflate

请求头

User-Agent：发起请求的用户代理（浏览器/应用程序）

Host：访问的主机名+端口

Origin：跨域请求时，指示请求的来源

Origin: https://www.example.com 

Connection: keep-alive

Accept-Language：客户端 偏好的语言。

Accept-Language: en-US,en;q=0.5

凭证Credentials

（例如 cookies、HTTP 认证（用户名和密码）等）

Authorization：在需要身份验证的情况下，包含用于认证的凭据

Authorization: Basic YWxhZGRpbjpvcGVuc2VzYW1l

withCredentials：是否发送凭据

Cookie: sessionid=abc123; username=johndoe​​

响应头

Set-Cookie：session_id=abcd123; Path=/; HttpOnly

​​​​​Access-Control-Allow-Origin

Access-Control-Allow-Credentials：是否允许在跨域请求中包含凭据Credentials

Server：HTTP服务器的信息

Server: Apache/2.4.29 (Ubuntu)

Location：客户端重定向的URL。

Location: https://www.example.com/new-page

Content-Range: bytes <start>-<end>/<total> 分段下载

Content-Disposition：如何显示响应体，通常用于下载文件

Content-Disposition: attachment; filename="document.pdf"

缓存：Cache-Control+max-age（HTTP/1.1）>Expires（HTTP/1.0）