Vue交互方式 Vue前端后端的交互方式 axios
清城幻影 人气:0想了解Vue前端后端的交互方式 axios的相关内容吗,清城幻影在本文为您仔细讲解Vue交互方式的相关知识和一些Code实例,欢迎阅读和指正,我们先划重点: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.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>
加载全部内容