vue-axios使用,vue.js axios
本文主要介绍Vuejs如何通过Axios请求数据，有很好的参考价值。希望对你有帮助。如有错误或不足之处，请不吝赐教。
目录
通过Axios请求数据安装Axios工具包Axios工具配置Axios工具使用Axios工具Vue请求数据(Axios)什么是Axios简介和用法
通过Axios请求数据
我们来构建api接口调用工具Axios。Vue本身不支持ajax调用。如果需要这些功能，需要安装相应的工具。
支持ajax请求的工具有很多，比如superagent和axios。今天我们用axios，因为我听说最近网上的辅导书大部分都用axios。axios本身已经做了很好的优化和打包，但是用起来还是比较繁琐，那就重新打包吧。
安装Axios工具
cnpm安装axios -D
安装时，一定要切换到我们的项目根目录，然后运行安装命令。然后，如果提示您上述信息，安装就完成了。
封装Axios工具
编辑src/api/index.js文件(我们在上一章整理目录结构时在src/api/directory中创建了一个空的index.js文件)，现在我们为这个文件填充内容。
//配置API接口地址
var root= https://cnode js . org/API/v1
//参考轴
var axios=require(axios )
//自定义判断元素类型JS
函数到类型(对象){
return ({}).toString.call(obj)。匹配(/\s([a-zA-Z] )/)[1]。toLowerCase()
}
//参数过滤函数
函数filterNull (o) {
for(o中的变量键){
if (o[key]===null) {
删除o[键]
}
if (toType(o[key])===string) {
o[key]=o[key]。修剪()
} else if(to type(o[key])=== object ){
o[key]=filterNull(o[key])
} else if(to type(o[key])=== array ){
o[key]=filterNull(o[key])
}
}
返回o
}
/*
接口处理功能
这个功能的每一项都不一样。我现在调整的适用于
https://cnodejs.org/api/v1s接口，如果是另一个接口的话。
根据所需接口的参数进行调整。参考文件的地址：
https://cnodejs.org/topic/5378720ed6e2d16149fa16bd
主要是不同界面的成功识别和失败提示不一致。
另外，不同项目的处理方式不一致，这里的错误是简单的预警。
*/
函数apiAxios(方法，url，参数，成功，失败){
if (params) {
params=filterNull(params)
}
axios({
方法：方法，
网址：网址，
data:method=== POST method=== PUT ？params : null，
params:method=== GET method=== DELETE ？params : null，
baseURL: root，
withCredentials: false
})。然后(函数(res) {
if (res.data.success===true) {
如果(成功){
成功(结果数据)
}
}否则{
如果(失败){
失败(研究数据)
}否则{
window . alert( error: JSON . stringify(RES . data))
}
}
})。catch(函数(错误){
让res=err.response
如果(错误){
window . alert(“API错误，HTTP代码：“res.status”)
}
})
}
//返回vue模板中的调用接口
导出默认值{
get:函数(url，参数，成功，失败){
返回apiAxios(GET ，url，params，success，failure)
},
post:函数(url，参数，成功，失败){
返回apiAxios(POST ，url，params，success，failure)
},
put:函数(url、参数、成功、失败){
返回apiAxios(PUT ，url，params，success，failure)
},
删除：函数(url，参数，成功，失败){
返回apiAxios(DELETE ，url，params，success，failure)
}
}
关于AxIos的更多解释，请参见：https://github.com/mzabriskie/axios.
配置Axios工具
我们在使用之前，需要在src/main。j中进行简单的配置，先来看一下原始的主页。射流研究…文件
//要用"导入"命令加载的某视频剪辑软件构建版本
//(仅运行时或独立)已在webpack.base.conf中用别名设置。
从“vue”导入某视频剪辑软件
从导入应用程序 0.5/App
从导入路由器。/路由器
Vue.config.productionTip=false
/* eslint-禁用无-新*/
新Vue({
埃尔： #app ，
路由器，
模板：“App/”，
组件：{ App }
})
修改为：
//要用"导入"命令加载的某视频剪辑软件构建版本
//(仅运行时或独立)已在webpack.base.conf中用别名设置。
从“vue”导入某视频剪辑软件
从导入应用程序 0.5/App
从导入路由器。/路由器
//引用应用程序接口文件
从导入api ./api/index.js
//将应用程序接口方法绑定到全局
Vue.prototype.$api=api
Vue.config.productionTip=false
/* eslint-禁用无-新*/
新Vue({
埃尔： #app ，
路由器，
模板：“App/”，
组件：{ App }
})
通过以上的配置，我们就可以在项目中使用爱可信工具了，接下来我们来测试一下这个工具。
使用Axios工具
我们来修改一下src/page/Index.vue文件，将代码调整为以下代码：
模板
divindex页面/分区
/模板
脚本
导出默认值{
已创建(){
这个api.get(topics ，null，r={
控制台。对数(r)
})
}
}
/脚本
我们在索引。某视频剪辑软件中向浏览器的控制台输入一些接口请求到的数据，如果你和我也一样，那说明我们的接口配置完成正确。如下图：
如果你是按我的操作一步一步来，那最终结果应该和我一样。如果出错请仔细检查代码
Vue请求数据(Axios)
什么是Axios
爱可信是一个基于承诺的超文本传送协议库，可以用在浏览器和节点。射流研究…中。
Vue.js 2.0版本推荐使用爱可信来完成创建交互式、快速动态网页应用的网页开发技术请求。
引入
引入时不必纠结与某视频剪辑软件的先后顺序，它并不依赖与某视频剪辑软件
使用方法
1.get请求
得到中就只有一个参数，这个参数中包括前面的地址，后面传的参数用"?"拼接在地址后
已创建(){
爱可信。获取（
http://wkt.myhope365.com/weChat/applet/course/banner/list？数字=4
)。然后((res)={
控制台。日志(分辨率)；
这个。img list=RES . data。数据；
});
},
2.post请求(form格式)
要先定义一个形式把想要传的参数放进去
有两个参数：请求地址，表单
已创建(){
let from=new FormData()；
from.append(type ， boutique )；
from.append(pageNum ，2)；
from.append(pageSize ，10)；
爱可信。帖子( http://wkt。我的希望365。com/微信/小程序/课程/列表/类型，来自)。然后((res)={
控制台。日志(分辨率)；
这个。课程列表=研究数据。行；
//控制台。日志(这个。course list)；
});
},
3.post请求(JOSN格式)
这种情况下，有两个参数：请求地址，{传的参数}
但传的参数要以关于序列化的格式
已创建(){
爱可信。帖子( http://wkt。我的希望365。com/微信/小程序/主题/列表,{
启用：1,
})。然后((res)={
控制台。日志(分辨率)；
这个。列表=研究数据。行；
控制台。日志(这个。列表)；
});
},
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。