JavaScript
搜索
分类

Vue前端后端的交互方式 axios

作者：清城幻影 时间：2024-05-21 10:28:58　

前言：

大家都知道,只要进行数据交互,肯定就要去请求接口,数据请求的方式有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>

来源：https://blog.51cto.com/u_15451955/4777127

标签：Vue前端,后端,交互,方式,axios
0
投稿

猜你喜欢

  • Python脚本处理空格的方法

    2021-03-12 09:45:33

  • 深刻理解Oracle数据库的启动和关闭

    2010-07-26 13:08:00

  • 解决Pytorch修改预训练模型时遇到key不匹配的情况

    2022-11-29 15:43:43

  • ecshop百度编辑器远程下载无后缀的图片，并且加水印

    2023-08-14 17:31:41

  • 解说mysql之binlog日志以及利用binlog日志恢复数据的方法

    2024-01-28 08:39:57

  • Python3连接MySQL（pymysql）模拟转账实现代码

    2024-01-21 09:37:45

  • Python变量定义的简单使用介绍

    2021-08-23 07:35:26

  • Javascript removeChild()删除节点及删除子节点的方法

    2023-07-02 05:30:22

  • 剖析网页设计中的几何圆

    2010-10-19 12:27:00

  • PHPMyadmin2.10中文显示为乱码的解决办法

    2007-08-22 08:18:00

  • debug case: onsubmit=return false依然能提交

    2009-01-18 13:07:00

  • python Django 创建应用过程图示详解

    2022-10-29 03:04:40

  • ajax中get和post的说明及使用与区别

    2024-04-29 13:58:17

  • 往MySQL中存储图片的方法

    2024-01-17 15:57:49

  • Oracle的默认用户密码

    2012-07-11 15:29:22

  • python通过floor函数舍弃小数位的方法

    2022-08-17 10:56:17

  • Pytorch基本变量类型FloatTensor与Variable用法

    2022-10-10 21:14:45

  • windows下python安装pip方法详解

    2023-12-13 19:43:16

  • python实现图片处理和特征提取详解

    2023-10-04 02:28:16

  • Python 中将秒转换为小时、分钟和秒的示例代码

    2023-06-14 12:15:06
    • asp之家 网络编程 m.aspxhome.com