对于前端同学来说,请求后端接口是一个非常通用的东西。在十几年前的时候,我们还用 Ajax 去请求后端接口。但在 2023 年的今天,很多框架都很成熟了,我们有了更加快捷的方式 ------ Axios 框架。
请求框架哪家强?
对于使用 Vue 技术栈的同学来说,其实接口请求框架就三种:vue-resource、Axios、fetch。对于 vue-resource 和 Axios 来说,它们都是用于在 vue.js 应用中进行 HTTP 请求的工具,但它们有一些区别,下面是一些主要的区别和如何选择的考虑因素:
-
维护状态:
- Vue-resource: Vue-resource 是由 Vue.js 团队开发和维护的,但在Vue 2.0版本后,官方不再推荐使用 Vue-resource,而是推荐使用 Axios 或原生的 fetch。
- Axios: Axios 是一个独立的第三方库,由一个开发者维护,它在Vue社区和其他前端框架中都广受欢迎。
-
功能和特性:
- Vue-resource: Vue-resource 提供了一些与Vue.js集成的特性,如拦截器、Vue组件的资源请求和响应处理等。然而,它的功能相对较少,可能在处理复杂的HTTP场景时不够灵活。
- Axios: Axios 提供了更丰富的功能,支持拦截器、并发请求、取消请求、全局默认配置等特性。它也更灵活,可以轻松地与各种前端框架和工具集成。
-
API 设计:
- Vue-resource: Vue-resource 的API设计比较简单,适合小型项目或初学者使用。
- Axios: Axios 的API设计更为灵活,对于复杂的HTTP请求场景提供了更多的选项和配置,适用于大型和复杂的前端项目。
-
支持度:
- Vue-resource: 在Vue 2.0版本后,官方不再推荐使用 Vue-resource,因此未来可能不会有太多更新和维护。
- Axios: Axios 是一个独立的、活跃维护的项目,得到了广泛的支持,有更多社区贡献和更新。
基于以上考虑,一般而言,推荐使用 Axios,因为它更灵活、功能更强大,并且得到了更广泛的社区支持。 如果你的项目已经在使用 Vue-resource,可能需要考虑迁移到 Axios 或其他更为主流的HTTP库。如果项目较小或是初学者,Vue-resource 也可以满足基本需求。
快速入门
使用 Axios 非常简单,首先需要运行如下代码来安装 Axios 依赖。
shell
npm install axios
随后,我们就可以直接使用 Axios 了,如下代码所示。
vue
import axios from "axios";
axios
.get("/api/data/winTogether/service")
.then(response => {
console.log("request..");
this.service = response.data.service;
})
.catch(error => {
console.log("fail....");
});
如上代码所示,直接引入 axios,随后使用 axios 对象的 get 方法便可发起一个请求。
搭配 Mock.js
很多时候,我们没有对应的后台接口,这时候我们需要自己 Mock 数据,那么我们可以使用 Mock.js 来模拟返回数据。
使用 Mock.js 也很简单,首先安装对应的依赖。
shell
npm install mockjs
随后,我们引入 Mock 对象,并使用 mock() 方法便可模拟返回特定数据,如下代码所示。
vue
import Mock from "mockjs";
// 注意这里的 url 需要与请求的接口保持一致
Mock.mock("/api/data/winTogether/service", {
service: [
{
subtitle: "xxxx网格站加盟",
desc: "通过自有或租赁的仓库进行分拣商品"
}
]
});
二次封装
当你调用接口比较多的时候,你会发觉 Axios 的使用很繁琐,有很多重复的操作。这时候,我们可以对 Axios 进行二次封装,从而来提高我们的开发效率。关于 Axios 的二次开发,网上有很多资料,我自己也找了一些比较不错的,感兴趣的可以看看参考资料部分。