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

陈树义

发布于 2023-12-21 08:56:22

45400

代码可运行

文章被收录于专栏：陈树义

运行总次数：0

代码可运行

对于前端同学来说，请求后端接口是一个非常通用的东西。在十几年前的时候，我们还用 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: "通过自有或租赁的仓库进行分拣商品"
    }
  ]
});