第1节谈谈Promise 和 async/awiat

[TOC]

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

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

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

传输数据有哪些方式

(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使用可以使异步变同步

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();

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

第1节 谈谈Promise 和 async/awiat