Promise理解

promise

Promise理解

理解Promise之前先理解回调函数

1. 从生活来解释promise：

1. 1. 就是你给了别人一个承诺，这个承诺有3种情况

1. 1. 1. 说明承诺(pending):你和别人说做某件事情
      2. 兑现承诺(fulfiled)：你说你会做某件事情，你真的做了
      3. 违背承诺(rejected):你说你会做某件

1. 从编程来解释promise：

1. 1. 1. Promise 就是用来处理这些承诺的工具。它是一种处理异步任务的方式。异步任务就像是等待某些事情发生，比如等待文件加载、等待网络请求完成、等待用户输入等。而 Promise 可以帮你更好地控制这些等待的过程
      2. 拿网络请求来举例，是不是网络请求也有两种情况，一个是请求成功，然后后端给前端响应成功数据，一个是请求失败，后端给前端响应失败原因

基本用法

1. Promise是一个构造函数，用来生成Promise实例，所以也是一个对象

var promise = new Promise(function(resolve,reject){//创建一个Promise
  //Promise构造方法将函数作为参数
  //而这里面的函数又有两个函数做为参数
  //resolve函数：异步操作执行成功后的回调函数
  //reject函数：异步操作执行失败后的回调函数
  if(/* 异步操作成功 */){
    resolve(value);
  }else{//异步操作失败
    reject(error);
  }
});

  //Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数

  new Promise(function(resolve,reject){})它的状态为上面说明的承诺(pending)
  resolve他的状态为上面的兑现承诺(fulfiled)
  reject他的状态为上面的违背承诺(rejected)
  

resolve,reject函数

1. resolve函数的作用，将Promise对象的状态从“未完成”变成“成功”(即从Pending变为Resolved)，在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
2. reject函数的作用是，在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

var xr = new Promise(function(resolve, reject){
    //做一些异步操作
    setTimeout(function(){
        console.log('执行完成');
        resolve('数据');//then里面的方法
    }, 2000);
}).then(function(data) {
  console.log(data);//输出'数据'
})
//2秒后，输出“执行完成”，并且调用resolve方法
//执行的流程为
    	1.先执行了第一句话：执行完成
      2.再调用resolve方法(这个方法就是.then里面的方法)，输出数据

.then（）

then有两个函数参数，第一个是处理成功后所要做的事情，第二个是处理失败后描述它的失败原因

//这个案例将Primise对象使用函数包裹起来的，如果不包裹起来则会立即执行
//并且这个方法的返回值为Promise
//有了返回值才能调用then方法
function xr(){
    var by = new Promise(function(resolve, reject){
        //做一些异步操作
        setTimeout(function(){
            var num = Math.ceil(Math.random()*10); //生成1-10的随机数
            if(num<=5){//如果生成的随机数大于5
                resolve(num);//调用then函数里面的第一个方法，将数据作为参数传过去
            }
            else{//如果生成的随机数小于5
              //调用then函数里面的第二个方法，将失败原因传给它，它默认会将num值传过去
                reject('数字太大了');
            }
        }, 2000);
    });
    return by;    //将Promise对象作为返回值        
}

//调用Promise对象中then方法
xr().then(
    function(data){//成功调用第一个方法
        console.log('resolved');
        console.log(data);//将数据打印
    }, 
    function(reason, data){//失败调用第二个方法，
      //reason：为失败原因，就是描述
      //data：他会默认接收data数据的
        console.log('rejected');
        console.log(reason);//将失败原因打印
    }
);

.catch()

1. 失败时调用，他的作用就是then函数里面的第二个函数参数的作用，失败了，就有失败原因，和数据，简单来说就是将then第二个参数提取出来放在了外面
2. catch有两个参数

1. 1. reason：第一个参数，失败原因
   2. data:数据，失败了也会传递数据，默认接收

 //将then里面的第二个参数提取出来
xr().then(function(data){//成功调用
    console.log('resolved');
    console.log(data);
})
.catch(function(reason){//失败后接收失败原因，失败数据
    console.log('rejected');
    console.log(reason);
});

1. .then()和.catch总结

2. Promise是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理更强大
3. 当执行了reslove函数，会回调promise对象的.then函数,相当于变相的回调函数
4. 当执行了reject函数，会回调promise对象的.catch函数，相当于变相的回调函数

.all()

1. Promise的all方法提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。我们仍旧使用上面定义好的runAsync1、runAsync2、runAsync3这三个函数，看下面的例子：
2. 就是先执行多个Promise对象，但是不执行then函数和catch函数，只有执行完了Promise对象，最后才会执行，执行的会统一存在一个数组里面

//先定义包裹Promise对象的3个方法
          	//xr1()方法
            function xr1(){
                var by = new Promise(function(resolve, reject){
                    //做一些异步操作
                    setTimeout(function(){
                        console.log('异步任务执行完成1');
                        resolve('数据1');
                    }, 1000);
                })
                return by;
            }//使用方法将promise对象包裹
          	//xr2()方法
            function xr2(){
                var by = new Promise(function(resolve, reject){
                    //做一些异步操作
                    setTimeout(function(){
                        console.log('异步任务执行完成2');
                        resolve('数据2');
                    }, 2000);
                });
                return by;
            }
          	//xr3()方法
            function xr3(){
                var by = new Promise(function(resolve, reject){
                    //做一些异步操作
                    setTimeout(function(){
                        console.log('异步任务执行完成3');
                        resolve('数据3');
                    }, 2000);
                });
                return by;
            }

//现在有3个Promise对象，这3个对象分别都有then方法
//使用all方法同时执行Promise对象
//执行完成后最后在统一执行then方法，并将他们的结果装进一个数组里面
Promise.all([xr1(),xr2(),xr3()]).then((result)=>console.log(result))
//执行结果
异步任务执行完成1
异步任务执行完成2
异步任务执行完成3
['数据1','数据2','数据3']

Ajax使用Promise案例

案例一

function a(){
      return new Promise(function(res,rej){
        $.ajax({
          url:"a接口",
          type: "GET",
          async:true,
          dataType:"json",
          success:function(data){
            console.log(data,"a");
            res(data);
          }
        })
      });
    }

    function b(data){
      console.log(data,"data");
      return new Promise(function(res,rej){
        $.ajax({
            url:"b接口",
            type: "POST",
            async:true,
            data:JSON.stringify(data),
            dataType:"json",
            success:function(data){
              console.log(data,"b");
              res();
            }
          })
      });
    }

    $("#btn").click(function(){
      a().then(function (data){
        b(data);
      }).then(function(){
      })
    })

案例二

function makeRequest(url) {
  return new Promise(function(resolve, reject) {//创建Promise对象
    var xhr = new XMLHttpRequest();//创建ajax对象
    xhr.open('GET', url, true);//设置请求
    
    xhr.onload = function() {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.responseText);
      } else {
        reject(new Error('请求失败'));
      }
    };
    
    xhr.onerror = function() {
      reject(new Error('网络错误'));
    };
    
    xhr.send();
  });
}

// 调用网络请求函数
makeRequest('https://jsonplaceholder.typicode.com/posts/1')
  .then(function(data) {
    console.log('请求成功，响应数据:', data);
  })
  .catch(function(error) {
    console.error('请求出错:', error);
  });