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