前言
发送请求是前端和后端交互的最重要的途径，也是面试过程中面试官很喜欢问的一个问题，关于前端如何发送请求，你能说出哪些方式呢？日常开发更多可能接触到的是 Ajax、Fetch、Axios 这三种。本文将简单地介绍这三者以及他们的区别。
Ajax
Ajax 全称是 Asynchronous JavaScript And XML，翻译过来就是“异步的 Javascript 和 XML”。Ajax 是一个 技术统称，是一个 概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是 让页面实现局部刷新。
XMLHttpRequest 只是实现 Ajax 的一种方式。其中 XMLHttpRequest 模块就是实现 Ajax 的一种很好的方式。
利用 XMLHttpRequest 模块实现 Ajax：
function ajax(url) {
const xhr = new XMLHttpRequest();
xhr.open("get", url, false);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
console.info("响应结果", xhr.response);
}
};
xhr.send(null);
}
ajax("https://smallpig.site/api/category/getCategory");
优点：减轻服务器压力、支持多种数据格式。
缺点：对 SEO 不友好、可能会导致 XSS、CSRF 等安全问题、开发复杂度高，容易出现回调地狱。
Fetch
Fetch 是一个在 ES6 出现的 API，它是基于 promise 的。它是 XMLHttpRequest 的替代品。
fetch 方法可以接收两个参数 input 和 options。
input参数可以是字符串，包含要获取资源的 URL。也可以是一个 Request 对象。
options 是一个可选参数。一个配置项对象，包括所有对请求的设置。可选的参数有：
method: 请求使用的方法，如 GET、POST。
headers: 请求的头信息，包含与请求关联的 Headers 对象。
body: 请求的 body 信息。注意 GET 或 HEAD 方法的请求不能包含 body 信息。
mode: 请求的模式，如 cors、 no-cors 或者 same-origin。
credentials: 请求的 credentials，如 omit、same-origin 或者 include。为了在当前域名内自动发送 cookie，必须提供这个选项。
示例如下：
function ajaxFetch(url) {
fetch(url)
.then((res) => res.json())
.then((data) => {
console.info(data);
});
}
ajaxFetch("https://smallpig.site/api/category/getCategory");
优点：解决了回调地狱的问题，代码的可读性好，易于维护。
Axios
Axios 是一个基于 promise 封装的 网络请求库，它是基于 XHR 进行二次封装的。
特点：
- 可以从浏览器中创建 XMLHttpRequest，从 node.js 创建 http 请求
- 支持 Promise API
- 可以拦截请求和响应，转换请求数据和响应数据，自动转换 JSON 数据
- 客户端支持防御 XSRF
示例如下：
// 封装 axios
// 实例化 添加请求拦截器和响应拦截器
import axios from "axios";
const http = axios.create({
baseURL: "http://geek.itheima.net/v1_0",
timeout: 5000,
});
// 添加请求拦截器
http.interceptors.request.use(
(config) => {
return config;
},
(error) => {
return Promise.reject(error);
}
);
// 添加响应拦截器
http.interceptors.response.use(
(response) => {
// 2xx 状态码会触发该函数
return response.data;
},
(error) => {
return Promise.reject(error);
}
);
最后
以上就是笔者对 Ajax、Fetch、Axios 这三种实现网络请求方式的简单介绍，如需补充或有不足，欢迎大家在评论区指出......
