JavaScript Fetch API 异步操作怎么实现？数据获取有哪些实用技巧

JavaScript Fetch API是浏览器内置的网络请求接口，基于Promise设计，能够更简洁地发起HTTP请求并处理响应，替代了传统复杂的XMLHttpRequest使用方式。它支持所有现代浏览器，不需要额外引入第三方库就能完成基础的网络请求操作。

Fetch API基础用法

Fetch API的核心方法是fetch()，它接收一个请求地址作为参数，返回一个Promise对象，请求成功后会解析为Response对象，我们可以通过Response对象的方法获取对应格式的响应数据。

发起GET请求

GET请求是Fetch API最常用的场景，默认情况下fetch()发起的就是GET请求，不需要额外配置请求方法。

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

发起POST请求

如果需要发起POST请求，需要在fetch()的第二个参数中配置请求方法、请求头、请求体等信息。

// 发起POST请求新增用户
fetch('https://api.ipipp.com/users', {
  method: 'POST', // 设置请求方法为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(data => {
    console.log('新增用户成功，返回数据：', data);
  })
  .catch(error => {
    console.error('操作出错：', error);
  });

异步操作处理技巧

Fetch API基于Promise，因此可以结合async/await语法让异步代码看起来更像同步代码，提升代码的可读性。

使用async/await优化代码

用async/await改写上面的GET请求示例，代码结构会更清晰，错误处理也更方便。

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

// 调用函数
getUserList();

超时控制实现

Fetch API本身没有内置超时配置，我们可以结合Promise.race方法实现请求超时控制，避免请求长时间无响应。

// 实现带超时的Fetch请求
function fetchWithTimeout(url, options = {}, timeout = 5000) {
  // 创建超时Promise
  const timeoutPromise = new Promise((_, reject) => {
    setTimeout(() => {
      reject(new Error('请求超时'));
    }, timeout);
  });

  // 用Promise.race让请求和超时Promise竞争，先完成的生效
  return Promise.race([
    fetch(url, options),
    timeoutPromise
  ]);
}

// 使用带超时的请求
async function getUserWithTimeout() {
  try {
    const response = await fetchWithTimeout('https://api.ipipp.com/users', {}, 3000);
    if (!response.ok) {
      throw new Error('请求失败');
    }
    const data = await response.json();
    console.log('数据：', data);
  } catch (error) {
    console.error('请求异常：', error.message);
  }
}

实用数据获取技巧

请求头自定义配置

实际开发中经常需要携带认证信息或者自定义请求头，我们可以在fetch()的第二个参数中配置headers字段。

// 携带Token的请求头配置
async function getUserInfo() {
  const token = 'your_auth_token_here';
  try {
    const response = await fetch('https://api.ipipp.com/user/info', {
      headers: {
        'Authorization': 'Bearer ' + token, // 携带认证Token
        'Accept': 'application/json' // 告诉服务端期望的响应格式
      }
    });
    if (!response.ok) {
      throw new Error('获取用户信息失败');
    }
    return await response.json();
  } catch (error) {
    console.error('操作出错：', error);
  }
}

响应数据类型处理

Response对象提供了多种解析响应数据的方法，我们可以根据实际返回的数据类型选择合适的方法。

• response.json()：解析JSON格式的响应数据，返回Promise
• response.text()：解析文本格式的响应数据，返回Promise
• response.blob()：解析二进制大对象数据，比如图片、文件等，返回Promise
• response.arrayBuffer()：解析ArrayBuffer格式的响应数据，返回Promise

比如获取图片资源的示例：

// 获取图片资源并处理
async function loadImage() {
  try {
    const response = await fetch('https://api.ipipp.com/static/logo.png');
    if (!response.ok) {
      throw new Error('图片加载失败');
    }
    const blob = await response.blob();
    // 将blob转为URL创建图片元素
    const imgUrl = URL.createObjectURL(blob);
    const img = document.createElement('img');
    img.src = imgUrl;
    document.body.appendChild(img);
  } catch (error) {
    console.error('加载图片出错：', error);
  }
}

并发请求处理

如果需要同时发起多个请求，可以使用Promise.all或者Promise.allSettled来处理，提升请求效率。

// 并发发起多个请求
async function fetchMultipleData() {
  const requestList = [
    fetch('https://api.ipipp.com/users'),
    fetch('https://api.ipipp.com/orders'),
    fetch('https://api.ipipp.com/products')
  ];

  try {
    // Promise.all要求所有请求都成功，否则直接进入catch
    const responses = await Promise.all(requestList);
    const dataList = await Promise.all(responses.map(res => {
      if (!res.ok) {
        throw new Error('某个请求失败，状态码：' + res.status);
      }
      return res.json();
    }));
    console.log('所有数据：', dataList);
  } catch (error) {
    console.error('并发请求出错：', error);
  }
}

注意事项

Fetch API只有在网络故障导致请求无法完成时才会 reject，HTTP状态码为404、500等错误状态不会触发reject，需要我们手动判断response.ok或者response.status来处理错误。

另外，Fetch API默认不会携带Cookie信息，如果需要携带同域Cookie，需要在配置中添加credentials: 'include'字段，跨域请求携带Cookie还需要服务端配置对应的CORS响应头。

// 携带Cookie的请求配置
fetch('https://api.ipipp.com/user/profile', {
  credentials: 'include' // 携带同域Cookie，跨域时也需要服务端支持
});

JavaScriptFetch_API异步操作数据获取修改时间：2026-07-12 04:36:30