【JavaScript30】promise-526互联

在前端js中是可以发送网络请求的，如果前端js的请求是线性的请求(同步), 网站的体验会很差。设计js发请求的那个人. 选择了使用异步执行方式. 大幅度的提升用户体验.

console.log("我要发请求了");
setTimeout(function(){
    console.log("服务器返回结果了");
}, 2000); // 假设服务器返回数据需要两秒钟

console.log("我要发请求了");
setTimeout(function(){
    console.log("服务器返回结果了");
}, 2000); // 假设服务器返回数据需要两秒钟

console.log("我要发请求了");
setTimeout(function(){
    console.log("服务器返回结果了");
}, 2000); // 假设服务器返回数据需要两秒钟

异步请求的好处: 提升用户体验. 加载速度会快很多;问题: 如果请求必须是要一个接着一个的. 那么异步就是累赘.

 console.log("我要点击登陆了")
 setTimeout(function(){
    console.log("登陆成功了");
    //.....
    console.log("发请求. 加载个人信息")
    setTimeout(function(){
        console.log("获取用户信息");
        // ...
        console.log("加载私信")
        setTimeout(function(){
            console.log("成功加载了私信");
        }, 2000);

        console.log("加载用户使用记录")
        setTimeout(function(){
            console.log("成功加载了用户使用记录");
        }, 2000);
    }, 2000);
}, 2000);

//上述逻辑的问题是: 死亡回调. 大面积的使用回调函数来完成业务逻辑.
// 在ES6出现之后. 上述问题得到解决
// ES6提供了promise,promise可以解决死亡回调的问题

promise基本逻辑

function send(url){
  // 保证给你一个结果.这个结果什么时候会返回. 不一定..
  // promise中的函数的第一个参数. 表示如果该任务执行成功了. 返回数据的通道
  // promise中的函数的第二个参数. 表示如果该任务执行失败了. 返回数据的通道
  return new Promise(function(resolve, reject){ // 该函数表示要去做的事情
      console.log("发送请求到", url);
      setTimeout(function(){ // 模拟真的发请求的情况
          let ret = "有结果了";
          // 生活中. 一件事儿的状态.
          // 1. 完成了.  -> resolve
          // 2. 没完成.  -> reject
          // 3. 执行中. => 最终一定会变成. 完成了或者完不成...

          // 如果这个请求成功了. 没有任何问题. 需要调用resolve
          // resolve(ret); // 任务成功.  返回结果, 任务状态会改成 fulfilled
          reject("老子不干了"); // 任务失败.  返回结果, 任务状态会改成 rejected
      }, 2000);
  })
}

// 使用
// 在获取到promise对象的时候. promise对象的状态是 pending: 执行中.
// then表示然后呢....
//     then对应的是两个状态. 它里面应该是两个函数 分别对应该任务是否成功.

send("用户登陆").then(
     function (data){  // 表示成功了. 之后要干什么 接收的是resolve的参数
        console.log("成功了....", data);
         return send("获取个人信息"); // 如果在then中的函数返回了一个新的promise(), 它的then可以写在当前then的后面
     }, function(data){ // ???? 接收的是reject的参数
         console.log("失败了......", data);
     }
 ).then(function(data){
     console.log("获取到了 个人信息");
     return send("获取私信");
 }, function(){}).then(function(){

}, function(){});

上述逻辑虽然乱. 但是解决了死亡回调的问题;then还有一个特性. 可以只传递一个函数. 表示成功之后. 要做的事情

function send(url){
  return new Promise(function(resolve, reject){ // 该函数表示要去做的事情
      console.log("发送请求到", url);
      setTimeout(function(){ // 模拟真的发请求的情况
          let ret = "有结果了"
          // resolve(ret); // 任务成功.  返回结果, 任务状态会改成 fulfilled
          reject("老子不干了"); // 任务失败.  返回结果, 任务状态会改成 rejected
      }, 2000);
  })
}

send("用户登陆").then(function (data){  // 表示成功了. 之后要干什么 接收的是resolve的参数
    console.log("成功了....", data);
    return send("获取个人信息"); // 如果在then中一的函数返回了个新的promise(), 它的then可以写在当前then的后面
}).then(function(data){
    console.log("获取到了 个人信息");
    return send("获取私信");
}).then(function(){
    console.log("获取到了私信信息. ");
}).catch(function(data){ // 出错了. 或者 失败了.  守门员.
    console.log("出错了", data); //
});