weather-app开发手记 01 HTTP请求基础 | Axios GET 请求

1 HTTP 请求基础

HTTP 01 概述-CSDN博客

原本这个概述博客已经讲得很清楚了，可以回顾一下看看实际开发的HTTP请求的应用场景。

GET 是安全且幂等的，POST 既不安全也不幂等

1. 明确两个概念

安全：请求不会 "修改 / 破坏" 服务器资源（只是读，不是写）。
幂等：多次执行同一个操作，结果完全一样。

2. GET 的情况

GET 是 "只读" 操作（比如查数据）：

安全：只获取资源，不会改服务器数据，所以安全。
幂等：查 1 次和查 100 次，服务器数据不会变，结果一样，所以幂等。→ 因此 GET 能被缓存（浏览器 / 代理都能存）、能存为书签。

3. POST 的情况

POST 是 "新增 / 提交数据" 操作（比如提交表单、创建内容）：

不安全：会修改服务器资源（比如新增一条数据），所以不安全。
不幂等：提交 1 次新增 1 条，提交多次就新增多条，结果不一样，所以不幂等。→ 因此 POST 一般不能缓存、不能存为书签。

HTTP 请求 - 响应

核心流程

建立连接：传统 HTTP 基于 TCP/IP；HTTP/2 用基于 TCP 的二进制协议，HTTP/3 用基于 UDP 的 QUIC 协议。
发送请求：客户端向服务器传递信息，包含 URL、请求方法（GET/POST 等）、请求头，POST/PUT 类请求还会带请求体。
处理请求：服务器接收请求后，执行资源查找、数据检索、内容生成等操作。
发送响应：服务器返回结果，包含状态码（表示请求成功 / 失败）、响应头、响应体（如网页、图片）。
关闭连接：单次请求完成后连接可关闭，HTTP/1.1 支持 "keep-alive" 持久连接以复用连接。

补充说明

HTTP 是互联网核心的应用层协议，该模型是 Web 通信的基础逻辑 ------ 客户端发起请求、服务器返回响应，不同 HTTP 版本（1.1/2/3）通过优化传输协议来提升效率（如 HTTP/3 的 QUIC 可减少延迟）。

HTTP 请求方法 | 菜鸟教程

核心区别、参数传递、请求头的作用

一、GET/POST 请求的核心区别

维度	GET	POST
语义	获取资源（只读）	提交 / 修改资源（写入）
安全性	安全（不修改服务器资源）	不安全（会修改服务器资源）
幂等性	幂等（多次请求结果一致）	不幂等（多次请求可能产生不同结果）
缓存	可缓存（浏览器 / 代理支持）	通常不可缓存
书签 / 历史	可存为书签、记录在历史中	不可存为书签、不记录在历史中

二、参数传递方式

GET 的参数传递：
- 直接拼接在 URL 末尾，格式为 URL?参数名1=值1&参数名2=值2（例：https://example.com/user?id=123&name=test）。
- 缺点：参数长度受 URL 长度限制（不同浏览器 / 服务器限制不同，通常不超过 2KB），且参数会暴露在 URL 中（不适合敏感信息）。
POST 的参数传递：
- 参数放在**请求体（Request Body）**中，不会显示在 URL 里。
- 支持多种格式（如表单application/x-www-form-urlencoded、JSONapplication/json、文件multipart/form-data等）。
- 优点：参数长度无明确限制，可传递敏感信息（需配合 HTTPS 加密）。

三、请求头的作用

请求头是 HTTP 请求中 "描述请求属性" 的键值对，核心作用是让服务器理解请求的需求，常见请求头及作用：

User-Agent：告诉服务器客户端的设备 / 浏览器类型（例：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 ...）。
Accept：告诉服务器客户端能接收的响应格式（例：text/html,application/json）。
Content-Type：仅 POST/PUT 等请求使用，说明请求体的格式（例：application/json表示请求体是 JSON）。
Cookie：传递客户端的 Cookie 信息，用于身份识别、会话保持。
Authorization：传递身份验证信息（例：Bearer token用于接口鉴权）。

GET 请求的使用方式

GET 请求是最常用的 HTTP 请求方法，核心用法是 "获取资源"，不同场景下的使用方式如下：

一、日常浏览网页（自动触发 GET）

你在浏览器地址栏输入网址（比如https://www.baidu.com），按下回车后，浏览器会自动发送 GET 请求，获取百度首页的 HTML 资源并展示 ------ 这是最常见的 GET 使用场景，不需要你手动操作。

二、开发中用 GET 获取数据（3 种常见方式）

1. 浏览器直接访问（简单测试）

如果要获取某个接口的资源，直接在浏览器地址栏输入接口 URL（带参数），回车即可触发 GET 请求：例：https://api.example.com/user?id=123→ 浏览器会显示接口返回的结果（比如 JSON 数据）。

2. 用工具（Postman）调 GET 接口

步骤：

打开 Postman，选择请求方法为GET；
输入接口 URL（如需传参，直接拼在 URL 后，比如https://api.example.com/user?id=123）；
点击 "Send"，即可看到服务器返回的响应结果。

