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库实现请求后台数据的异步操作，代码如下：

1. Vue.http.get('/api/user')
   
2.     .then(response => {
   
3.         this.users = response.body;
   
4.     }, response => {
   
5.         console.log('error');
   
6.     });

复制代码

上述代码中，先进行了一个异步操作，即调用Vue.http.get方法来请求后台数据。然后，将结果通过Promise的then方法进行处理，从而实现对于数据结果的控制。在这个例子中，如果响应成功，返回数据的主体内容（response.body）将被赋值给该Vue实例的users变量，否则会在控制台输出"error"。
vue .then和链式调用

1 如果下级函数存在异步操作，
并且上级函数需要等待下级函数的异步操作完成后再继续执行，
那么在上级函数中就需要使用

1. .then()

复制代码

方法来处理异步操作的结果。
2在let obj =

1. axios.get(path).then((resp => { return resp })

复制代码

这个链式调用中，确实会有两个返回值。
第一个值是 请求的结果axios.get(path)
第二个值是.then()中数据处理后的结果 Promise 对象 obj 。
3

1. .then

复制代码

返回值是Promise 对象
4发起异步请求：

1. axios.get(path) 得到第一返回值

复制代码

处理响应结果：

1. .then((resp) => { ... }) 得到第二返回值

复制代码

Promise 对象

1. 上级函数调用下级带.then的函数必须 

复制代码

1. .then((data) => { ... })

复制代码

5 上级函数 使用了.then(), 下级函数可以不使用.then,直接返回请求结果
第一种 上级函数 .then() ,下级函数.then() 返回处理完的数据

1. export function funcB() {
   
2.   let newData = []
   
3.     newData = fetchData().then((data) => {
   
4.       console.log(data); // 直接使用数据
   
5.       return data;
   
6.     });
   
7.     console.log(newData);
   
8.   }
   
9.   return newData;
   
10. }
    
11. function fetchData() {
    
12.   try {
    
13.     let path = 'dt.csv'
    
14.     let obj = axios.get(path).then((resp) => {
    
15.         // 这里处理数据
    
16.          return data;
    
17.         })
    
18.     return obj; // 返回Promise 对象
    
19.   } catch (error) {
    
20.     // 处理错误
    
21.     console.error(error);
    
22.     return null;
    
23.   }
    
24. }

复制代码

第二种 上级函数 .then() ,下级函数只返回请求结果

1. export function funcB() {
   
2.   let newData = []
   
3.     newData = fetchData().then((data) => {
   
4.     // 这里处理数据
   
5.       console.log(data); // 在这里处理 newData
   
6.       return data;
   
7.     });
   
8.     console.log(newData);
   
9.   }
   
10.   return newData;
    
11. }
    
12. function fetchData() {
    
13.   try {
    
14.     let path = 'dt.csv'
    
15.     let obj = axios.get(path)
    
16.     return obj; // 返回Promise 对象
    
17.   } catch (error) {
    
18.     // 处理错误
    
19.     console.error(error);
    
20.     return null;
    
21.   }
    
22. }

复制代码

到此这篇关于vue .then和链式调用的文章就介绍到这了,更多相关vue链式调用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/291999mfx.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！