JS 请求库

基本都是异步的

XHR

XMLHttpRequest 提供了在 JavaScript 中发起 HTTP 请求的能力，支持同步和异步通信，但现代应用中几乎总是使用异步模式。

AJAX

Asynchronous JavaScript and XML，一种在无需刷新整个页面的情况下，与服务器异步交换数据并更新部分网页的技术，主要是对 XHR 的封装。

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

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

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

// 发送请求
xhr.send();

jQuery 提供了简化 AJAX 操作的方法，许多现代框架和库（如 React, Angular, Vue.js）也提供了自己的方式来处理 AJAX 请求

$.get("someurl", function(data) {
    console.log(data);
});

Axios

Axios 是一个基于 Promise 的 HTTP 库

可以拦截请求和响应，转换请求和响应数据，取消请求，自动转换 JSON 数据，客户端支持防御 XSRF 等。

const axios = require('axios');

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

Fetch API

• GET

fetch(
    'https://api.github.com/search/users?q=zuoright',
    {
        method: 'GET',
    }
)
.then(response => response.json())  // 处理响应返回Json格式
.then(data => console.log(data))  // 打印返回数据
.catch((error) => console.error('Error:', error));  // 捕获错误

• POST

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));