博客

vue 基础 promise

1.promise基本使用

 		<script>
            new Promise((resolve,reject)=>{
                setTimeout(()=>{
                    //成功
                    //收到data后把 data传递到then那
                   resolve('hello world')

                   //失败
                   //调用 reject
                   reject('error')
                },1000)
            }).then((data)=>{
                //处理代码
                console.log(data);
                console.log(data);
                console.log(data);
            }).catch(err =>{
                console.log(err);
            })
        </script>

说明：

• 1.成功时，2个参数 成功时（resolve）失败时（reject）

2.promise失败的时候

 <script>
        new Promise ((resolve,reject) =>{
            setTimeout(()=>{
                // resolve('hello Vue.js')
                reject('error message')
            },1000)
        }).then(data=>{
            console.log(data);
        },err=>{
            console.log(err);
        })
    </script>

说明：

1.当执行reject的时候就是错误的

2.会把错误信息当做参数 err 传递并打印

3.data是第一个参数，接收成功时的信息

4.err 是第二个参数，接收失败时候的错误信息

3.promise的链式编程一

<script>
        //  参数 -> 函数(resolve,reject)
        //     resolve ,reject 本身又是函数
        //     链式编程
            new Promise((resolve, reject) => {
                //第一次网络请求
                setTimeout(() => {
                    resolve();
                }, 1000);
            })
                .then(() => {
                    // 第一次结果的处理
                    console.log("Hello world");
                    console.log("Hello world");
                    console.log("Hello world");
                    console.log("Hello world");
                    console.log("Hello world");

                    return new Promise((resolve, reject) => {
                        // 第二次网络请求
                        setTimeout(() => {
                            resolve();
                        }, 1000);
                    });
                })
                .then(() => {
                    // 第二次处理的代码
                    console.log("hello vue");
                    console.log("hello vue");
                    console.log("hello vue");
                    console.log("hello vue");
                    console.log("hello vue");

                    return new Promise((resolve, reject) => {
                        // 第三次网络请求
                        setTimeout(() => {
                            resolve();
                        });
                    });
                })
                .then(() => {
                    setTimeout(() => {
                        // 第三次处理的代码
                        console.log("Hello python");
                        console.log("Hello python");
                        console.log("Hello python");
                        console.log("Hello python");
                        console.log("Hello python");
                    });
                });

 
    </script>

说明：

1.第一次网络请求完之后 .then执行第一次的处理结果

2.然后返回第二次的网络请求.then执行第二次的处理结果

…

4.promise的链式编程二

<script>
		 //网络请求：aaa -> 自己处理（10行）
            //处理：aaa111 -> 自己处理（10行）
            //处理：aaa111222 -> 自己处理
	       new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve("aaa");
                }, 1000);
            })
                .then((res) => {
                    //1.自己处理
                    console.log(res, "第一层的10行处理代码");

                    //2.对结果进行第一次处理
                     return Promise.resolve(res + "111");
                    // return Promise.reject('err message');
                    //throw 'err message'

                })
                .then((res) => {
                    console.log(res, "跌二层的10行处理");
                    return Promise.resolve(res + "222");
                })
                .then((res) => {
                    console.log(res, "第三层的10行代码处理");
                }).catch(err =>{
                    console.log(err);
                })
</script>

输出结果

aaa 第一层的10行处理代码
aaa111 跌二层的10行处理
aaa111222 第三层的10行代码处理

5.promise的all方法使用

 <script>
        Promise.all([
        
              new Promise((resolve,reject) =>{
                setTimeout(()=>{
                    // resolve('results1')
                    resolve({nam2:'zhangsan',age:19,sex:'男'})
                },2000)
            }),
            new Promise((resolve,reject) =>{
                setTimeout(()=>{
                    // resolve('results2')
                    resolve({nam2:'feng',age:16,sex:'男'})
                },1000)
            })
        ]).then(results =>{
            console.log(results);
        })
      </script>

说明：

1.俩个promise都执行成功才执行results