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;
}
}