[TOC]

前言: 回顾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（已失败） ```javascript 

    
<a name="HONJS"></a>
## (五) 配合async await使用可以使异步变同步
<a name="tfp1t"></a>
### 1. async await 举例：  
```javascript
 // 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();

    2. 使用函数返回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>