JavaScript 102

1. Node.js
2. 闭包
3. 引用类型
4. 原型链
5. 继承
6. DOM
7. 事件
8. 异常处理
9. 单元测试
10. ES6
11. Promise
12. 网络请求
.
网络请求

在这一章节,我们将讨论如何使用 JavaScript 发送网络请求。重点关注 GET 和 POST 请求,并介绍如何使用 AJAX,Fetch API 和 axios 发送这些请求。

GET 请求

GET 请求是最常见的 HTTP 请求类型,通常用于获取服务器上的数据。

在 JavaScript 中,可以使用 fetch 函数发送 GET 请求,如下例所示:

fetch('https://api.github.com/search/users?q=amazingang', {
  method: 'GET',
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Error:', error));

在上述代码中,我们使用 fetch 函数向 URL https://api.github.com/search/users?q=amazingang 发送了一个 GET 请求。然后,我们使用 .then 来处理返回的响应并将其转换为 JSON 格式。最后,我们打印出返回的数据或捕获并打印出任何错误。

POST 请求

POST 请求用于向服务器发送数据。这种请求类型通常用于提交表单。

发送 POST 请求与发送 GET 请求类似,但是需要在 fetch 函数的第二个参数中提供一些额外的选项。具体来说,我们需要设置 method 为 'POST',并提供一个 body,该 body 包含我们要发送的数据。

以下是一个示例:

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    username: '0xAA',
    password: 'pwd',
  }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch((error) => console.error('Request failure:', error));

在上述代码中,我们向同样的 URL 发送了一个 POST 请求,但是这次我们包含了一个请求体,该请求体包含 username 和 password 两个字段的 JSON 数据。请注意,我们也设置了 Content-Type 头部为 application/json,以告诉服务器我们正在发送 JSON 数据。

AJAX

AJAX(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,与服务器交换数据并更新部分网页的技术。AJAX 不是一种新的编程语法,而是使用已有的标准,如 XMLHttpRequest 对象,组合在一起的一种新方式。

以下是一个 AJAX 的例子:

// 创建 XMLHttpRequest 对象
let xhr = new XMLHttpRequest();

// 指定请求的方法和 URL
xhr.open("GET", 'https://api.github.com/search/users?q=amazingang', true);

// 设置回调函数,处理请求的响应
xhr.onreadystatechange = function () {
  // 请求成功
  if (xhr.readyState == 4 && xhr.status == 200)
    // 处理响应数据
    console.log(JSON.parse(xhr.responseText));
}
// 发送请求
xhr.send();

在浏览器的console中执行以上代码,会打印出名字中包含amazingang的github用户

ajax

Fetch API

Fetch API 提供了一种简单、合理的方式来跨网络异步获取资源。它比旧的 XMLHttpRequest 接口更加强大和灵活。Fetch API 返回一个 Promise 对象,表示一个异步操作的最终完成(或失败)及其结果的值。

以下是一个 Fetch API 的例子:

fetch('https://api.github.com/search/users?q=amazingang')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

fetch

Axios

Axios 是一个基于 Promise 的 HTTP 库,可以用在浏览器和 node.js 中。Axios 的主要特点包括:可以拦截请求和响应,转换请求和响应数据,取消请求,自动转换 JSON 数据,客户端支持防御 XSRF 等。

以下是一个 axios 的例子:

const axios = require('axios');

axios.get('https://api.github.com/search/users?q=amazingang')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

axios

总结

以上是 AJAX,Fetch API 和 axios 的简单介绍。在实际开发中,你可以根据你的需求和场景,选择最适合你的技术进行网络请求。

PreviousNext