使用axios的详细图文教程

介绍  

当我们使用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.mfbz.cn/a/247925.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

wpf devexpress如何使用AccordionControl

添加一个数据模型 AccordionControl可以被束缚到任何实现IEnumerable接口的对象或者它的派生类&#xff08;例如IList,ICollection&#xff09; 如下代码例子示范了一个简单的数据模型使用&#xff1a; using System.Collections.Generic;namespace DxAccordionGettingStart…

Python小细节之程序打包(言必信,行必果)

哪里不会点哪里 引言人生感悟言必信&#xff0c;行必果畅享未来1年云帝传承 步骤安装pyinstaller对自己的硬件不自信&#xff0c;用源&#xff08;精华所在&#xff01;&#xff09; 使用pyinstall找到目标&#xff0c;用shell进行启动命令分类建议 结尾 引言 这两天搞定了这个…

「X」Embedding in NLP|神经网络和语言模型 Embedding 向量入门

在「X」Embedding in NLP 进阶系列中&#xff0c;我们介绍了自然语言处理的基础知识——自然语言中的 Token、N-gram 和词袋语言模型。今天&#xff0c;我们将继续和大家一起“修炼”&#xff0c;深入探讨神经网络语言模型&#xff0c;特别是循环神经网络&#xff0c;并简要了解…

设计模式之建造者模式(二)

目录 概述概念角色类图适用场景 详述画小人业务类的介绍代码解析 建造者基本代码类介绍代码解析 总结设计原则其他 概述 概念 建造者模式是一种创建型设计模式&#xff0c;它可以将复杂对象的构建过程与其表示分离&#xff0c;使得同样的构建过程可以创建不同的表示。 角色 …

MySQL——表的约束

目录 一.表的约束 二.空属性 ​编辑三.默认值 四.列描述 五.主键 1.主键 2.符合主键 六.自增长 七.唯一键 八.外键 一.表的约束 真正约束字段的是数据类型&#xff0c;但是数据类型约束很单一&#xff0c;需要有一些额外的约束&#xff0c;更好的保证数据的合法性&…

异地现场工控设备,如何实现远程配置、调试?

南京某企业专注于工业物联领域&#xff0c;在相关项目中往往会在各个点位部署基于Linux系统的中控主机&#xff0c;实现各类物联设备信息的采集、汇总。但是&#xff0c;由于各点位分散多地&#xff0c;且数量达到了上百个&#xff0c;虽然中控主机具备4G物联网接入能力&#x…

.NET微信网页开发之通过UnionID机制解决多应用用户帐号统一问题

背景 随着公司微信相关业务场景的不断拓展&#xff0c;从最初的一个微信移动应用、然后发展成微信公众号应用、然后又有了微信小程序应用。但是随着应用的拓展&#xff0c;如何保证相同用户的微信用户在不同应用中登录的同一个账号呢&#xff1f;今天的主题就来了.NET微信网页…

系列五、DQL

一、DQL 1.1、概述 DQL的英文全称为&#xff1a;Data Query Language&#xff0c;中文意思为&#xff1a;数据查询语言&#xff0c;用大白话讲就是查询数据。对于大多数系统来说&#xff0c;查询操作的频次是要远高于增删改的&#xff0c;当我们去访问企业官网、电商网站&…

持续集成交付CICD:GitLabCI操作Harbor仓库

目录 一、实验 1.GitLabCI操作Harbor仓库 二、问题 1.gitlab-runner连接docker daemon报错 一、实验 1.GitLabCI操作Harbor仓库 &#xff08;1&#xff09;修改GitLabCI共享库代码并提交到mater CI.yaml .pipelineInit:tags:- buildstage: .prevariables:GIT_CHECKOUT: …

设计原则 | 接口隔离原则

一、接口隔离原则 1、原理 客户端不应该依赖它不需要的接口&#xff0c;即一个类对另一个类的依赖应该建立在最小的接口上。如果强迫客户端依赖于那些它们不使用的接口&#xff0c;那么客户端就面临着这个未使用的接口的改变所带来的变更&#xff0c;这无意间导致了客户程序之…

【AI】如何准备mac开发vue项目的环境

