3分钟让你学会axios在vue项目中的基本用法（建议收藏）

 

目录

Axios

Axios简介

一、axios是干啥的

二、安装使用

三、Axios请求方式

1、axios可以请求的方法：

2、get请求

3、post请求

4、put和patch请求

5、delete请求

6、并发请求

四、Axios实例

1、创建axios实例

2、axios全局配置

3、axios实例配置

4、axios请求配置

五、拦截器

1、请求拦截器

2、响应拦截器

3、取消拦截

六、错误处理

七、取消请求

进我主页看更多小技巧

Axios

提示：本篇详解axios在vue项目中的实例。在使用Vue.js框架开发前端项目时，会经常发送ajax请求服务端接口，在开发过程中，需要对axios进一步封装，方便在项目中的使用。

Axios简介

axios框架全称（ajax – I/O – system）：

  • 基于promise用于浏览器和node.js的http客户端，因此可以使用Promise API

一、axios是干啥的

说到axios我们就不得不说下Ajax。在旧浏览器页面在向服务器请求数据时，因为返回的是整个页面的数据，页面都会强制刷新一下，这对于用户来讲并不是很友好。并且我们只是需要修改页面的部分数据，但是从服务器端发送的却是整个页面的数据，十分消耗网络资源。而我们只是需要修改页面的部分数据，也希望不刷新页面，因此异步网络请求就应运而生

Ajax(Asynchronous JavaScript and XML)：

异步网络请求。Ajax能够让页面无刷新的请求数据。

实现ajax的方式有多种，如jQuery封装的ajax，原生的XMLHttpRequest，以及axios。但各种方式都有利弊：

  • 原生的XMLHttpRequest的配置和调用方式都很繁琐，实现异步请求十分麻烦
  • jQuery的ajax相对于原生的ajax是非常好用的，但是没有必要因为要用ajax异步网络请求而引用jQuery框架

Axios（ajax i/o system）：

这不是一种新技术，本质上还是对原生XMLHttpRequest的封装，可用于浏览器和nodejs的HTTP客户端，只不过它是基于Promise的，符合最新的ES规范。具备以下特点： 

  • 在浏览器中创建XMLHttpRequest请求
  • 在node.js中发送http请求
  • 支持Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消要求
  • 自动转换JSON数据
  • 客户端支持防止CSRF/XSRF(跨域请求伪造)

二、安装使用

安装有三种方式：

npm安装

 npm install axios

bower安装

bower install axios

通过cdn引入

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在vue项目的main.js文件中引入axios

import axios from 'axios'
Vue.prototype.$axios = axios

在组件中使用axios

<script>export default {mounted(){this.$axios.get('/goods.json').then(res=>{console.log(res.data);})}}
</script>

三、Axios请求方式

1、axios可以请求的方法：
  • get：获取数据，请求指定的信息，返回实体对象
  • post：向指定资源提交数据（例如表单提交或文件上传）
  • put：更新数据，从客户端向服务器传送的数据取代指定的文档的内容
  • patch：更新数据，是对put方法的补充，用来对已知资源进行局部更新
  • delete：请求服务器删除指定的数据
2、get请求

示例代码
方法一

 //请求格式类似于 http://localhost:8080/goods.json?id=1
this.$axios.get('/goods.json',{params: {id:1}}).then(res=>{console.log(res.data);},err=>{console.log(err);})

方法二

this.$axios({method: 'get',url: '/goods.json',params: {id:1}}).then(res=>{console.log(res.data);},err=>{console.log(err);})

方法三

<template><div><h1>使用 Axios 进行 HTTP 请求示例</h1><button @click="fetchData">点击获取数据</button><div v-if="data"><h2>从服务器获取的数据：</h2><pre>{{ data }}</pre></div></div>
</template><script>
// 导入 Axios
import axios from 'axios';export default {data() {return {data: null};},methods: {async fetchData() {try {// 发起 GET 请求const response = await axios.get('https://api.example.com/data');// 从响应中获取数据this.data = response.data;} catch (error) {// 捕获并处理可能的错误console.error('发生错误：', error);}}}
};
</script>
3、post请求

post请求一般分为两种类型

1.form-data 表单提交，图片上传、文件上传时用该类型比较多
2. application/json 一般是用于 ajax 异步请求
示例代码
方法一

this.$axios.post('/url',{id:1}).then(res=>{console.log(res.data);},err=>{console.log(err);})

方法二

$axios({method: 'post',url: '/url',data: {id:1}
}).then(res=>{console.log(res.data);
},err=>{console.log(err);
})

form-data请求

let data = {//请求参数
}let formdata = new FormData();
for(let key in data){formdata.append(key,data[key]);
}this.$axios.post('/goods.json',formdata).then(res=>{console.log(res.data);
},err=>{console.log(err);
})
4、put和patch请求

示例代码
put请求

this.$axios.put('/url',{id:1}).then(res=>{console.log(res.data);})

patch请求

this.$axios.patch('/url',{id:1}).then(res=>{console.log(res.data);})
5、delete请求

示例代码
参数以明文形式提交

this.$axios.delete('/url',{params: {id:1}}).then(res=>{console.log(res.data);})

参数以封装对象的形式提交

this.$axios.delete('/url',{data: {id:1}}).then(res=>{console.log(res.data);})//方法二
axios({method: 'delete',url: '/url',params: { id:1 }, //以明文方式提交参数data: { id:1 } //以封装对象方式提交参数
}).then(res=>{console.log(res.data);
})
6、并发请求

并发请求：同时进行多个请求，并统一处理返回值
示例代码

 this.$axios.all([this.$axios.get('/goods.json'),this.$axios.get('/classify.json')
]).then(this.$axios.spread((goodsRes,classifyRes)=>{console.log(goodsRes.data);console.log(classifyRes.data);})
)

四、Axios实例

1、创建axios实例

示例代码

let instance = this.$axios.create({baseURL: 'http://localhost:9090',timeout: 2000})instance.get('/goods.json').then(res=>{console.log(res.data);
})

可以同时创建多个axios实例。
  axios实例常用配置：

  • baseURL 请求的域名，基本地址，类型：String
  • timeout 请求超时时长，单位ms，类型：Number
  • url 请求路径，类型：String
  • method 请求方法，类型：String
  • headers 设置请求头，类型：Object
  • params 请求参数，将参数拼接在URL上，类型：Object
  • data 请求参数，将参数放到请求体中，类型：Object
2、axios全局配置

示例代码

//配置全局的超时时长
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';
3、axios实例配置

示例代码

let instance = this.$axios.create();
instance.defaults.timeout = 3000;
4、axios请求配置

示例代码

this.$axios.get('/goods.json',{timeout: 3000}).then()

以上配置的优先级为：请求配置 > 实例配置 > 全局配置

五、拦截器

拦截器：在请求或响应被处理前拦截它们

1、请求拦截器

示例代码

this.$axios.interceptors.request.use(config=>{// 发生请求前的处理return config},err=>{// 请求错误处理return Promise.reject(err);})//或者用axios实例创建拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{return config
})
2、响应拦截器

示例代码

this.$axios.interceptors.response.use(res=>{//请求成功对响应数据做处理return res //该返回对象会传到请求方法的响应对象中},err=>{// 响应错误处理return Promise.reject(err);})
3、取消拦截

示例代码

let instance = this.$axios.interceptors.request.use(config=>{config.headers = {token: ''}return config})//取消拦截
this.$axios.interceptors.request.eject(instance);

六、错误处理

示例代码

this.$axios.get('/url').then(res={}).catch(err=>{//请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象console.log(err);})

七、取消请求

示例代码

let source = this.$axios.CancelToken.source();this.$axios.get('/goods.json',{cancelToken: source}).then(res=>{console.log(res)}).catch(err=>{//取消请求后会执行该方法console.log(err)})//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');

记得根据您的实际需求来配置Axios，比如设置默认的baseURL、拦截器等。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/233045.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

CTF命令执行部分总结

CTF命令执行部分总结

&#x1f60b;大家好&#xff0c;我是YAy_17&#xff0c;是一枚爱好网安的小白&#xff0c;正在自学ing。 本人水平有限&#xff0c;欢迎各位大佬指点&#xff0c;一起学习&#x1f497;&#xff0c;一起进步⭐️。 ⭐️此后如竟没有炬火&#xff0c;我便是唯一的光。⭐️ 关于…
阅读更多...
矩阵式键盘实现的电子密码锁

矩阵式键盘实现的电子密码锁

#include<reg51.h> //包含51单片机寄存器定义的头文件 sbit P14P1^4; //将P14位定义为P1.4引脚 sbit P15P1^5; //将P15位定义为P1.5引脚 sbit P16P1^6; //将P16位定义为P1.6引脚 sbit P17P1^7; //将P17位定义为P1.7引脚 sbit soundP3^7; //将so…
阅读更多...
[AutoSar]基础部分 RTE 01 介绍

[AutoSar]基础部分 RTE 01 介绍

目录 关键词平台说明一、什么是RTE二、RTE的主要功能 关键词 嵌入式、C语言、autosar、EcuM、wakeup、flex 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商TI编程语言C&#xff0c;C编译器HighTec (GCC) 一、什么是RTE RTE&#xff08;Run-Time Environment&…
阅读更多...
【python】进阶---＞并发编程之线程（二）

【python】进阶---＞并发编程之线程（二）

一、线程的生命周期 新建 : 创建线程经过初始化,进入就绪状态 就绪 : 等待操作系统调度,调度后进入运行状态运行 阻塞 : 暂停运行,解除阻塞后进入就绪等待重新调度 消亡 : 线程执行完毕或者异常终止 可能有3种情况从运行到阻塞 : 同步 : 线程中获取同步锁,但是资源已经被其他…
阅读更多...
车辆跟踪及测距

车辆跟踪及测距

车辆跟踪及测距是一种现代化的技术手段&#xff0c;通过使用各种传感器和技术设备&#xff0c;能够实现车辆的实时监控和测距。这些技术手段包括GPS全球定位系统、雷达、激光等&#xff0c;它们可以帮助我们更好地了解车辆的位置和行驶情况。在本文中&#xff0c;我们将从以下几…
阅读更多...
LeetCode - 460 LFU缓存（Java JS Python）

LeetCode - 460 LFU缓存（Java JS Python）

题目来源 460. LFU 缓存 - 力扣&#xff08;LeetCode&#xff09; 题目描述 请你为 最不经常使用&#xff08;LFU&#xff09;缓存算法设计并实现数据结构。 实现 LFUCache 类&#xff1a; LFUCache(int capacity) - 用数据结构的容量 capacity 初始化对象int get(int key)…
阅读更多...
【迁移学习论文四】Multi-Adversarial Domain Adaptation论文原理及复现工作

【迁移学习论文四】Multi-Adversarial Domain Adaptation论文原理及复现工作

Multi-Adversarial Domain Adaptation 多对抗域适应 前言 好久没有更新了&#xff0c;所以这周开始记录下来&#xff0c;也好督促自己。记录本人预备研究生阶段相关迁移学习论文的原理阐述以及复现工作。 问题 跨域混淆或错误对齐 文章介绍 这篇文章于2018年发表在AAAI&…
阅读更多...
手把手教你使用Cypress进行端到端测试

手把手教你使用Cypress进行端到端测试

一、引言 Cypress是一个流行的端到端测试框架&#xff0c;它提供了一个全面的解决方案&#xff0c;可以测试任何在浏览器中运行的内容。不论你是想为一个小型项目添加测试&#xff0c;还是在大型企业级应用中进行端到端测试&#xff0c;Cypress都是一个不错的选择。本文将会手…
阅读更多...
智能优化算法应用：基于阿基米德优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用：基于阿基米德优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于阿基米德优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于阿基米德优化算法3D无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.阿基米德优化算法4.实验参数设定…
阅读更多...
国家开放大学 河南开放大学形成性考核 平时作业 统一参考资料

国家开放大学 河南开放大学形成性考核 平时作业 统一参考资料

试卷代号&#xff1a;1258 房屋建筑混凝土结构设计 参考试题 一、单项选择题&#xff08;每小题2分&#xff0c;共计40分&#xff09; 1.( )是将框架结构中的部分跨间布置剪力墙或把剪力墙结构的部分剪力墙抽掉改为框架承重。 A.梁板结构体系 B.框…
阅读更多...
评价机器学习模型的指标

评价机器学习模型的指标

为了衡量一个机器学习模型的好坏&#xff0c;需要给定一个测试集&#xff0c;用模型对测试集中的每一个样本进行预测&#xff0c;并根据预测结果计算评价分数。 对于分类问题&#xff0c;常见的评价标准有准确率、精确率、召回率和F值等。给定测试集 &#x1d4af; {(&#x1…
阅读更多...
一款电压检测LVD

一款电压检测LVD

一、基本概述 The TX61C series devices are a set of three terminal low power voltage detectors implemented in CMOS technology. Each voltage detector in the series detects a particular fixed voltage ranging from 0.9V to 5.0V. The voltage detectors consist…
阅读更多...
git缓存区、本地仓库、远程仓库的同步问题(初始化库无法pull和push)

git缓存区、本地仓库、远程仓库的同步问题(初始化库无法pull和push)

git新建库与本地库同步 gitee使用教程&#xff0c;git的下载与安装接不在叙述了。 新建远程仓库 新建远程仓库必须要使用仓库提供的api&#xff0c;也就是仓库门户网站&#xff0c;例如gitee&#xff0c;github&#xff0c;gitlab等。在上图中使用gitee网址中新建了一个test仓…
阅读更多...
回归预测 | MATLAB实现NGO-SCN北方苍鹰算法优化随机配置网络的数据回归预测 （多指标，多图）

回归预测 | MATLAB实现NGO-SCN北方苍鹰算法优化随机配置网络的数据回归预测 （多指标，多图）

回归预测 | MATLAB实现NGO-SCN北方苍鹰算法优化随机配置网络的数据回归预测 &#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现NGO-SCN北方苍鹰算法优化随机配置网络的数据回归预测 &#xff08;多指标&#xff0c;多图&#xff09;效果一览基本介绍…
阅读更多...
HarmonyOS（十五）——状态管理之@Prop装饰器（父子单向同步）

HarmonyOS（十五）——状态管理之@Prop装饰器（父子单向同步）

上一篇文章我们认识了状态管理的State装饰器&#xff08;组件内状态&#xff09;&#xff0c;接下来我们学习另外一个状态管理装饰器Prop装饰器。 Prop装饰的变量可以和父组件建立单向的同步关系。Prop装饰的变量是可变的&#xff0c;但是变化不会同步回其父组件。 说明&#…
阅读更多...
10分钟微调专属于自己的大模型

10分钟微调专属于自己的大模型

本文主要介绍使用魔搭社区轻量级训练推理工具SWIFT&#xff0c;进行大模型自我认知微调&#xff0c;帮助初阶炼丹师快速微调出专属于自己的大模型。 SWIFT&#xff08;Scalable lightWeight Infrastructure for Fine-Tuning&#xff09;是魔搭ModelScope开源社区推出的一套完整…
阅读更多...
泰坦陨落2找不到msvcr120文件的修复方法，分享多种解决方法

泰坦陨落2找不到msvcr120文件的修复方法，分享多种解决方法

在玩泰坦陨落2这款游戏时&#xff0c;有些玩家可能会遇到找不到msvcr120.dll文件的问题。这个问题可能是由于游戏缺少必要的运行库导致的。下面我将分享一些解决这个问题的方法&#xff0c;希望对大家有所帮助。 一、问题分析 msvcr120.dll是Microsoft Visual C Redistributab…
阅读更多...
MATLAB - 使用 MPC Designer 线性化 Simulink 模型

MATLAB - 使用 MPC Designer 线性化 Simulink 模型

系列文章目录 前言 本主题介绍如何使用 MPC Designer 对 Simulink 模型进行线性化。为此&#xff0c;请从包含 MPC 控制器块的 Simulink 模型打开该应用程序。本例中使用 CSTR_ClosedLoop 模型。 open_system(CSTR_ClosedLoop) 在模型窗口中&#xff0c;双击 MPC 控制器模块。…
阅读更多...
Vue中英文翻译小结

Vue中英文翻译小结

背景&#xff1a;时局艰难&#xff0c;后端开发被强制写了vue&#xff0c;这不有个需求是中英文翻译&#xff0c;特此记录下&#xff0c;该怎么个翻译法子。 先引入全局的路由国际化文件&#xff0c;zh.js 和 en.js 1.关于插值表达Button里面 {{ $t(reinsop.common.back) }} …
阅读更多...
LazyIDA源码阅读

LazyIDA源码阅读

LazyIDA是一款IDA插件&#xff0c;项目地址GitHub - L4ys/LazyIDA: Make your IDA Lazy! 外部引用 from __future__ import division from __future__ import print_function from struct import unpack import idaapi import idautils import idcfrom PyQt5.Qt import QAppli…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023