vue-axios详细介绍,vue-axios和axios
Axios是vue生态系统的重要组成部分，我花了一些时间来学习它。下面这篇文章主要介绍axios和Vue整合运营的相关信息，有需要的可以参考一下。
目录
前言一、axios是什么？1.定义2。原则3。主要特点2。axios 3的应用。axios vue应用综述
前言
在学习了vue的本地应用操作之后，本文将学习Vue的网络应用，介绍axios，学习axios与Vue的结合。
一、axios是什么？
1.定义
Axios是一个基于promise的HTTP库，可以在浏览器和node.js中使用
2.原理
Axios本质上是原生XHR的封装，但它是Promise的实现版本，符合最新的ES规范。
3、主要特点
1.从node.js创建一个http请求
2.支持承诺API
3.拦截请求和响应
4.转换请求和响应数据。
5.取消请求
6.自动转换JSON数据
7.客户端支持防御XSRF的主要功能
8.从浏览器创建XMLHttpRequests
二、axios的应用
1.axios必须先导入，然后才能使用。
2.使用get或Post方法发送相应的请求
3.当请求成功或失败时，将触发then方法中的回调函数。
4.响应内容或错误信息可以通过回调函数的参数获得。
代码解析
1.axios通过get或post发送请求。
2.在axios.get()中填写获得的请求地址，后面是请求的参数？连接
3.then()表示采集成功后要处理的事件，采集失败时要处理的事件。
这两个事件用逗号隔开。
type= button value= get request class= get
type= button value= post request class= post
！-官方网站提供的axios在线地址-
script src= https://UNP kg . com/axios/dist/axios . min . js /script
脚本
/*
1:随机笑话
申请地址：https://autumnfish.cn/api/joke/list
方法：获取
请求参数：num(笑话数，数量)
回复内容：随机笑话
*/
document.querySelector(。get’)。onclick=function (){
axios . get( https://autumnfish . cn/API/joke/list？num=3’)。然后(函数(响应){
console.log(响应)；
}，函数(错误){
console . log(err)；
})
}
/*
2:用户注册
申请地址：https://autumnfish.cn/api/user/reg
方法：邮寄
请求参数：用户名(用户名，字符串)
响应内容：注册成功或失败。
*/
document.querySelector(。帖子)。onclick=function(){
axios . post( 3359 autumnfish . cn/API/user/reg ，{用户名：李一禾 })。然后(函数(响应){
console.log(响应)；
}，函数(错误){
console . log(err)；
})
}
/脚本
效果展示：
按下按钮后，所有的响应值将被打印在控制台上。
三、axios+vue的应用
1.这在axios回调函数中已被更改，data中的数据无法访问。
2.保存这个，在回调函数中直接使用保存的这个。
3.与本地应用最大的区别在于它改变了数据源。
代码显示：
1.这次结合axios和vue，改变数据源。
2.axios在网络上获取的信息可以通过vue显示。
3.axios的操作和上面没什么区别，只是放在vue的一个事件里。
4.因为返回的响应值很多，我们只想找到我们想要的。我们可以直接写。
比如：response.data，我们可以直接写在下面。
div id=应用程序
Type= button value= get笑话 @ click= get笑话
p{{joke}}/p
/div
！-开发环境版本，包含有用的命令行警告-
script src= https://cdn . jsdelivr . net/NPM/vue @ 2/dist/vue . js /script
！-官方网站提供的axios在线地址-
script src= https://UNP kg . com/axios/dist/axios . min . js /script
脚本
/*
1:随机笑话
申请地址：https://autumnfish.cn/api/joke/list
方法：获取
请求参数：num(笑话数，数量)
回复内容：随机笑话
*/
var app=新Vue({
埃尔： #app ，
数据：{
笑话：“非常有趣的笑话”
},
方法：{
getJoke:function (){
var that=this
axios . get( https://autumn fish . cn/API/joke )。然后(函数(响应){
console.log(response.data)
that . joke=response . data；/*此处不能使用this.joke，因为对象已经更改*/
}，function (err){ })
}
},
})
/脚本
效果展示：
1.当按钮被按下时，事件被触发。
2.因为vue是基于数据开发的，所以当数据发生变化时，页面上的显示也会发生变化。
3.当事件被触发时，我们将axios获取的数据赋给vue中的变量，这样当变量发生变化时，页面上的段子也会发生变化。
总结
本文介绍了axios和vue的简单集成实验，大家可以自己实践一下！
这就是这篇关于axios和vue集成的文章。有关axiosvue集成的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。