vue_Promise 学习

2022-11-07
天津
本文字数：2610 字
阅读完需：约 9 分钟

1.什么是 Promise？

Promise 是异步编程的一种解决方案。
异步事件：我们封装一个网络请求的函数，因为不能立即拿到结果，所以往往我们会传入另外一个函数，在数据请求成功时，将数据通过传入的函数回调出去

2.之前的解决方法 ajax

问题：回调地狱
我们需要通过一个 url1 从服务器加载一个数据 data1，data1 中包含了下一个请求的 url2 我们需要通过 data1 取出 url2，从服务器加载数据 data2，data2 中包含了下一个请求的 url3 我们需要通过 data2 取出 url3，从服务器加载数据 data3，data3 中包含了下一个请求的 url4 发送网络请求 url4，获取最终的数据 data4
是不是感觉太不直观了，Promise 就是解决这个的。

3.Promise 的基本使用

注：一般情况下，又异步操作的时候，使用 Promise 对这个异步操作进行封装。new Promise --> 构造函数(1 保存一些状态信息 2.执行传入的函数)在执行我们传入的回调函数时，会传入两个参数，resolve,reject 本身又是函数

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title></head><body><div id='app'>
</div><script src='../js/vue.js'></script><script>
    new Promise((resolve,reject)=>{        setTimeout(()=>{             //成功的时候，调用resolve             //resolve("hello world")
           //失败的时候，调用reject            reject("error message")        },1000)    }).then((data)=>{        //1.100行代码,比较优雅        console.log(data);    }).catch((err)=>{        console.log(err);    })   </script></body></html>

复制代码

resolve,reject 本身他们又是函数
resolve 代表请求成功，然后会执行 then 函数；reject 代表请求失败，然后会执行 catch 函数

4.Promise 的链式使用

实现要求：

网络请求：aaa =>自己处理（10 行）
处理：aaa+111 =>自己处理（10 行）
处理：aaa+111+2222 =>自己处理（10 行）

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title></head><body><div id='app'>
</div><script src='../js/vue.js'></script><script>    //网络请求：aaa =>自己处理（10行）    //处理：aaa+111 =>自己处理（10行）    //处理：aaa+111+2222 =>自己处理（10行）
    new Promise((resolve,reject)=>{        setTimeout(()=>{            resolve("aaa");        },1000)    }).then((res)=>{        //1.自己处理10行代码        console.log(res,'第一层10行代码');        //2.        return new Promise((resolve)=>{            resolve(res + '111')        })    }).then((res)=>{         console.log(res,'第二层10行代码');             //3.         return new Promise((resolve)=>{            resolve(res + '222')        })    }).then((res)=>{        console.log(res,'第三层10行代码');
     })</script></body></html>

复制代码

注：链式调用，可以一层层的调用
乍看，其实感觉这比 ajax 的回调地狱更麻烦，但是有个好处是：我们可以给很好的区分出每次的请求和处理代码。
可以简写为：

    ///2.链式简写   new Promise((resolve,reject)=>{        setTimeout(()=>{            resolve("aaa");        },1000)    }).then((res)=>{        //1.自己处理10行代码        console.log(res,'第一层10行代码');        //2.        return Promise.resolve(res + '111')    }).then((res)=>{        console.log(res,'第二层10行代码');        //3.        return Promise.resolve(res + '222')    }).then((res)=>{        console.log(res,'第三层10行代码');    })

复制代码

进一步简写：

    ///3.链式再次简写    new Promise((resolve,reject)=>{        setTimeout(()=>{            resolve("aaa");        },1000)    }).then((res)=>{        //1.自己处理10行代码        console.log(res,'第一层10行代码');        //2.        return res + '111';    }).then((res)=>{        console.log(res,'第二层10行代码');           return res + '222';    }).then((res)=>{        console.log(res,'第三层10行代码');    })

复制代码

5.Promise 的 all 函数使用

需求：两个异步处理的结果都返回时，执行下一步操作
1.ajax 的实现

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title></head><body><div id='app'>
</div><script src='../js/vue.js'></script><script>   //请求一：    isResult1 = false;    isResult2 = false;    $ajax({        url:"",        success:function(){            console.log('结果1');            isResult1 = true;            handleResult()        }    })
    //请求二：    $ajax({        url:"",        success:function(){            console.log('结果2');            isResult2 = true;            handleResult()        }    })
    function handleResult(){        if(isResult1 && isResult2){            //        }    }</script></body></html>

复制代码

2.promise 的 all 方法实现
当两个异步处理的结果都返回时，才会执行下一步 then 操作

<!DOCTYPE html><html lang='en'><head>    <meta charset='UTF-8'>    <meta name='viewport' content='width=device-width, initial-scale=1.0'>    <title>Document</title></head><body><div id='app'>
</div><script src='../js/vue.js'></script><script>    //利用promise处理    Promise.all([        new Promise((resolve,reject)=>{            setTimeout(()=>{                resolve("result1")            },2000)        }),        new Promise((resolve,reject)=>{            setTimeout(()=>{                resolve("result2")            },1000)        }),    ]).then(results =>{       console.log(results);    })
</script></body></html>

复制代码

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/331c9f35d1566820df6683c5e】。文章转载请联系作者。

Studying_swz

关注

还未添加个人签名 2020-12-23 加入

还未添加个人简介

发布

暂无评论

创作场景

vue_Promise 学习

1.什么是 Promise？

2.之前的解决方法 ajax

3.Promise 的基本使用

4.Promise 的链式使用

5.Promise 的 all 函数使用

Studying_swz

评论