第1节 谈谈Promise 和 async/awiat

前言: 回顾js的作用: 存储数据, 传输数据, 处理数据, 展示数据

1. 存储数据有哪些方式(套路)

   var a = 222;  // 变量
   var arr = [1,23,3]; // 数组
   var obj = {name:'zs'}; // 对象
   data-index=222        // 定义属性
   // 读取数据的方式
   console.log(a);
   arr[0];
   obj.name;
   $(选择器).data('index');

2. 传输数据有哪些方式

   (1)页面跳转
   (2)函数调用
   (3)调用接口: 把数据从服务器传输到前端

   promise是用来存储数据, 它有它自己存和取的方式

promise是什么:

所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。promise是异步编程的一种解决方案。

(一) 创建promise对象和存储数据

<script>
    // 创建promise对象
    var promiseObj = new Promise(function(resolve, reject) {
        // 2. 调用resolve把成功的数据存储到promise对象里
        resolve(222);
    });
    console.log('promiseObj', promiseObj);
    console.log('\n-----------------------')
    // 创建promise对象
    var promiseObj2 = new Promise(function(resolve, reject) {
        // 2. 调用reject把失败的数据存储到promise对象里
        reject('失败了');
    });
    console.log('promiseObj2', promiseObj2);
    console.log('\n-----------------------')
    // 创建promise对象
    var flag = false;
    var promiseObj3 = new Promise(function(resolve, reject) {
        if (flag) {
            resolve(222);
        } else {
            reject('失败了');
        }
    });
    console.log('promiseObj3', promiseObj3);
</script>

(二) 获取promise对象存储的数据

<script>
    var boo = false;
    var promseObj = new Promise(function(resolve, reject) {
        if (boo) {
            resolve({
                name: 'zs'
            });
        } else {
            reject({
                msg: '失败了'
            })
        }
    })
    // 获取promiseObj对象的数据,then获取成功的信息,catch获取失败的信息
    promseObj.then(function(result) {
        console.log(result);
    }).catch(function(error) {
        console.log(error);
    })
</script>

(三) 使用promise对象存储异步请求结

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    // 1. new一个promise对象
    var promiseObj = new Promise(function(resolve, reject) {
        $.ajax({
            url: 'http://huruqing.cn:3000/api/film/getList',
            data: {},
            type: 'get',
            success(res) {
                resolve(res);
            },
            error: function(err) {
                reject(err);
            }
        })
    })
    // 2. 获取数据
    promiseObj.then(function(res) {
        console.log(res);
    }).catch(function(err) {
        console.log(err);
    })
</script>

(四) promise对象的三种状态

创建promise对象有三种状态

• Pending 进行中，初始状态，既不是成功，也不是失败状态
• Resolved（已完成，又称 Fulfilled）
• Rejected（已失败）

<script>
    var code = 666;
    // 1. 创建一个promise对象
    var promiseObj = new Promise(function(resolve, reject) {
        // 2. 调用resolve把成功的数据存储到promise对象里
        setTimeout(function() {
            if (code === 666) {
                resolve({
                    code: 6666,
                    msg: '成功了'
                });
            } else {
                // 3. 调用reject把失败的数据存储到promise对象里
                reject({
                    msg: '失败了'
                })
            }
        }, 2000);
    });
    // 4. promise的三种状态
    // a. pending
    console.log(promiseObj);
    // 2秒后再查看结果
    // b.Resolved或Rejected
    setTimeout(function() {
        console.log(promiseObj);
    }, 2000)
</script>

(五) 配合async await使用可以使异步变同步

1. async await 举例：

 // 1. 创建一个函数,在function前面加上async
    async function getData() {
        // 2. 创建一个promise对象,并存储数据
        var promiseObj = new Promise(function(resolve, reject) {
                setTimeout(function() {
                    resolve({
                        msg: 'success'
                    });
                }, 2000)
            })
            // 3. 用await等待结果, 有了结果之后再执行 
        var result = await promiseObj;
        console.log(result);
    }
    getData();

1. 使用函数返回promise对象

   // 项目中一般使用一个函数来返回一个promise对象
    function getObj() {
        var promiseObj = new Promise(function(resolve, reject) {
            setTimeout(function() {
                resolve({
                    msg: 'success'
                });
            }, 2000)
        })
        return promiseObj;
    }
    async function getData2() {
          // 调用getObj()得到一个promise对象, 使用await等待它结果
        var result = await getObj();
        console.log(result);
    }

(六) promise配合async await的好处: 可以避免回调地狱

1. 回调函数, 回调地狱是什么

2. 使用async await解决回调地狱

 // async await应用，可以避免过多的回调函数（俗称回调地狱）, 下面是使用async await对上面代码进行改造
    // 1. 封装ajax方法
    function getData(url, data) {
        // 2.使用promise对象存储请求结果
        var promiseObj = new Promise(function(resolve, reject) {
            $.ajax({
                url: url,
                data: data,
                type: 'get',
                dataType: 'json',
                success: function(res) {
                    resolve(res);
                },
                error: function(err) {
                    reject(err);
                }
            })
        })
        return promiseObj;
    }
    // 2.获取电影详情
    async function getDetail() {
        // (1).请求电影列表
        var url = 'http://huruqing.cn:3000/api/film/getList';
        var data = {};
        var result1 = await getData(url, data);
        // 查找流浪地球的那部电影
        var filmList = result1.films;
        var film = filmList.find(function(item) {
            return item.name === '流浪地球';
        });
        // (2).请求电影详情 
        var url = 'http://huruqing.cn:3000/api/film/getDetail';
        var data = {
            filmId: film.filmId
        };
        var result2 = await getData(url, data);
        console.log('流浪地球的详情是:', result2);
    }
    getDetail();

(七) promise.all可以使多个请求结果都返回后再处理

//     请求参数为1个数组,数组的成员为promise独享
promise.all([promise1,promise2,promise3]);

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
    // 1.创建二个promise对象
    // 2. 使用promise.all获取二个promise对象存储的值
    var promiseObj1 = new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve({
                name: '张三',
                age: 18
            });
        }, 1000)
    })
    var promiseObj2 = new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve({
                name: '李四',
                age: 22
            });
        }, 3000)
    })
    // 参数是一个数组, 数组的成是promise对象,Promise.all也是promise对象
    Promise.all([promiseObj1, promiseObj2]).then(function(res) {
        console.log(res);
    }).catch(function(err) {
        console.log(err)
    });
</script>