从零开始用 Axios 请求后端接口

对于前端同学来说,请求后端接口是一个非常通用的东西。在十几年前的时候,我们还用 Ajax 去请求后端接口。但在 2023 年的今天,很多框架都很成熟了,我们有了更加快捷的方式 ------ Axios 框架。

请求框架哪家强?

对于使用 Vue 技术栈的同学来说,其实接口请求框架就三种:vue-resource、Axios、fetch。对于 vue-resource 和 Axios 来说,它们都是用于在 vue.js 应用中进行 HTTP 请求的工具,但它们有一些区别,下面是一些主要的区别和如何选择的考虑因素:

  1. 维护状态:

    • Vue-resource: Vue-resource 是由 Vue.js 团队开发和维护的,但在Vue 2.0版本后,官方不再推荐使用 Vue-resource,而是推荐使用 Axios 或原生的 fetch。
    • Axios: Axios 是一个独立的第三方库,由一个开发者维护,它在Vue社区和其他前端框架中都广受欢迎。
  2. 功能和特性:

    • Vue-resource: Vue-resource 提供了一些与Vue.js集成的特性,如拦截器、Vue组件的资源请求和响应处理等。然而,它的功能相对较少,可能在处理复杂的HTTP场景时不够灵活。
    • Axios: Axios 提供了更丰富的功能,支持拦截器、并发请求、取消请求、全局默认配置等特性。它也更灵活,可以轻松地与各种前端框架和工具集成。
  3. API 设计:

    • Vue-resource: Vue-resource 的API设计比较简单,适合小型项目或初学者使用。
    • Axios: Axios 的API设计更为灵活,对于复杂的HTTP请求场景提供了更多的选项和配置,适用于大型和复杂的前端项目。
  4. 支持度:

    • 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 的二次开发,网上有很多资料,我自己也找了一些比较不错的,感兴趣的可以看看参考资料部分。

参考资料

相关推荐
琹箐几秒前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠5 分钟前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农5 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
kymjs张涛30 分钟前
零一开源|前沿技术周报 #7
android·前端·ios
爱编程的喵35 分钟前
React入门实战:从静态渲染到动态状态管理
前端·javascript
Tttian6221 小时前
npm init vue@latestnpm error code ETIMEDOUT
前端·vue.js·npm
患得患失9491 小时前
【前端】【组件库开发】【原理】【无框架开发】现代网页弹窗开发指南:从基础到优化
前端
运维咖啡吧1 小时前
给朋友们分享个好消息 7天时间23.5k
前端·程序员·ai编程
元气小嘉1 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
神仙别闹1 小时前
基于ASP.NET+SQL Server实现(Web)企业进销存管理系统
前端·后端·asp.net