3. 代码中发送 GET 请求（以 Python 为例）

用requests库发送 GET 请求，无需手动拼参数（库会自动处理）：

python 复制代码

import requests

# 方式1：参数直接拼在URL中
url1 = "https://api.example.com/user?id=123&name=test"
response1 = requests.get(url1)

# 方式2：用params参数传参（更规范）
url2 = "https://api.example.com/user"
params = {"id": 123, "name": "test"}  # 字典形式传参
response2 = requests.get(url2, params=params)

# 打印结果
print(response2.json())  # 假设返回的是JSON数据

三、GET 的使用注意事项

只能用于 "获取资源"，不能用于提交 / 修改数据；
参数会暴露在 URL 中，不要用 GET 传递密码、身份证等敏感信息；
参数长度有限制（通常不超过 2KB），不适合传大量数据。

2 Axios GET 请求

基本用例 | Axios Docs

Axios 发送 GET 请求的常见配置说明

axios 的 get 方法核心格式：axios.get(url[, config])，其中 config 是配置对象，包含请求头、参数、超时、拦截等关键配置，以下是开发中最常用的配置项，附示例和说明：

配置项	作用	示例（GET 请求场景）
`params`	拼接在 URL 后的查询参数（自动编码，推荐用这个而非手动拼 URL）	`params: { id: 123, name: "张三" }`
`headers`	自定义请求头（告诉服务器请求的额外信息）	`headers: { "Token": "abc123", "Accept": "application/json" }`
`timeout`	请求超时时间（毫秒），超时则触发错误	`timeout: 5000`（5 秒超时）
`paramsSerializer`	自定义参数序列化规则（解决特殊字符、数组参数拼接问题）	见下方示例
`responseType`	指定响应数据的格式（默认`json`）	`responseType: "text"`（返回纯文本）
`withCredentials`	跨域请求时是否携带 Cookie / 认证信息（需后端配合）	`withCredentials: true`
`baseURL`	基础 URL（全局配置更常用，拼接在请求 URL 前）	全局：`axios.defaults.baseURL = "https://api.example.com"`
`onDownloadProgress`	监听下载进度（比如获取大文件时）	见下方示例

完整示例（含核心配置）

javascript 复制代码

import axios from 'axios';

// 方式1：单次请求配置
axios.get('/user', {
  // 1. 核心：URL参数（自动拼为 ?id=123&name=张三&hobby=篮球&hobby=游戏）
  params: {
    id: 123,
    name: "张三",
    hobby: ["篮球", "游戏"] // 数组参数自动处理
  },
  // 2. 自定义请求头（鉴权、指定接收格式等）
  headers: {
    "Authorization": "Bearer " + localStorage.getItem("token"), // 接口鉴权
    "User-Agent": "frontend-app/1.0", // 自定义客户端标识
    "Accept": "application/json" // 只接收JSON格式响应
  },
  // 3. 超时配置（5秒没响应则报错）
  timeout: 5000,
  // 4. 自定义参数序列化（解决数组/特殊字符问题）
  paramsSerializer: {
    serialize: (params) => {
      // 比如数组参数想拼为 hobby=篮球,游戏 而非 hobby[]=篮球
      return new URLSearchParams(params).toString().replace(/%5B%5D=/g, '=');
    }
  },
  // 5. 跨域带Cookie
  withCredentials: true,
  // 6. 指定响应格式（默认json，可选text/blob/arraybuffer等）
  responseType: "json",
  // 7. 监听下载进度（比如获取大文件）
  onDownloadProgress: (progressEvent) => {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(`下载进度：${percentCompleted}%`);
  }
})
.then(response => {
  console.log("响应数据：", response.data);
  console.log("响应状态码：", response.status);
  console.log("响应头：", response.headers);
})
.catch(error => {
  // 错误处理（区分超时、404、500等）
  if (error.code === 'ECONNABORTED') {
    console.error("请求超时！");
  } else if (error.response) {
    // 服务器返回了错误响应（4xx/5xx）
    console.error("状态码：", error.response.status);
    console.error("错误数据：", error.response.data);
  } else {
    console.error("请求失败：", error.message);
  }
});

// 方式2：全局配置（所有GET/POST请求通用）
axios.defaults.baseURL = "https://api.example.com"; // 统一接口前缀
axios.defaults.timeout = 10000; // 全局超时10秒
axios.defaults.headers.common['Token'] = "global-token-123"; // 全局请求头

关键注意点

params 会自动编码特殊字符（比如空格→%20、中文→UTF-8 编码），无需手动处理；
跨域时 withCredentials: true 必须配合后端设置 Access-Control-Allow-Credentials: true 才生效；
timeout 只限制 "请求发送到收到响应" 的时间，不包含 DNS 解析、连接建立的时间；
如果需要取消请求（比如页面跳转时中断未完成的 GET 请求），可结合 AbortController 使用（进阶场景，需要的话可补充）。