脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue交互方式

Vue前端后端的交互方式 axios

 更新时间：2022年04月25日 08:39:53   作者：清城幻影  
这篇文章主要介绍了Vue前端后端的交互方式 axios，axios 为第三方数据请求库，下文具体的内容介绍需要的小伙伴可以参考一下，希望对你的学习有所帮助

前言：

大家都知道,只要进行数据交互,肯定就要去请求接口,数据请求的方式有vue-resource axios fetch等方式进行数据集请求

  • 1，vue-resource ：官方出品，在vue2x之后已经停止更新
  • 2，axios ：第三方数据请求库
  • 3,  fetch：是JavaScript最新标准出的一个数据请求方式

今天跟大家谈谈我们最熟悉,也是最常用的axios

安装：

npm install --save axios

语法

最简单的写法

get请求：

axios.get("请求地址?kty=val&key=val").then(()=>{
//成功的回调函数
}).catch(()=>{
//失败的回调函数
})

post请求

一般写法

axios.post("请求地址",{发送的key:发送的val,xxx:xxx}.then(()=>{
//请求成功的回调函数
}).catch(()=>{
//失败的回调函数
})
)

案例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="demo">
</div>
</body>
</html>
<script>
new Vue({
el:"#demo",
mounted(){
axios({
url:"http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187",
method:"GET"
}).then((ok)=>{
console.log(ok);
}).catch((err)=>{
console.log(err);
})
}
})
</script>

数据请求封装

methods:{
axiosLink(url,method){
// 数据请求的封装
return new Promise((resolve,reject)=>{
axios({
// es6中键值对一样可以简写
url,
method
}).then((ok)=>{
// 我们需要把成功的数据交给promise
resolve(ok)
}).catch((err)=>{
// 我们需要把失败的数据交给promise
reject(err)
})
})
}

举例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="demodiv">
<button @click="fun()">点我请求1</button>
<button @click="funb()">点我请求2</button>
</div>
<script>
new Vue({
el: "#demodiv",

data:{
},
methods:{
axiosLink(url,method){
return new Promise((resolve,reject)=>{
axios({
url,
method,
}).then((ok)=>{
resolve(ok)
}).catch((err)=>{
reject(err)
})
})
},

fun() {
this.axiosLink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187", "GET").then((ok) => {
console.log(ok);
}).catch((err) => {
console.log(err)
})
},
funb() {
console.log(123);
this.axiosLink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187","GET").then((ok)=>{
console.log(ok);
}).catch((err)=>{
console.log(err);
})
}
}
})
</script>
</body>
</html>

数据展示：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script src="./node_modules/axios/dist/axios.js"></script>
</head>
<body>
<div id="demo">
<button @click="fun()">点击请求数据</button>
<img src="./1.gif" v-if="bool">
<ul>
<li v-for="(v,i) in arr">
{{v.commentTxt}}
</li>
</ul>
</div>
</body>
</html>
<script>
new Vue({
el:"#demo",
data:{
bool:false,
arr:[]
},
methods: {
axiosLink(url,method){
return new Promise((resolve,reject)=>{
axios({
url,
method
}).then((ok)=>{
resolve(ok)
}).catch((err)=>{
reject(err)
})
})
},
fun(){
this.bool=true
this.axiosLink("http://api.artgoer.cn:8084/artgoer/api/v1/user/324380/v3/topic/topicHomeByLabel?pageIndex=1&token=b544cd63-6d42-46fe-a96c-3cf96bae3113&topicId=62187","GET").then((ok)=>{
console.log(ok.data.data.commentList);
this.arr=ok.data.data.commentList
this.bool=false
}).catch((err)=>{
console.log(err);
})
}
},
})
</script>

到此这篇关于Vue前端后端的交互方式 axios的文章就介绍到这了,更多相关Vue交互方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue列表渲染的示例代码

    Vue列表渲染的示例代码

    这篇文章主要介绍了Vue列表渲染的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue 使用 echarts 绘制中国地图的实现代码

    vue 使用 echarts 绘制中国地图的实现代码

    这篇文章主要介绍了vue 使用 echarts 绘制中国地图,内容包括插入echarts所需模块及完整的代码，代码简单易懂，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-01-01
  • vue全局过滤器概念及注意事项和基本使用方法

    vue全局过滤器概念及注意事项和基本使用方法

    这篇文章主要给大家分享了vue全局过滤器概念及注意事项和基本使用方法，下面文字围绕vue全局过滤器的相关资料展开具体的详细内容,需要的朋友可以参考一下，希望对你有所帮助
    2021-11-11
  • elementUI checkBox报错Cannot read property 'length' of undefined解决

    elementUI checkBox报错Cannot read property &ap

    这篇文章主要为大家介绍了elementUI checkBox报错Cannot read property 'length' of undefined的解决分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • vue3实现淘宝放大镜效果的示例代码

    vue3实现淘宝放大镜效果的示例代码

    放大镜效果在很多购物网站都可以看到，本文主要介绍了vue3实现淘宝放大镜效果的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • vue filter的几种用法示例小结

    vue filter的几种用法示例小结

    Vue.filter函数用于注册一个全局的过滤器,该过滤器可以在模板和组件中使用,这篇文章主要介绍了vue filter的几种用法示例小结,需要的朋友可以参考下
    2024-08-08
  • vue-router二级导航切换路由及高亮显示的实现方法

    vue-router二级导航切换路由及高亮显示的实现方法

    这篇文章主要给大家介绍了关于vue-router二级导航切换路由及高亮显示的实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
    2019-07-07
  • vue使用百度地图报错BMap is not defined问题及解决

    vue使用百度地图报错BMap is not defined问题及解决

    这篇文章主要介绍了vue使用百度地图报错BMap is not defined问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • Vue computed计算属性详细讲解

    Vue computed计算属性详细讲解

    computed是vue的配置选项,它的值是一个对象,其中可定义多个计算属性,每个计算属性就是一个函数,下面这篇文章主要给大家介绍了关于vue中计算属性computed的详细讲解,需要的朋友可以参考下
    2022-10-10
  • vue--点击当前增加class,其他删除class的方法

    vue--点击当前增加class,其他删除class的方法

    今天小编就为大家分享一篇vue--点击当前增加class,其他删除class的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09

最新评论