Axios（Vue-Resource的取代者、拦截器）

最新推荐文章于 2024-07-12 15:56:09 发布
最新推荐文章于 2024-07-12 15:56:09 发布
阅读量428 收藏
点赞数
分类专栏： 前端框架 文章标签： axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dean_xiu/article/details/113059530
版权

文章目录

axios简述

老样子，先了解背景，再学习使用
虽然看不懂，但还是了解一下的Axios git仓库

Axios是干啥使的

  • Axios是一个基于Promise的Http库，可以用在浏览器和node.js中
  • Axios是一个开源的可以用在浏览器端和NodeJS的异步通信框架，它的主要作用就是实现AJAX异步通信
  • 为啥要用它，因为Vue的边界很明确，就是为了处理DOM，所以并不具备通信功能，此时就需要使用一个额外的通信框架与服务器交互，当然也可以使用jQuery提供的AJAX通信功能
  • 简单来说，Axios就是可以发送get、post请求

Axios功能特点

  • 从浏览器中创建XMLHttpRequests
  • 从node.js创建http请求
  • 支持Promise API【JS中链式编程】
  • 拦截请求和响应
  • 转换请求数据和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防御XSRF（跨站请求伪造）

传统AJAX & jQuery & Vue-Resource

其实在Vue开发过程中能实现发送网络请求的方式有很多种，为什么最终选择了Axios呢，当然是由于它过于优秀，同时也因为队友并不怎么给力啊

  • 传统Ajax请求是基于XMLHttpRequest
    而在项目开发中，封装它的过程是比较麻烦的，并且配置和调用的方式也比较混乱，一般开发者都不会用这种方式，而是使用jQuery-Ajax
  • jQuery-Ajax相对于传统的Ajax是好用的
    但是存在的问题是，Vue的开发过程中不需要使用jQuery，而且jQuery是一个不那么小的，比较重量级的框架，而为了方便进行一个网络请求，特意引入一个jQuery是非常没有必要的，也是不划算的
  • Vue-Resource
    尤同学曾经推出了Vue-resource插件，Vue-Resource的体积相对于jQuery小了很多，但当Vue2.0版本推出后，尤同学说以后将不会再对Vue-Resource进行维护和更新了，所以说继续使用这种方式进行开发项目是存在很大隐患的。
  • Axios
    Axios也是尤同学说不再维护Vue-Resource后推荐使用的框架，它支持再浏览器中发送XMLHttpRequests请求，支持在Node.js中发送http请求，支持Promise API，可以拦截请求和响应，反正呢，就是目前最厉害的了。

Axios基础使用（基于json-server）

准备工作

  • 一如既往，使用命令行创建项目工程
    在这里插入图片描述
  • 开发工具WebStrom打开，修改项目目录结构
    在这里插入图片描述

安装

  • 本地安装axios
    在这里插入图片描述
  • 安装vue-axios
    因为在Vue中使用，所以光安装axios是不够用的，还需要再额外安装一个vue-axios
    在这里插入图片描述

开始使用

本次使用也是使用json-server来模拟数据的，所以使用json-server部分与vue-resource中的一致

怕你懒得翻，所以还是再说一遍
上次在Vue-Resource中使用的是全局安装，所以本次就不需要再安装一次了
在这里插入图片描述

好了，启动完json-server我们就开始用了。

直接使用（局部使用）

App.vue中的script部分直接使用
在这里插入图片描述
与Vue-Resource的使用方式类似，但是我们可以看到的是数据存储在data里，而Vue-Resource数据存储在body里
App.vue的template部分
在这里插入图片描述

全局引用
  • main.js中引入Axios和vue-axios
    在这里插入图片描述
  • main.js中创建Axios实例并安装使用
    在这里插入图片描述
    ！！！注意Vue.use安装的是VueAxios而不是Axios，因为写错这个问题坑了我好久
  • App.vue里script使用有两种方式，推荐第二种
    方式1：
    在这里插入图片描述
    方式2：
    在这里插入图片描述

实践

做个弹窗，完成新增用户功能

  • App.vue的template在上述的基础上新增
    在这里插入图片描述
  • App.vue上script部分对按钮点击后的操作
    在这里插入图片描述

