chapter 6 (Axios)
Axios
基本概念
Axios 是一个流行的 HTTP 客户端库，用于发送 HTTP 请求。它支持多种 HTTP 方法（如 GET、POST、PUT、DELETE 等），并且可以在浏览器和 Node.js 环境中使用。Axios 的主要特点包括：
- 基于 Promise: 使用 Promise 语法，支持
async/await，使代码更简洁和易于阅读。 - 拦截请求和响应: 可以拦截请求和响应，在请求或响应被处理之前执行自定义逻辑。
- 转换请求和响应数据: 可以在请求发送之前或响应接收之后转换数据。
- 取消请求: 可以取消正在进行的请求。
- 自动转换 JSON: 自动将请求数据转换为 JSON 格式，将响应数据解析为 JavaScript 对象。
- 客户端支持防御 XSRF: 提供内置的 XSRF 防护机制。
安装 Axios
你可以通过 npm 或 yarn 安装 Axios。
使用 npm:
npm install axios使用 yarn:
yarn add axios基本用法
1. 发送 GET 请求
示例:
import axios from 'axios'
axios.get('https://2a56afb0-4ca4-4f09-84b2-49bf7a8c9d57.mock.pstmn.io/course_3')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.error('Error fetching data:', error)
})解释:
- axios.get: 发送 GET 请求到指定的 URL。
- then: 处理成功的响应。
- catch: 处理请求错误。
2. 发送 POST 请求
示例:
import axios from 'axios'
axios.post('https://api.example.com/data', {
firstName: 'John',
lastName: 'Doe'
})
.then(response => {
console.log(response.data)
})
.catch(error => {
console.error('Error posting data:', error)
})解释:
- axios.post: 发送 POST 请求到指定的 URL，并传递数据。
- then: 处理成功的响应。
- catch: 处理请求错误。
3. 使用 async/await
示例:
import axios from 'axios'
async function fetchData() {
try {
const response = await axios.get('https://api.example.com/data')
console.log(response.data)
} catch (error) {
console.error('Error fetching data:', error)
}
}
fetchData()解释:
- async/await: 使用
async/await语法简化异步代码。 - try/catch: 处理请求错误。
配置 Axios
你可以通过配置 Axios 来设置默认的请求选项，例如基础 URL、请求头等。
示例:
import axios from 'axios'
const instance = axios.create({
baseURL: 'https://api.example.com',
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer YOUR_ACCESS_TOKEN'
}
})
instance.get('/data')
.then(response => {
console.log(response.data)
})
.catch(error => {
console.error('Error fetching data:', error)
})解释:
- axios.create: 创建一个 Axios 实例，并设置默认的请求选项。
- baseURL: 设置基础 URL，后续请求会自动添加这个前缀。
- headers: 设置请求头，例如
Content-Type和Authorization。
请求方法
Axios 支持多种 HTTP 请求方法：
- GET: 请求数据。
- POST: 提交数据。
- PUT: 更新数据。
- DELETE: 删除数据。
- PATCH: 部分更新数据。
- HEAD: 获取响应头。
- OPTIONS: 获取支持的 HTTP 方法。
拦截请求和响应
你可以使用拦截器在请求发送之前或响应接收之后执行自定义逻辑。
示例:
import axios from 'axios'
// 请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
config.headers.Authorization = 'Bearer YOUR_ACCESS_TOKEN'
return config
},
error => {
// 对请求错误做些什么
return Promise.reject(error)
}
)
// 响应拦截器
axios.interceptors.response.use(
response => {
// 对响应数据做点什么
return response
},
error => {
// 对响应错误做点什么
return Promise.reject(error)
}
)解释:
- 请求拦截器: 在请求发送之前执行自定义逻辑，例如添加请求头。
- 响应拦截器: 在响应接收之后执行自定义逻辑，例如处理错误。
取消请求
你可以取消正在进行的请求。
示例:
import axios from 'axios'
const CancelToken = axios.CancelToken
const source = CancelToken.source()
axios.get('https://api.example.com/data', {
cancelToken: source.token
})
.then(response => {
console.log(response.data)
})
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('Request canceled', thrown.message)
} else {
// 处理错误
console.error('Error fetching data:', thrown)
}
})
// 取消请求
source.cancel('Operation canceled by the user.')解释:
- CancelToken: 创建一个取消令牌。
- cancelToken: 在请求配置中添加取消令牌。
- source.cancel: 取消请求并传递取消消息。
localStorage
基本概念
LocalStorage 是一种在客户端存储数据的机制，属于 Web Storage API 的一部分。它允许你在用户的浏览器中存储数据，并在不同的页面和会话中访问这些数据。LocalStorage 的主要特点包括：
- 持久化存储: 数据不会过期，除非被显式删除。
- 同源策略: 只有同源的网页可以访问同一份 LocalStorage 数据。
- 存储限制: 通常每个域名可以存储约 5MB 的数据。
- 同步操作: LocalStorage 的操作是同步的，可能会阻塞主线程，因此不适合存储大量数据或频繁操作。
基本用法
1. 存储数据
使用 localStorage.setItem(key, value) 方法存储数据。
示例:
localStorage.setItem('username', 'JohnDoe')
localStorage.setItem('age', '30')解释:
- localStorage.setItem(‘username’, ‘JohnDoe’): 存储键为
username，值为JohnDoe的数据。 - localStorage.setItem(‘age’, ’30’): 存储键为
age，值为30的数据。
2. 读取数据
使用 localStorage.getItem(key) 方法读取数据。
示例:
const username = localStorage.getItem('username')
const age = localStorage.getItem('age')
console.log(username) // 输出: JohnDoe
console.log(age) // 输出: 30解释:
- localStorage.getItem(‘username’): 读取键为
username的数据。 - localStorage.getItem(‘age’): 读取键为
age的数据。
3. 删除数据
使用 localStorage.removeItem(key) 方法删除特定键的数据。
示例:
localStorage.removeItem('username')解释:
- localStorage.removeItem(‘username’): 删除键为
username的数据。
4. 清空所有数据
使用 localStorage.clear() 方法清空所有存储的数据。
示例:
localStorage.clear()解释:
- localStorage.clear(): 清空所有存储在 LocalStorage 中的数据。
数据类型
LocalStorage 只能存储字符串类型的数据。如果需要存储对象或其他复杂数据类型，需要先将其转换为 JSON 字符串。
示例:
// 存储对象
const user = { name: 'JohnDoe', age: 30 }
localStorage.setItem('user', JSON.stringify(user))
// 读取对象
const parsedUser = JSON.parse(localStorage.getItem('user'))
console.log(parsedUser.name) // 输出: JohnDoe
console.log(parsedUser.age) // 输出: 30解释:
- JSON.stringify(user): 将对象
user转换为 JSON 字符串。 - JSON.parse(storedUser): 将 JSON 字符串转换回对象。
使用场景
- 用户偏好设置: 存储用户的偏好设置，如主题、语言等。
- 会话数据: 存储用户的登录状态、会话信息等。
- 临时数据: 存储临时数据，如表单数据、搜索历史等。
🧐