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

参考资料

相关推荐
h周杰偷35 分钟前
vue 预览pdf 【@sunsetglow/vue-pdf-viewer】开箱即用,无需开发
前端·vue.js·pdf
小孙姐1 小时前
3——VUE侦听器和计算属性
前端·javascript·vue.js
Dragon Wu1 小时前
Taro React小程序开发框架 总结
前端·react.js·前端框架·taro
nbsaas-boot2 小时前
消息队列场景下的前端设计:如何优化用户体验
前端·ux
sususugaa2 小时前
前端框架Vue3——响应式数据,v-on,v-show和v-if,v-for,v-bind
开发语言·前端·vue.js·前端框架
珹洺3 小时前
从 HTML 到 CSS:开启网页样式之旅(三)—— CSS 三大特性与 CSS 常用属性
前端·javascript·css·网络·html·tensorflow·html5
T^T尚8 小时前
uniapp H5上传图片前压缩
前端·javascript·uni-app
出逃日志8 小时前
JS的DOM操作和事件监听综合练习 (具备三种功能的轮播图案例)
开发语言·前端·javascript
XIE3928 小时前
如何开发一个脚手架
前端·javascript·git·npm·node.js·github
山猪打不过家猪8 小时前
React(五)——useContecxt/Reducer/useCallback/useRef/React.memo/useMemo
前端·javascript·react.js