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(()=>{
//失败的回调函数
})
)

案例：

数据请求封装

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

举例：

点我请求1
点我请求2

数据展示：

点击请求数据



{{v.commentTxt}}

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