【JavaScript】发送HTTP请求

文章目录

    • 1. 使用XMLHttpRequest对象
      • 发送GET请求
      • 发送POST请求
    • 2. 使用Fetch API
      • 发送GET请求
      • 发送POST请求
    • 3. 使用Axios库
      • 发送GET请求
      • 发送POST请求
    • 4. 总结

在 Web 开发中, 与服务器进行数据交互是常见的操作,而发送 HTTP 请求是实现这一目标的核心。本篇博客将介绍 JavaScript 中发送 HTTP 请求的几种常见方式,包括使用 XMLHttpRequest 对象、Fetch API 以及 Axios 库。

1. 使用XMLHttpRequest对象

发送GET请求

let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("Response:", xhr.responseText);
  }
};
xhr.send();

在上述例子中,通过创建 XMLHttpRequest 对象,使用 open 方法配置请求方法、URL 和是否异步。然后通过 onreadystatechange 监听状态变化,当状态为 4(表示完成)且状态码为 200 时,表示请求成功,可以获取响应数据。

发送POST请求

let xhr = new XMLHttpRequest();
xhr.open("POST", "https://api.example.com/post", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log("Response:", xhr.responseText);
  }
};
let postData = { key: "value" };
xhr.send(JSON.stringify(postData));

在上述例子中,通过将请求方法改为 POST,并使用 setRequestHeader 设置请求头,然后通过 send 方法发送 JSON 格式的数据。

2. 使用Fetch API

发送GET请求

fetch("https://api.example.com/data")
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then(data => {
    console.log("Data:", data);
  })
  .catch(error => {
    console.error("Fetch error:", error);
  });

在上述例子中,使用 fetch 函数发起 GET 请求,通过 .then() 方法处理响应,并使用 .catch() 方法捕获错误。

发送POST请求

fetch("https://api.example.com/post", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ key: "value" })
})
  .then(response => {
    if (!response.ok) {
      throw new Error("Network response was not ok");
    }
    return response.json();
  })
  .then(data => {
    console.log("Data:", data);
  })
  .catch(error => {
    console.error("Fetch error:", error);
  });

在上述例子中,使用 fetch 函数发起 POST 请求,通过配置 methodheadersbody 选项来发送 JSON 格式的数据。

3. 使用Axios库

Axios 是一个基于 Promise 的 HTTP 客户端,可以在浏览器和 Node.js 中使用。

发送GET请求

axios.get("https://api.example.com/data")
  .then(response => {
    console.log("Data:", response.data);
  })
  .catch(error => {
    console.error("Axios error:", error);
  });

发送POST请求

axios.post("https://api.example.com/post", { key: "value" })
  .then(response => {
    console.log("Data:", response.data);
  })
  .catch(error => {
    console.error("Axios error:", error);
  });

在使用 Axios 时,可以直接调用相应的 HTTP 方法,并使用 .then().catch() 处理响应和错误。

4. 总结

在 JavaScript 中,发送 HTTP 请求的方式有多种,选择适合自己项目需求的方式是很重要的。XMLHttpRequest 提供了基本的功能,Fetch API 提供了更现代的 API,而 Axios 则是一个流行的第三方库,提供了更多便捷的特性。根据项目的需求和个人偏好选择适合的方式进行 HTTP 请求。希望通过本篇博客,你对 JavaScript 中发送 HTTP 请求的几种方式有了更深入的了解。

你可能感兴趣的:(JavaScript,javascript,http,开发语言,前端)