为了在Mac上开发Vue项目&#xff0c;你需要准备一些工具和环境。以下是主要的步骤&#xff1a; 安装Node.js和npm&#xff1a; Vue.js是一个基于JavaScript的框架&#xff0c;因此你需要Node.js环境。访问Node.js官网下载并安装Node.js&#xff0c;这也会自动安装npm&#xff0…

深圳锐科达IP网络广播系统

深圳锐科达IP网络广播系统 网络音频广播系统是一种基于TCP/IP网络的纯数字音频广播系统。该网络音频广播系统在物理结构上与标准IP网络完全集成。它不仅真正实现了基于TCP/IP网络的数字音频的广播、直播和点播&#xff0c;而且利用TCP/IP网络的优势&#xff0c;突破了传统模拟广…

Vue 组件传参 emit

emit 属性&#xff1a;用于创建自定义事件&#xff0c;接收子组件传递过来的数据。 注意&#xff1a;如果自定义事件的名称&#xff0c;和原生事件的名称一样&#xff0c;那么只会触发自定义事件。 setup 语法糖写法请见&#xff1a;《Vue3 子传父 组件传参 defineEmits》 语…

俄罗斯军方计划用 Astra Linux 取代 Windows!

网络安全正在改变全球化的面貌&#xff0c;各国政府为了防范外国的间谍和破坏活动&#xff0c;正积极发展自己的技术。在这一趋势下&#xff0c;俄罗斯军方已经开始用 Linux 发行版 Astra Linux 替换 Windows 系统。 如何提高Linux系统安全性&#xff1f;提升Linux安全的关键策…

保障线程安全性:构建可靠的多线程应用

目录 引言 为什么线程安全性如此重要&#xff1f; 1. 竞态条件&#xff08;Race Conditions&#xff09; 2. 死锁&#xff08;Deadlocks&#xff09; 3. 数据竞争&#xff08;Data Races&#xff09; 4. 内存可见性&#xff08;Memory Visibility&#xff09; 面临的挑战…

【玩转TableAgent数据智能分析】利用TableAgent进行教育数据分析

文章目录 前言九章云极&#xff08;DataCanvas&#xff09;介绍前期准备样例数据集体验1. 样例数据集-Airbnb民宿价格&评价 体验1.1 体验一1.2 体验二 教育数据的分析&#xff08;TableAgent&ChatGLM对比&#xff09;1. 上传文件2. 数据分析与对比2.1 分析一2.1.1 Tabl…

Spring上下文之注解模块ConfigurationMethod

博主介绍:✌全网粉丝5W+,全栈开发工程师,从事多年软件开发,在大厂呆过。持有软件中级、六级等证书。可提供微服务项目搭建与毕业项目实战,博主也曾写过优秀论文,查重率极低,在这方面有丰富的经验✌ 博主作品:《Java项目案例》主要基于SpringBoot+MyBatis/MyBatis-plus+…

转载: iOS 优雅的处理网络数据

转载&#xff1a; iOS 优雅的处理网络数据 原文链接&#xff1a;https://juejin.cn/post/6952682593372340237 相信大家平时在用 App 的时候, 往往有过这样的体验&#xff0c;那就是加载网络数据等待的时间过于漫长&#xff0c;滚动浏览时伴随着卡顿&#xff0c;甚至在没有网…

十五 动手学深度学习v2计算机视觉 ——全连接神经网络FCN

文章目录 FCN FCN 全卷积网络先使用卷积神经网络抽取图像特征&#xff0c;然后通过卷积层将通道数变换为类别个数&#xff0c;最后通过转置卷积层将特征图的高和宽变换为输入图像的尺寸。 因此&#xff0c;模型输出与输入图像的高和宽相同&#xff0c;且最终输出通道包含了该空…

【MySQL学习之基础篇】函数

文章目录 前言1. 字符串函数2. 数值函数3. 日期函数4. 流程函数 前言 函数 是指一段可以直接被另一段程序调用的程序或代码。 也就意味着&#xff0c;这一段程序或代码在MySQL中已经给我们提供了&#xff0c;我们要做的就是在合适的业务场景调用对应的函数完成对应的业务需求即…