封装Axios
。Axios 是一个基于 Promise 的 HTTP 客户端,它可以帮助我们在浏览器和 Node.js 中发送网络请求。它简洁而强大,但是我们可以通过封装它来增加一些额外的功能,让它变得更好用!
好了,让我们来创建一个名为 “SuperAxios” 的类!
class SuperAxios {constructor() {// 在这里初始化一些默认配置,比如请求超时时间、请求头等等this.timeout = 5000;this.headers = {};}// 增加一个风趣的打招呼方法sayHello() {console.log("Hi,我是你的超级网络请求英雄 - SuperAxios!");}// 封装一个GET请求的方法get(url) {return new Promise((resolve, reject) => {setTimeout(() => {// 模拟请求成功resolve(`成功获取来自 ${url} 的数据!`);}, this.timeout);});}// 封装一个POST请求的方法post(url, data) {return new Promise((resolve, reject) => {setTimeout(() => {// 模拟请求成功resolve(`成功向 ${url} 发送数据:${JSON.stringify(data)}`);}, this.timeout);});}// 封装一个DELETE请求的方法delete(url) {return new Promise((resolve, reject) => {setTimeout(() => {// 模拟请求成功resolve(`成功删除来自 ${url} 的数据!`);}, this.timeout);});}// 封装一个PUT请求的方法put(url, data) {return new Promise((resolve, reject) => {setTimeout(() => {// 模拟请求成功resolve(`成功更新 ${url} 的数据:${JSON.stringify(data)}`);}, this.timeout);});}
}// 创建 SuperAxios 实例
const superAxios = new SuperAxios();// 打个招呼
superAxios.sayHello();// 发送GET请求
superAxios.get("https://api.example.com/data").then(response => {console.log(response);}).catch(error => {console.error(error);});
我们刚刚封装了 GET、POST、DELETE 和 PUT 请求的方法。当然,你可以根据自己的需求继续扩展这个类,增加更多功能。
现在,你可以调用 SuperAxios 的方法,它会帮你处理网络请求!不仅仅是网络请求,你可以在构造函数中添加更多的默认配置,比如请求头、请求拦截器等等。封装 Axios 不仅让你的代码更整洁,还能提高代码的可维护性和复用性。