Javascrip 之 await fetch(）
await fetch(）怎么理解？
await fetch() 是 JavaScript 中用于处理网络请求的现代语法。
1. 基础概念
fetch() 函数
是浏览器内置的 API，用于发起 HTTP 请求
返回一个 Promise 对象
替代了传统的 XMLHttpRequest
await 关键字
用于等待 Promise 完成
只能在 async 函数中使用
让异步代码看起来像同步代码
2. 基本语法
// 基本格式
const response = await fetch(url, options);
const data = await response.json();
3. 实际示例
示例 1：GET 请求（获取数据）
async function getUserData() {try {// 等待 fetch 完成，获取响应对象const response = await fetch('https://api.example.com/users/1');// 检查响应状态if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}// 等待响应体解析为 JSONconst userData = await response.json();console.log(userData);return userData;} catch (error) {console.error('请求失败:', error);}
}
示例 2：POST 请求（创建数据）
async function createUser(userData) {try {const response = await fetch('https://api.example.com/users', {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify(userData), // 将对象转为 JSON 字符串});if (!response.ok) {throw new Error(`创建失败: ${response.status}`);}const newUser = await response.json();return newUser;} catch (error) {console.error('创建用户失败:', error);}
}// 使用示例
const user = {name: '张三',email: 'zhangsan@example.com',age: 25
};createUser(user);
- 与传统回调方式的对比
传统方式（回调地狱）
// 使用 XMLHttpRequest
function getUsers(callback) {const xhr = new XMLHttpRequest();xhr.open('GET', '/api/users');xhr.onload = function() {if (xhr.status === 200) {callback(null, JSON.parse(xhr.responseText));} else {callback(new Error('请求失败'));}};xhr.onerror = function() {callback(new Error('网络错误'));};xhr.send();
}
// 使用回调
getUsers(function(error, users) {if (error) {console.error(error);return;}console.log(users);
});
现代方式（async/await）
async function getUsers() {try {const response = await fetch('/api/users');if (!response.ok) throw new Error('请求失败');const users = await response.json();return users;} catch (error) {console.error(error);}
}
// 使用方式
const users = await getUsers();
console.log(users);
5. fetch() 的响应对象
fetch() 返回的响应对象包含：
const response = await fetch(url);
// 常用属性
console.log(response.status); // HTTP 状态码，如 200, 404
console.log(response.statusText); // 状态文本，如 "OK", "Not Found"
console.log(response.ok); // 布尔值，表示请求是否成功 (200-299)
console.log(response.headers); // 响应头信息// 常用方法（返回 Promise）
const text = await response.text(); // 获取文本
const json = await response.json(); // 获取 JSON
const blob = await response.blob(); // 获取二进制数据
6. 完整的 CRUD 操作示例
class ApiService {constructor(baseURL) {this.baseURL = baseURL;}// GET - 获取所有用户async getAllUsers() {const response = await fetch(`${this.baseURL}/users`);if (!response.ok) throw new Error('获取用户列表失败');return await response.json();}// GET - 根据ID获取用户async getUserById(id) {const response = await fetch(`${this.baseURL}/users/${id}`);if (!response.ok) throw new Error(`用户 ${id} 不存在`);return await response.json();}// POST - 创建用户async createUser(userData) {const response = await fetch(`${this.baseURL}/users`, {method: 'POST',headers: {'Content-Type': 'application/json',},body: JSON.stringify(userData),});if (!response.ok) throw new Error('创建用户失败');return await response.json();}// PUT - 更新用户async updateUser(id, userData) {const response = await fetch(`${this.baseURL}/users/${id}`, {method: 'PUT',headers: {'Content-Type': 'application/json',},body: JSON.stringify(userData),});if (!response.ok) throw new Error('更新用户失败');return await response.json();}// DELETE - 删除用户async deleteUser(id) {const response = await fetch(`${this.baseURL}/users/${id}`, {method: 'DELETE',});if (!response.ok) throw new Error('删除用户失败');return { success: true, id };}
}
// 使用示例
const api = new ApiService('http://localhost:3000');async function example() {try {// 创建用户const newUser = await api.createUser({name: '李四',email: 'lisi@example.com'});console.log('创建的用户:', newUser);// 获取所有用户const users = await api.getAllUsers();console.log('所有用户:', users);// 更新用户const updatedUser = await api.updateUser(newUser.id, {name: '李四(更新)',email: 'lisi_updated@example.com'});console.log('更新的用户:', updatedUser);// 删除用户const result = await api.deleteUser(newUser.id);console.log('删除结果:', result);} catch (error) {console.error('操作失败:', error);}
}example();
7. 错误处理最佳实践
···javascript
async function safeFetch(url, options = {}) {
try {
const response = await fetch(url, options);
if (!response.ok) {throw new Error(`HTTP ${response.status}: ${response.statusText}`);}return await response.json();
} catch (error) {// 网络错误或解析错误console.error('Fetch 错误:', error);throw error; // 重新抛出让调用者处理
}
}
// 使用
try {
const data = await safeFetch('/api/users');
console.log(data);
} catch (error) {
// 统一错误处理
alert('数据加载失败，请重试');
}
##总结
await fetch() 的核心优势：代码简洁：避免了回调地狱错误处理统一：使用 try-catch 处理所有错误可读性强：异步代码看起来像同步代码现代标准：是当前处理网络请求的推荐方式理解 await fetch() 的关键是明白它在等待两个异步操作：网络请求完成（获取响应对象）数据解析完成（如 .json() 方法）