web API 请求方式：XHR、AJAX、Axios、Fetch 和 Ky

莪_幻尘
573 阅读3分钟

web API 请求的多种方式：XHR、AJAX、Axios、Fetch 和 Ky

在现代 Web 开发中，与服务器的交互是不可或缺的一部分。开发者可以选择多种方式来实现 HTTP 请求，包括 XHR、AJAX、Axios、Fetch 和 Ky。本文将对这些方法进行简单介绍，并比较它们的差异和相似之处，同时提供 GET 和 POST 请求的示例。

简介

  1. XHR（XMLHttpRequest）: 是用于发送 HTTP 请求的原始 JavaScript 方法，语法较为复杂，使用时对浏览器兼容性要求较高。
  2. Ajax: 是一种利用 XHR 或其它技术（如 JavaScript、HTML）实现异步请求的总称，通常指的是前端与后端的数据交互方式。
  3. Axios: 是一个基于 Promise 的库，用于发送 HTTP 请求，支持请求/响应拦截器，具有丰富的功能且易于使用。
  4. Fetch: 是现代浏览器中支持的 API，用于发送网络请求，基于 Promise，使用上更加简洁，但不支持上传进度等。
  5. Ky: 是一个封装了 Fetch 的小型库，提供更易于使用的语法和一些额外的功能，比如默认设置和拦截器。

相同点与不同点

特性XHRAjaxAxiosFetchKy
基本概念XMLHttpRequest 对象包括多项技术基于 Promise 的 HTTP 库基于 Promise 的 API基于 Fetch 的库
支持 Promise否否是是是
跨浏览器支持较差（旧版浏览器）较好（封装）较好（可自动处理）较好（现代浏览器）较好
请求简洁度较复杂较复杂简洁简洁简洁
取消请求支持支持（通过 XHR）支持（通过 Cancel Token）不支持（手动实现）支持（使用 AbortController）
上传进度支持支持（通过 XHR）支持不支持不支持
JSON 解析手动解析手动解析自动解析需要手动解析自动解析
全局拦截器不支持不支持支持不支持支持
响应类型多种多种多种仅限于响应类型仅限于响应类型
浏览器依赖高高低（可用于 Node.js）低（可用于 Service Workers）低
易用性较低较低高中等高

GET 和 POST 请求示例

1. XHR 示例

GET 请求:

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

POST 请求:

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

2. Ajax 示例

GET 请求:

$.ajax({
    url: "https://api.example.com/data",
    type: "GET",
    success: function (data) {
        console.log(data);
    }
});

POST 请求:

$.ajax({
    url: "https://api.example.com/data",
    type: "POST",
    contentType: "application/json",
    data: JSON.stringify({ key: "value" }),
    success: function (data) {
        console.log(data);
    }
});

3. Axios 示例

GET 请求:

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

POST 请求:

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

4. Fetch 示例

GET 请求:

fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

POST 请求:

fetch("https://api.example.com/data", {
    method: "POST",
    headers: {
        "Content-Type": "application/json"
    },
    body: JSON.stringify({ key: "value" })
})
.then(response => response.json())
.then(data => {
    console.log(data);
})
.catch(error => {
    console.error(error);
});

5. Ky 示例

GET 请求:

import ky from 'ky';

ky.get("https://api.example.com/data")
    .json()
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error(error);
    });

POST 请求:

import ky from 'ky';

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

结论

在 Web 开发中，选择合适的 HTTP 请求方式可以提升开发效率和用户体验。XHR 和 AJAX 是传统方法，而 Axios、Fetch 和 Ky 更能满足现代开发的需求。尽管这些方法各有优势和劣势，开发者应根据项目需求和兼容性进行选择。

avatar
文章
阅读
粉丝