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

参考资料

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui