使用axios的详细图文教程

news2024/11/23 4:48:05

介绍  

当我们使用Vue开发项目时,会发送Ajax请求服务器接口,会对axios封装。

Axios(ajax i/o system)不是一种新技术,本质上也是对原生XHR(XMLHttpReques)的封装,只不过它是基于Promise的,是Promise的实现版本,作用于浏览器和node.js中。能拦截请求和响应,自动转换JSON数据。符合最新的ES规范。

特点

  • 从浏览器创建 XMLHttpRequests

  • 从node.js创建http请求

  • 支持 Promise API

  • 拦截请求和响应

  • 转换请求数据和响应数据

  • 取消请求

  • 超时处理

  • 查询参数序列化支持嵌套处理

  • 将HTML Form转换成JSON进行请求

  • 自动转换JSON数据

等等一些


安装axios

1.npm安装

npm install axios

2.bower安装

bower install axios

3.yarn安装

yarn add axios

4.cdn引入 

 A. jsDelivr CDN
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  B. unpkg CDN
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

这里我用的是npm安装

使用axios

创建的是vue2项目,注意版本。

在main.js中引入axios

//引入axios
import axios from 'axios'
Vue.prototype.$axios = axios

组件中使用

App.vue

在public中新建data.json文件

data.json

HelloWorld.vue

在组件中,引入axios并使用,就构建了一个基本的get请求,接着调用then方法即可查看请求的结果了。

暂时就这么多,后续会再补充,有什么问题,欢迎指正。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

和葡萄酒时为什么要写品酒笔记?

如果你不把你的想法写下来&#xff0c;它们可能会在你离开房间之前就离开你的大脑。写笔记&#xff0c;包括令人难忘的品酒笔记&#xff0c;它是关于记录一些超越今天和明天的有意义的事情。这是你的记忆葡萄酒&#xff0c;对你来说最相关、最有区别的就是最重要的。最后&#…

Keil新建STM32软件工程 - (详细步骤图文)

文章目录 1. 前言2. 下载芯片对应的Keil开发包3. 下载芯片对应的标准外设库 - STM32F10x_StdPeriph_Lib_Vx.x.x4. 新建工程文件夹 - Demo34.1 移植标准外设库4.2 启动文件介绍及如何选择 5. 新建软件工程 - Demo5.1 打开Keil → Project → New uVision Project5.2 选择芯片型号…

CSS 的背景属性(开发中常用)

目录 1 内容预览 背景颜色 背景图片 背景平铺 背景图片位置(常用) 背景图像固定 背景复合写法 背景色半透明 实现案例 1 内容预览 背景属性可以设置背景颜色、背景图片、背景平铺、背景图片位置、背景图像固定等。 注意&#xff1a; 把表格中的五个属背下来&#xff0c…

朱卫明:从韶关走向世界的创作型歌手

朱卫明&#xff0c;艺名Aming&#xff0c;是一位来自广东韶关的杰出唱作音乐人。他以其独特的创作才华和深情的嗓音&#xff0c;赢得了众多歌迷的喜爱。作为一名创作型歌手&#xff0c;朱卫明用音乐传递情感&#xff0c;用歌声打动人心。 一、早年经历与音乐启蒙 朱卫明出生于…

Explain工具-SQL性能优化

文章目录 SQL性能优化的目标Explain覆盖索引ExplainindexExplainfilesortExplainfilesort创建 idx_bd(b,d) SQL性能优化的目标 达到 range 级别 Explain覆盖索引 Extra中Using index表示覆盖索引 Explainindex type中是index&#xff0c;代表全索引扫描&#xff0c;磁盘扫…

Sketch for Mac:实现你的创意绘图梦想的矢量绘图软件

随着数字时代的到来&#xff0c;矢量绘图软件成为了广告设计、插画创作和UI设计等领域中必不可少的工具。在众多矢量绘图软件中&#xff0c;Sketch for Mac&#xff08;矢量绘图软件&#xff09;以其强大的功能和简洁的界面脱颖而出&#xff0c;成为了众多设计师的首选。 Sket…

【LeetCode:746. 使用最小花费爬楼梯 | 递归 -> 记忆化搜索 -> DP】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

【机器学习】应用KNN实现鸢尾花种类预测

目录 前言 一、K最近邻&#xff08;KNN&#xff09;介绍 二、鸢尾花数据集介绍 三、鸢尾花数据集可视化 四、鸢尾花数据分析 总结 &#x1f308;嗨&#xff01;我是Filotimo__&#x1f308;。很高兴与大家相识&#xff0c;希望我的博客能对你有所帮助。 &#x1f4a1;本文由Fil…

YOLOv5改进 | 2023 | CARAFE提高精度的上采样方法(助力细节长点)

一、本文介绍 本文给大家带来的CARAFE&#xff08;Content-Aware ReAssembly of FEatures&#xff09;是一种用于增强卷积神经网络特征图的上采样方法。其主要旨在改进传统的上采样方法&#xff08;就是我们的Upsample&#xff09;的性能。CARAFE的核心思想是&#xff1a;使用…

【LeetCode刷题笔记】155.最小栈

创作不易&#xff0c;本篇文章如果帮助到了你&#xff0c;还请点赞 关注支持一下♡>&#x16966;<)!! 主页专栏有更多知识&#xff0c;如有疑问欢迎大家指正讨论&#xff0c;共同进步&#xff01; 更多算法知识专栏&#xff1a;算法分析&#x1f525; 给大家跳段街舞感谢…

指针运算笔试题解析

题目一 #include <stdio.h>int main(){int a[5] { 1, 2, 3, 4, 5 };int *ptr (int *)(&a 1);printf( "%d,%d", *(a 1), *(ptr - 1));return 0;}// 程序的结果是什么&#xff1f; 答案中显示第一个是2&#xff0c;第二个是5 咱们先来解释一下第一个答…

C语言入门基础(二)

基本概念 地址 计算机的内存是一块用于存储数据的空间&#xff0c;由一系列连续的存储单元组成&#xff0c;就像下面这样&#xff0c; 每一个单元格都表示1个Bit&#xff0c;一个bit在EE专业的同学看来就是高低电位&#xff0c;而在CS同学看来就是0&#xff0c;1两种状态。 …

K8s中pod詳解

目录 Yaml语法解析 Pod pod是如何被创建的 1.创建一个pod 2.创建一个多容器pod 进入容器 3.配置节点标签 4.Pod容器的交互 4.1创建pod&#xff0c;并做本地解析 4.2pod共享进程 4.3pod共享宿主机namespace 5.钩子函数lifecycle 基础指令 # 查看对应资源: 状态 $ kubectl…

人工智能_机器学习065_SVM支持向量机KKT条件_深度理解KKT条件下的损失函数求解过程_公式详细推导---人工智能工作笔记0105

之前我们已经说了KKT条件,其实就是用来解决 如何实现对,不等式条件下的,目标函数的求解问题,之前我们说的拉格朗日乘数法,是用来对 等式条件下的目标函数进行求解. KKT条件是这样做的,添加了一个阿尔法平方对吧,这个阿尔法平方肯定是大于0的,那么 可以结合下面的文章去看,也…

首字母转大写在线工具

具体请前往&#xff1a;在线首字母转大写

结构体基础全家桶(2)结构体指针

目录 指向结构体类型数据的指针&#xff1a; 指向结构体变量的指针&#xff1a; 创建&#xff1a; 应用&#xff1a; 注意事项&#xff1a; 指向结构体数组的指针 创建&#xff1a; 应用&#xff1a; 注意&#xff1a; 用结构体变量和指向结构体的指针做函数的参数 …

oracle详细安装教程(附带百度网盘资源)

一,下载安装包途径 1.官网 Unauthorized Request 2.百度网盘分析 https://pan.baidu.com/s/1n221gdTK0Fcho839oRab9g 提取码1q2w 二&#xff0c;安装教程 1.下载完安装包后点击 setup.exe 如果出现一下的问题&#xff0c;使用windows10等系统安装oracle 11g等版本的数据库…

大 O 表示法在机器学习中的重要性

一、介绍 在不断发展的机器学习领域&#xff0c;算法的效率至关重要。大 O 表示法成为这方面的一个关键工具&#xff0c;它提供了一种描述算法性能或复杂性的语言&#xff0c;特别是在时间和空间方面。本文探讨了 Big O 表示法在机器学习中的重要性&#xff0c;阐明了它在算法选…

Next.js加载异步组件 骨架屏

Next.js 中有两种处理页面加载的方式&#xff0c;一种是 Loading UI 一种是 Streaming。接下来我将介绍这两种的区别&#xff0c;以及实际的业务场景。 当我们进入某个页面时&#xff0c;需要获取页面数据&#xff0c;可能是从数据库读取也有可能是 API 服务&#xff0c;总之这…

【深度学习】注意力机制(六)

本文介绍一些注意力机制的实现&#xff0c;包括MobileVITv1/MobileVITv2/DAT/CrossFormer/MOA。 【深度学习】注意力机制&#xff08;一&#xff09; 【深度学习】注意力机制&#xff08;二&#xff09; 【深度学习】注意力机制&#xff08;三&#xff09; 【深度学习】注意…