如何使用fetch API实现异步数据获取

fetch API是现代浏览器内置的网络请求接口，基于Promise设计，用于替代传统的XMLHttpRequest实现异步数据获取，支持多种HTTP请求方法和自定义请求配置，使用起来更加符合现代JavaScript的异步编程习惯。

fetch API基本用法

fetch API的核心是一个全局函数fetch，它接收一个请求地址作为参数，返回一个Promise对象，该Promise会在请求完成后解析为Response对象。

发起GET请求获取JSON数据

最常见的场景是发起GET请求获取后端返回的JSON格式数据，基本写法如下：

// 发起GET请求获取用户列表
fetch('https://ipipp.com/api/users')
  .then(response => {
    // 判断响应状态是否成功
    if (!response.ok) {
      throw new Error('请求失败，状态码：' + response.status);
    }
    // 将响应解析为JSON格式
    return response.json();
  })
  .then(data => {
    // 处理获取到的数据
    console.log('获取到的用户数据：', data);
  })
  .catch(error => {
    // 捕获请求或解析过程中的错误
    console.error('请求出错：', error);
  });

发起POST请求提交数据

fetch API支持通过第二个参数配置请求方法、请求头、请求体等信息，发起POST请求的示例如下：

// 发起POST请求提交新用户信息
fetch('https://ipipp.com/api/users', {
  method: 'POST', // 请求方法
  headers: {
    'Content-Type': 'application/json' // 设置请求体格式为JSON
  },
  body: JSON.stringify({ // 请求体数据，需要转为JSON字符串
    name: '张三',
    age: 25,
    email: 'zhangsan@ipipp.com'
  })
})
  .then(response => {
    if (!response.ok) {
      throw new Error('提交失败');
    }
    return response.json();
  })
  .then(result => {
    console.log('提交结果：', result);
  })
  .catch(error => {
    console.error('提交出错：', error);
  });

结合async/await优化异步代码

fetch API基于Promise，因此可以结合async/await语法让异步代码看起来更像同步代码，可读性更强：

// 使用async/await封装fetch请求
async function getUserData() {
  try {
    const response = await fetch('https://ipipp.com/api/users/1');
    if (!response.ok) {
      throw new Error('请求失败，状态码：' + response.status);
    }
    const userData = await response.json();
    console.log('用户详情：', userData);
    return userData;
  } catch (error) {
    console.error('获取用户数据出错：', error);
    throw error; // 可以选择将错误继续抛出给上层处理
  }
}

// 调用封装好的函数
getUserData();

常见注意事项

• fetch请求默认不会携带Cookie，如果需要携带，需要设置credentials参数为include：fetch(url, { credentials: 'include' })
• fetch只有在网络故障时才会 reject，HTTP状态码为404、500等情况不会触发catch，需要手动判断response.ok或者response.status
• Response对象提供了多种解析方法，除了json()，还有text()解析为文本、blob()解析为二进制数据、formData()解析为表单数据等，根据后端返回的数据类型选择对应方法
• 如果需要取消fetch请求，可以结合AbortController实现，示例如下：

// 使用AbortController取消fetch请求
const controller = new AbortController();
const signal = controller.signal;

fetch('https://ipipp.com/api/long-request', { signal })
  .then(response => response.json())
  .then(data => console.log('请求结果：', data))
  .catch(error => {
    if (error.name === 'AbortError') {
      console.log('请求已被取消');
    } else {
      console.error('请求出错：', error);
    }
  });

// 3秒后取消请求
setTimeout(() => {
  controller.abort();
}, 3000);

fetch_API异步数据获取JavaScriptHTTP请求修改时间：2026-07-09 07:27:26