axios和fetch的区别
前言
Axios和Fetch都是JavaScript中常用的HTTP请求库。它们有一些相似之处，例如可以在浏览器和Node.js中使用，都支持PromiseAPI等。但是，它们之间也有一些区别：
区别
-
API和用法
Axios和Fetch都提供了一个API来发起HTTP请求，但是它们的用法略有不同。Axios使用一个相对简单的API，它只需要传入一个配置对象即可发起请求，而Fetch需要通过构造一个Request对象来创建请求，然后使用fetch()函数来发起请求。Axios示例：
axios.get('/api/data') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); });Fetch示例：
fetch('/api/data') .then(function(response) { return response.json(); }) .then(function(data) { console.log(data); }) .catch(function(error) { console.log(error); }); -
对于请求的拦截和处理
Axios提供了一个拦截器(interceptor)的功能，可以在请求发送前、请求发送后、响应返回前、响应返回后等各个阶段添加处理函数。这个功能非常强大，可以用于添加公共的请求头、错误处理、请求的取消等。而Fetch则没有提供类似的功能，需要通过手动的方式来处理请求和响应。
-
浏览器兼容性
Fetch是原生的浏览器API，但是它不支持IE11和以下版本的浏览器。而Axios基于XMLHttpRequest实现，可以兼容所有的浏览器，包括IE11。 -
功能扩展
Axios还提供了一些其他的功能，例如文件上传、请求取消、JSONP等，而Fetch没有提供。
总之，Axios和Fetch都是非常优秀的HTTP请求库，选择哪一个取决于个人的需求和偏好。如果需要在IE11及以下浏览器中使用，则必须选择Axios。如果需要使用拦截器、请求取消等高级功能，则可以选择Axios。如果需要在现代浏览器中使用，并且对API的简单性有要求，则可以选择Fetch。
代码示例
import CryptoJS from "crypto-js";
import axios from "axios";
const baseUrl = "https://www.fastmock.site/mock/52a49158b806e9907b4ed46ee3cccc23/mock";
const timestamp = new Date().getTime();
const appToken = "abcd";
const hash = CryptoJS.HmacSHA256(timestamp, appToken).toString();
export function fetchRequest(url = "/api") {
return fetch(baseUrl + url, {
method: "GET", // 请求方法，如为POST请求需要发送body
headers: {
"Content-Type": "application/json",
/**
* Authorization 头通常用于在API请求中携带用户认证信息，以保护API的安全性。
* 例如，某个API需要进行用户身份验证，只有在携带有效的认证信息（例如用户名和密码）的情况下才能够进行访问，
* 这时就可以在API请求的Authorization头中携带认证信息，以实现身份验证的目的。
* 同时，为了保护认证信息的安全性，通常会使用HTTPS协议来加密API请求，以防止信息被恶意截获。
*/
Authorization: `Bearer ${appToken}`,
/*
在Web开发中，Signature通常指的是API请求中的签名信息，用于验证请求的完整性和真实性。通常情况下，
签名信息是由API请求的各个参数按照一定的规则计算得出的，以确保请求的唯一性和完整性，防止请求被篡改或重放攻击。
具体来说，API请求的签名过程通常包括以下几个步骤：
将API请求中的各个参数按照一定的规则拼接起来，形成一个待签名的字符串；
将待签名的字符串使用某种算法（例如HMAC-SHA256）进行加密，生成签名字符串；
将签名字符串添加到API请求的参数中，以便服务器能够验证请求的完整性和真实性。
在API请求的处理过程中，服务器会使用相同的签名算法和密钥对请求的签名信息进行验证，以确保请求的完整性和真实性。
如果请求的签名信息和服务器计算得到的签名信息不一致，则表明请求可能被篡改或伪造，服务器应该拒绝处理该请求，并返回错误信息。
Signature机制通常用于保护API请求的安全性和可靠性，以防止恶意攻击和误操作对API服务造成损失。
在实际开发中，Signature机制通常与HTTPS协议、Access Token等技术一起使用，以构建安全可靠的API服务。
*/
Signature: hash,
Timestamp: timestamp,
},
});
}
export function axiosInstance(url = "/api") {
// 创建一个axios实例
const service = axios.create({
baseURL: baseUrl + url, // API的基础路径
timeout: 3000, // 请求超时时间
});
// 添加请求拦截器
service.interceptors.request.use(
(config) => {
// 在请求发送之前做些什么
config.headers["Authorization"] = "Bearer " + appToken;
config.headers["Signature"] = hash;
config.headers["Timestamp"] = timestamp;
config.headers["Content-Type"] = "application/json;charset=UTF-8";
return config;
},
(error) => {
/*
对请求错误做些什么：常见为一下几种：
显示错误提示：如果API请求失败，通常需要向用户显示错误提示，以便用户能够了解错误原因并进行相应的处理。
重试请求：如果API请求失败，可以尝试重新发送请求，以提高请求的成功率。通常会设置重试次数和重试间隔等参数，以防止过度请求和服务器负载过大等问题。
缓存数据：如果API请求失败，可以尝试从缓存中获取已有的数据，以提供给用户进行展示。在后续请求时，可以尝试更新缓存数据，以保持数据的最新状态。
日志记录：如果API请求失败，可以将错误信息记录到日志中，以便开发人员进行分析和排查。通常会记录错误的时间、请求参数、错误信息、堆栈信息等内容。
抛出异常：如果API请求失败，可以将错误信息封装成异常对象，以便于后续进行处理和捕获。通常会包括错误代码、错误信息、错误原因等内容。
*/
return Promise.reject(error);
}
);
// 添加响应拦截器
service.interceptors.response.use(
(response) => {
/*
对响应数据做些什么：常见为以下几种
解析响应数据：如果API请求成功，通常需要解析响应数据，以提取出需要的数据和信息，以供后续的处理和展示。
更新页面状态：如果API请求成功，可以根据响应数据更新页面状态，以展示数据和反馈操作结果。例如，可以更新页面内容、刷新表格、提示用户操作成功等。
跳转页面：如果API请求成功，并需要进行页面跳转，可以使用路由组件进行跳转，以展示相关页面。例如，可以跳转到详情页面、编辑页面、列表页面等。
缓存数据：如果API请求成功，可以将响应数据进行缓存，以提高下次请求的速度和效率。例如，可以使用LocalStorage、SessionStorage等进行数据存储。
日志记录：如果API请求成功，可以将响应数据记录到日志中，以便开发人员进行分析和优化。通常会记录请求时间、响应数据、请求参数等内容。
*/
return response.data;
},
(error) => {
// 对响应错误做些什么
return Promise.reject(error);
}
);
return service;
}
