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

2023-12-21 08:56:22 浏览数 (3)

对于前端同学来说，请求后端接口是一个非常通用的东西。在十几年前的时候，我们还用 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 依赖。

代码语言：javascript复制
npm install axios

随后，我们就可以直接使用 Axios 了，如下代码所示。

代码语言：javascript复制
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 也很简单，首先安装对应的依赖。

代码语言：javascript复制
npm install mockjs

随后，我们引入 Mock 对象，并使用 mock() 方法便可模拟返回特定数据，如下代码所示。

代码语言：javascript复制
import Mock from "mockjs";
// 注意这里的 url 需要与请求的接口保持一致
Mock.mock("/api/data/winTogether/service", {
  service: [
    {
      subtitle: "xxxx网格站加盟",
      desc: "通过自有或租赁的仓库进行分拣商品"
    }
  ]
});

二次封装

当你调用接口比较多的时候，你会发觉 Axios 的使用很繁琐，有很多重复的操作。这时候，我们可以对 Axios 进行二次封装，从而来提高我们的开发效率。关于 Axios 的二次开发，网上有很多资料，我自己也找了一些比较不错的，感兴趣的可以看看参考资料部分。

参考资料

  • Getting Started | Axios Docs
  • VIP！这个貌似不错！！完整的Axios封装-单独API管理层、参数序列化、取消重复请求、Loading、状态码... - 知乎
  • 写得还行，可以参考一下！vue中Axios的封装和API接口的管理 - 掘金
  • VIP！一个极简的封装介绍！很易懂！axios简介及二次封装 - 掘金
  • 这个看着还行，但写的不是很好懂。先存着。十分钟封装一个好用的axios，省时又省力他不香吗 - 掘金
  • 前端架构带你 封装axios，一次封装终身受益「美团后端连连点赞」 - 掘金
axios 后端 接口 框架 数据

0 人点赞