从零开始用 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 依赖。

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

参考资料

posted @ 2023-12-20 20:24  陈树义  阅读(828)  评论(2编辑  收藏  举报