Vue前端后端的交互方式 axios

Vue前端后端的交互方式 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.webp" 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交互方式内容请搜索易知道(ezd.cc)以前的文章或继续浏览下面的相关文章希望大家以后多多支持易知道(ezd.cc)!

推荐阅读