1-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. 传输数据有哪些方式

   页面跳转
   函数调用
   调用接口:把数据从服务器传输到前段

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

promise 是什么:

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

一. 创建promise对象和存储数据

<script>
    //创建promise对象
    var promiseObj = new Promise(function(resolve,reject){
      //2.调用resolve把成功的数据存储到promise对象里
      resolve(222);
    });
  console.log('promiseObj',promiseObj);
      //创建promise对象
      var promiseObj2 = new Promise(function(resolve,reject) {
        //2. 调用reject把失败的数据存储promise对象里
        reject('失败了');
    });
      console.log('promiseObj2',promiseObj2);
  //创建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 = true;
      var promiseObj = new Promise(function(resolve,reject){
        if(boo){
          resolve({
        name:'zs'
        });
      }else{
          reject({
            msg:'失败了'
        })
      }
    })
    //获取promiseObj对象的数据,then获取成功的信息,catch获取失败的信息
    promiseObj.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>
  var promiseObj = new Promise(function(resolve,reject){
      $.ajax({
        url:'http://huruqing.cn:3000/api/film/getList',
      type:'get',
      data:{},
      success:function(res){
          resolve(res)
      },
      error:function(err){
        reject(err)
    }
    })
  })
    promiseObj.then(function(res){
      console.log(res)
  }).catch(function(err) {
      console.log(err)
  })
  </script>

四. promise 对象的三种态度

创建promise对象有三种态度
Pending 进行中,初始状态,既不是成功,也是失败状态
Resolve(已完成,又称 Fulfilled)
Reject(已失败)

<script>
    var code = 666;
    //1.创建一个promise对象
    var promiseObj = new Promise(function (resolve, reject) {
        setTimeout(function(){
            if(code === 666){
                resolve({
                    code: 666,
                    msg: '成功了'
                })
            }else{
                reject({
                    msg: '失败了'
                })
            }
        },2000)
    })
    // 4. promise的三种状态
    //a. pending
    console.log(promiseObj);
    //2秒后再查看结果
    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();

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

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

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

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

   //async await应用,可以避免过多的回调函数(俗称回调地狱),下面
   是使用async await对上面代码进行改造
    //1. 封装ajax方法
    function getData(url,data) {
      //2.使用promiseObj对象存储请求结果
    var promiseObj = new Promise(function(resolve,reject){
        $.ajax({
          url:url,
        data:data,
        type:'get',
        dataType:'json',
        success: function(res) {
            resole(res);
        },
        error: function(err) {
            reject(err);
        }
      })
    })
    return promiseObj;
   }
    //2.获取电影详情
    async function getDatail() {
      //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(funciton(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)
   }

   七. 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 promiseObj = new Promise(function (resolve, reject) {
        setTimeount(function () {
            resolve({
                name: '张三',
                age: 18
            })
        }, 1000)
    })
    var promiseObj2 = new Promise(function (resolve, reject) {
        setTimeout(function () {
            resolve({
                name: '李四',
                age: 18
            })
        }, 3000)
    })
    //参数是一个数组,数组的成是promise对象,Promise.all也是promise对象
    Promise.all([promiseObj, promiseObj2]).then(function (res) {
        console.log(res)
    }).catch(function(err) {
        console.log(err)
    })
   </script>