如何用javascript发起HTTP请求_fetch API怎么用？

在前端开发中，使用javascript发起HTTP请求是实现前后端数据交互的基础操作，fetch API是浏览器原生提供的用于发起网络请求的接口，相比传统的XMLHttpRequest，它的语法更简洁，基于Promise设计，更符合现代异步编程的习惯。

fetch API基本语法

fetch API的核心是一个全局函数fetch()，它接收一个必填参数：请求的URL，还可以接收一个可选的配置对象，用来设置请求方法、请求头、请求体等内容。函数调用后会返回一个Promise对象，我们可以通过then和catch链式调用来处理响应和错误。

最基本的GET请求示例如下：

// 发起GET请求获取用户列表
fetch('https://ipipp.com/api/user/list')
  .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请求携带JSON数据

发起POST请求时，需要在配置对象中指定method为POST，设置Content-Type请求头，同时把要发送的数据通过JSON.stringify转换为字符串作为body参数。

// 发起POST请求创建新用户
const newUser = {
  name: '张三',
  age: 25,
  email: 'zhangsan@ipipp.com'
};

fetch('https://ipipp.com/api/user/create', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(newUser)
})
  .then(response => {
    if (!response.ok) {
      throw new Error('创建用户失败');
    }
    return response.json();
  })
  .then(result => {
    console.log('用户创建成功，返回数据：', result);
  })
  .catch(error => {
    console.error('操作出错：', error);
  });

携带请求头与查询参数

如果需要携带自定义请求头，或者给URL添加查询参数，可以直接在配置对象的headers中设置，或者在URL后拼接参数。

// 携带认证token和查询参数的GET请求
const userId = 123;
const token = 'abc123token';

fetch(`https://ipipp.com/api/user/detail?id=${userId}`, {
  method: 'GET',
  headers: {
    'Authorization': `Bearer ${token}`,
    'Accept': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => {
    console.log('用户详情：', data);
  });

响应处理相关说明

fetch的响应对象包含很多有用的属性和方法，常用的有以下这些：

• response.ok：布尔值，表示响应状态码是否在200-299之间
• response.status：响应的HTTP状态码
• response.json()：把响应体解析为JSON对象，返回Promise
• response.text()：把响应体解析为文本字符串，返回Promise
• response.blob()：把响应体解析为Blob对象，适合处理文件下载场景

async/await语法配合fetch使用

因为fetch返回的是Promise对象，我们也可以使用async/await语法来让代码更简洁，避免过多的链式调用。

// 用async/await改写GET请求
async function getUserList() {
  try {
    const response = await fetch('https://ipipp.com/api/user/list');
    if (!response.ok) {
      throw new Error('请求失败');
    }
    const data = await response.json();
    console.log('用户列表：', data);
    return data;
  } catch (error) {
    console.error('获取用户列表出错：', error);
  }
}

// 调用函数
getUserList();

注意事项

fetch默认不会携带Cookie，如果需要携带凭证，需要在配置对象中设置credentials属性为include或者same-origin。

另外，fetch只有在网络故障的情况下才会 reject，HTTP状态码错误（比如404、500）不会触发catch，需要我们手动判断response.ok的状态来处理这类错误。

javascriptfetch_APIHTTP请求异步编程修改时间：2026-06-20 02:33:26