Axios的拦截器使用

Axios比较显著的优点就是它的拦截器很好用，可以在方法之前和方法之后进行拦截

  • main.js中添加代码进行使用
    前置拦截
    在这里插入图片描述
    后置拦截
    在这里插入图片描述

运行后结果如下：
在这里插入图片描述

项目结构改进

当前我们可以看到给main.js里添加了不少代码，因为拦截器的缘故
所以可以效防在vue路由里对项目结构的改进，将关于拦截器的部分，单独写入一个文件，然后在main.js里引入
在这里插入图片描述

  • axios/index.js的内容
    在这里插入图片描述
  • main.js里引入
    在这里插入图片描述
    可以看到main.js里的代码简洁了不少
Dean_xiu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 6902
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
【Vue知识点- No5.】生命周期、axios、购物车案例
qq_48687155的博客
07-23 537
生命周期、axios、购物车案例
使用Axios替代vue-resource 1
weixin_44283571的博客
11-25 228
这篇博文主要是简述利用Axios来进行数据请求的三种方式： 首先你得有一台电电电电脑，开玩笑的。 首先你得有一定的关于Vue的基础，然后很简单我们需要在我们的工程里，安装axios依赖包，只要在终端命令输入“npm install --save axios”进行下载axios依赖包即可。 第一种 直接在你需要请求数据的界面请求数据即可（局部请求），以下是相关的JS代码 （bank.vue） &lt...
axios替换vue-resource
zhiyikeji的博客
11-18 675
1.cd到创建的工程目录 2.使用指令npm install axios --save-dev 3.在main.js中定义全局的axios import axios from 'axios' Vue.prototype.$http=axios 注：使用axios时如果已经引入了vue-resource则需要把import vueResource from 'vue-resource'以及Vue...
axios的替代方案的思考和实践
最新发布
2401_83384536的博客
07-12 955
/ 创建一个axios实例})// 在响应拦截器中返回data})id: number// result的类型总是为axios.AxiosResponsedata.data})不知道是axios故意为之还是忽略了，以上的发起的GET请求中，响应数据result的类型总是的，但其实我们在响应拦截器中已经将返回了，这导致响应数据类型混乱而被困扰。
vue系列文章（27）axios替换vue-resource
D.K专栏
07-16 545
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 vue2.0之后，就不再对vue-resource更新，而是推荐使用axios，基于promise的HTTP请求客户端，可同时在浏览器和Node.js中使用。 功能特性： 1、在浏览器中发送XMLHttpRequests请求。 2、在node.js中发送http请求。 3、支持Promise...
探索 `ts-axios`: TypeScript 驱动的 Axios 替代方案
gitblog_00021的博客
04-02 439
探索 ts-axios: TypeScript 驱动的 Axios 替代方案 项目地址:https://gitcode.com/NLRX-WJC/ts-axios ts-axios 是一个由 TypeScript 编写的 HTTP 客户端库，它是对广泛使用的 Axios 库的一个现代化重构。如果你在寻找一个功能齐全、类型安全且易于定制的 HTTP 请求解决方案，那么 ts-axios 将是一个值得...
vue axios 拦截器
weixin_43935117的博客
08-19 302
vue axios 拦截器前言正文请求拦截器响应拦截器链接 前言 项目中需要验证登录用户身份是否过期，是否有权限进行操作，所以需要根据后台返回不同的状态码进行判断。 第一次使用拦截器，文章中如有不对的地方还请各位大佬帮忙指正谢谢。 正文 axios的拦截器分为请求拦截器和响应拦截器两种。 我一般把拦截器写在main.js里。 mian.js//axios请求 import Axios from "...
前端面试题--vue
weixin_44501366的博客
10-17 4824
每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一 个会影响其他.Less的简单使用（一）——变量的用法Less是css的扩展，Less不仅与CSS向后兼容，而且它添加的其他功能都使用现有的CSS语法。变量一、变量正常用法（variables）在一个位置控制常用值.less文件中} **
关于Vue的面试题知识点
qq_51338868的博客
10-29 1172
1、vue中常用的指令及作用？ v-text指令：用于更新标签包含的文本，它的作用跟双大括号效果是一样的 v-html指令：绑定一些包含html代码的数据在视图上 v-show指令：指令的取值为true/false，分别对应着显示/隐藏，改变的是元素css样式的display属性 v-if指令：取值为true/false，控制元素是否需要被渲染 v-else指令：和v-if指令搭配使用，没有对应的值。当v-if的值false，v-else才会被渲染出来。
vue2 vue3 js es6 html css 知识点
weixin_71783532的博客
08-03 1010
生命周期函数 又叫钩子函数 是到了某一个时间点会自动触发 我们讨论的是 vue 实例的钩子函数 从 vue 实例创建到销毁的过程中 到了一定的时间节点就会触发是 ECMAScript 的第六个版本 在 es5 的基础上新增加了一些语法 js 分成三部分 dom（文档对象模型） bom（浏览器对象模型） ECMAScript（js 语法）1.JavaScript（以下简称 js）的数据类型分为两种：原始类型（即基本数据类型）和对象类型（即引用数据类型）；...
vue-resource对比axios
oqqaKun1的博客
06-28 5119
vue-resourcevue-resource是Vue.js的一款插件，它可以通过XMLHttpRequest或JSONP发起请求并处理响应。vue-resource特点：1. 体积小vue-resource非常小巧，在压缩以后只有大约12KB，服务端启用gzip压缩后只有4.5KB大小，这远比jQuery的体积要小得多。2. 支持主流的浏览器和Vue.js一样，vue-resource除了不支...
关于vue-resource 转变成axios的过程
weixin_30444105的博客
08-18 139
在做东钿贷后系统的时候，我选择了vue-resource这个插件作为与服务器沟通工具，但是听说前端同行说vuejs2.0已经不在维护vue-resource了，vuejs2.0 已经使用了axios了。因为我刚好用的vux这个ui组件。而且vux的ajaxplugin的插件使用的就是axios。不用觉得特别浪费axios，而且以后肯定也是要用axios的。于是我就决定把现用的vue-resourc...
ajax 替代方案,axios.js 实例 -----$.ajax的替代方案
weixin_42208901的博客
08-06 513
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。Features从 node.js 创建 http 请求拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御 XSRF axios 实例//get请求第一种写法axios({method: 'get',url: 'https://ipinfo.io',params: {ID...
在vue中使用fetch代替axios
6块腹肌的博客
06-09 3694
fetch是ES6新出的，基于promise设计，没有进行封装，属于原生js，所以在vue中使用的时候也不需要进行import引入就可以直接使用。 fetch的语法简单 fetch请求返回的是promise对象，需要进行json转换，所以需要两次.then() 用法示例： fetch("/api/test/") .then(res => { return res.json...
npm i axios vue-axios
08-30
npm i axios vue-axios 是一个命令，用于安装 axios 和 vue-axios 这两个包。这样做的目的是为了在你的 Vue 项目中使用 axios。 在你的 main.js 文件中，你需要导入 axios 和 vue-axios，并将它们与 Vue 实例绑定。可以使用以下代码实现这一点： import { createApp } from 'vue' import App from './App.vue' import router from './router' import axios from 'axios' import VueAxios from 'vue-axios' const app = createApp(App) app.use(VueAxios, axios).use(router) app.provide('axios', app.config.globalProperties.axios) app.mount('#app') 这样就可以在整个项目中使用全局的 axios 对象了。 在组件中，你可以通过注入（inject）的方式来使用全局的 axios。例如，在一个按钮的点击事件中，你可以使用以下代码来发送 GET 请求： <button @click="getList">getList</button> <script setup> import { onMounted } from "vue"; import { inject } from "vue"; const axios = inject("axios"); function getList() { axios.get("http://x.xxx.xx.xxx:3000/getHottestArticle").then((res) => { console.log(res); }); } </script> 这样，当点击按钮时，会调用 getList 函数，并使用全局的 axios 对象发送 GET 请求。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* *3* [Vue3 中使用 “vue-axios](https://blog.csdn.net/qq_52697994/article/details/120210534)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 100%"] [ .reference_list ]
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值