vue .then和链式调用操作方法
Vue.then
一、Vue.then是什么意思
Vue.then是Vue.js框架中对于异步操作进行处理的一个方法。它与Promise结合使用，相当于Promise中的then方法，可以处理异步操作的结果，从而实现对后续流程的控制和处理。Vue.then方法是在Vue.js 2.1版本中引入的，目的是更好地支持异步操作。
二、Vue.then的使用
使用Vue.then方法，需要先进行异步操作，接着通过调用Promise中的then方法来对异步操作的结果进行处理。例如，在Vue.js中，可以使用Vue resource库实现请求后台数据的异步操作，代码如下：
Vue.http.get('/api/user')
.then(response => {
this.users = response.body;
}, response => {
console.log('error');
});上述代码中，先进行了一个异步操作，即调用Vue.http.get方法来请求后台数据。然后，将结果通过Promise的then方法进行处理，从而实现对于数据结果的控制。在这个例子中，如果响应成功，返回数据的主体内容（response.body）将被赋值给该Vue实例的users变量，否则会在控制台输出"error"。
vue .then和链式调用
1 如果下级函数存在异步操作，
并且上级函数需要等待下级函数的异步操作完成后再继续执行，
那么在上级函数中就需要使用 .then() 方法来处理异步操作的结果。
2在let obj = axios.get(path).then((resp => { return resp })
这个链式调用中，确实会有两个返回值。
第一个值是 请求的结果axios.get(path)
第二个值是.then()中数据处理后的结果 Promise 对象 obj 。
3 .then返回值是Promise 对象
4发起异步请求：axios.get(path) 得到第一返回值处理响应结果：.then((resp) => { ... }) 得到第二返回值Promise 对象上级函数调用下级带.then的函数必须 .then((data) => { ... })
5 上级函数 使用了.then(), 下级函数可以不使用.then,直接返回请求结果
第一种 上级函数 .then() ,下级函数.then() 返回处理完的数据
export function funcB() {
let newData = []
newData = fetchData().then((data) => {
console.log(data); // 直接使用数据
return data;
});
console.log(newData);
}
return newData;
}
function fetchData() {
try {
let path = 'dt.csv'
let obj = axios.get(path).then((resp) => {
// 这里处理数据
return data;
})
return obj; // 返回Promise 对象
} catch (error) {
// 处理错误
console.error(error);
return null;
}
}第二种 上级函数 .then() ,下级函数只返回请求结果
export function funcB() {
let newData = []
newData = fetchData().then((data) => {
// 这里处理数据
console.log(data); // 在这里处理 newData
return data;
});
console.log(newData);
}
return newData;
}
function fetchData() {
try {
let path = 'dt.csv'
let obj = axios.get(path)
return obj; // 返回Promise 对象
} catch (error) {
// 处理错误
console.error(error);
return null;
}
}到此这篇关于vue .then和链式调用的文章就介绍到这了,更多相关vue链式调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法
这篇文章主要介绍了关于Vue Router中路由守卫的应用及在全局导航守卫中检查元字段的方法，实现方法有两种，本文通过实例代码对每种方法介绍的很详细，需要的朋友参考下2018-12-12
最近搭建一个Springboot+vue前后端分离项目,真的很简单,下面这篇文章主要给大家介绍了关于如何在Vue和Spring boot之间实现前后端连接的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
这篇文章主要为大家详细介绍了Vue.js组件实现选项卡以及切换特效，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
本文主要介绍了vue实现通过手机号发送短信验证码登录的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-05-05
有些业务需求需要点击按钮复制链接,下面这篇文章主要给大家介绍了关于vue中如何实现复制内容到剪切板的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
这篇文章主要为大家介绍了Vue2.0生命周期，思考与理解“el被新创建的vm.$el替换”这句话，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
本篇文章主要介绍了Vue2.X的路由管理记录之 钩子函数（切割流水线），具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要为大家详细介绍了Vue3响应式核心之effect的相关知识，文中的示例代码讲解详细，对我们学习Vue3有一定的帮助，需要的可以参考一下2023-04-04
最近项目中有用到json编辑器,我选用了这款vue的编辑器,看起来也是比较简洁,接下来就具体介绍一下它,下面这篇文章主要给大家介绍了关于VUE3使用JSON编辑器的详细图文教程,需要的朋友可以参考下2023-04-04
本篇文章主要介绍了Vue的Class与Style绑定的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
最新评论