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

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

npm install axios

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

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 也很简单，首先安装对应的依赖。

npm install mockjs

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

import Mock from "mockjs";

// 注意这里的 url 需要与请求的接口保持一致

Mock.mock("/api/data/winTogether/service", {

  service: [

    {

      subtitle: "xxxx网格站加盟",

      desc: "通过自有或租赁的仓库进行分拣商品"

    }

  ]

});

二次封装

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

参考资料