vuex异步请求,vue调用异步方法
前端数据都是通过接口请求获取的，而Vue本身不支持ajax请求，那么Vue中的异步请求如何解决？这里有一些方法可以帮助你。
目录
如何进行异步请求1。axios实现异步请求2。vue-resource实现异步请求(基本与axios步骤相同)。vue接口异步请求其他方法。
如何进行异步请求
一、axios实现异步请求
1.项目中安装axiox
npm安装-保存axios
2.在main.js中引入以供全局使用
从“axios”导入axios
//可以为axios的ajax请求设置统一的主机和端口号。
axios . defaults . baseurl= http://157 . 122 . 54 . 189:8080/；
//将axios对象添加到Vue的prototype对象中，只需要使用这个。使用时的对象名。
Vue.prototype.$http=axios
3.axios之get请求
Vue前端：
模板
差异
/div
/模板
脚本
导出默认值{
方法：{
getData(){
//axios-get请求
这个。$http.get(/getData1 )。then(r=console.log(r))//接口调用成功返回的数据。catch(err=console.log(err))，//接口调用失败返回的数据
}
}
Mounted(){//在模板或el对应的html渲染完成后调用里面的方法。
this.getData()
}
}
/脚本
style lang=scss 范围
/风格
背面节点：
server.get(/getData1 ，function(req，res){
资源发送({
消息: aaa
})
})
请求结果：
4.axios之post请求
Vue前端：
两种形式的提交参数：
//1.可以直接传入字符串name=张三age=19。
//2.可以作为宾语传入{姓名：“三”，年龄：19}
模板
差异
/div
/模板
脚本
导出默认值{
方法：{
getData(){
//axios-post请求值传递
这个。$http({
方法： post ，
URL:“/get data 2”，
标题：{
“内容类型”:“应用程序/x-www-form-urlencoded”
},
数据：{
姓名： xxx
},
transform request:[function(data){//更改传递值的格式。
让ret=
对于(让它进入数据){
ret=encodeURIComponent(it)= encodeURIComponent(data[it])
}
返回ret.slice(0，ret.length-1)
}],
})。然后(r=console.log(r))。catch(err=console.log(err))
}
}
Mounted(){//在模板或el对应的html渲染完成后调用里面的方法。
this.getData()
}
}
/脚本
style lang=scss 范围
/风格
背面节点：
server.post(/getData2 ，function(req，res){
req.on(数据，函数(数据){
console . log(query string . parse(decodeURIComponent(data)))；
});
资源发送({
消息: bbb
})
})
结果：
看到这里，你可能会奇怪为什么帖子请求这么繁琐。这和axios post方法默认使用application/json格式编码数据有关，生成的数据格式是request payload，不是我们常见的表单数据格式(Form data format)。
使用这种编码方法，序列化的json字符串将被传递到后台，而不是我们想要的对象的形式。后端得到的值不能用原来的解析方法解析，会解析出错误的数据。所以在这里，前端可以将其转换成键值对再传递给后端，稍微处理一下就可以正常使用了。
当然也可以在后端解决，解决方法更简单。只需使用body-parser中间件直接为Node解析json字符串。
server.post(/getData2 ，bodyParser.json()，function(req，res){
console . log(req . body)；
资源发送({
消息: bbb
})
});
二、vue-resource实现异步请求（和axios步骤基本相同）
1.项目中安装vue-resource
npm安装-保存vue-资源
2.在main.js中引入以供全局使用
从“vue-resource”导入vueResource
Vue.use(vueResource)//这里不一样
3.vue-resource之get请求
这个。$http.get(/getData1 )。then(r=console.log(r))//接口调用成功返回的数据。catch(err=console.log(err))，//接口调用失败返回的数据
4.vue-resource之post请求
这个。$http.post(/getData2 ，{name:bbb})。then(r=console.log(r))//接口调用成功返回的数据。catch(err=console.log(err))，//接口调用失败返回的数据
5.vue-resource之jsonp请求
这个. http $ jsonp(/get data 3 )。then(r=console.log(r))//接口调用成功返回的数据。catch(err=console.log(err))，//接口调用失败返回的数据
注意
如果在使用跨域请求之后还是无法获取到跨域的数据，前端可以使用代理的方式，假装是从同一域下请求的数据，修改配置下指数文件，如下图：
在最后调用的时候直接：
这个. http.get(/api/接口)
vue接口异步请求
//查列表
异步获取列表（页面索引){
let data={
页面索引，
页面大小：this.pageSize
}
等待getCouponPageList(数据)。然后(res={
const { data: { code，msg，data } }=res
if (code===0) {
data.list.forEach(v={
五。总计金额=
v.buyerPayAmount=
})
this.tableData=data.list
data.list.forEach(async (ele，index)={
if (ele.status===this .$t(已使用)) {
让temp=等待这个。coupongetalipay(ele。账单明细)
ele.totalAmount=临时总额/100
this.tableData[index]=ele
}
})
this.dataCount=data.total
}否则{
这个Message.error(消息)
}
this.loading=false
}).接住(错误={
console.log(错误消息)
})
},
//根据编号查列表的后几项
couponGetAlipay(订单号){
返回新承诺((解决，拒绝)={
couponGetAlipay({orderNo}).然后(res={
const { data: { code，data } }=res
if (code===0) {
解析（数据)
}
}).接住(错误={
console.log(错误消息)
})
})
},
其他方法
一：
getData:异步函数(){ //同步方法
尝试{ //顺序请求
等等这个。getsetuplist()；
等等这个。getrolelist()；
等等这个。getlist()；
} catch (e) {}
}
二：
getData:异步函数(){ //同步方法
尝试{ //顺序请求
等等这个。getsetuplist()；
等等这个。getrolelist()；
等等这个。getlist()；
} catch (e) {}
}
三：
功能登录（代码){
返回新承诺((解决，拒绝)={ //同步方法
getData1().然后(response={ //方法一
返回响应//返回正确值
}).然后((res)={
getData2().然后((响应)={ //方法一返回正确后执行方法二
返回响应//返回正确值
}).然后((res)={
getData3().然后(response={ //方法二返回正确后执行方法三
返回响应//返回正确值
}).然后(res={
getData4().然后(response={ //方法三返回正确后执行方法四
解决（响应)//方法执行完毕，抛出最后结果或进行某些操作
}).catch(res={
拒绝(方法四返回错误)
})
}).catch(res={
拒绝(方法三返回错误)
})
}).catch(res={
拒绝(方法二返回错误)
})
}).catch(res={
拒绝(方法一返回错误)
})
})
}
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。