(Node.js笔记04)promise运行解析&封装promise的ajax方法

一.展示异步操作

const fs = require("fs");

fs.readFile("./a.txt", function(error, data) {
  if (error) {
    console.log("读取失败.");
  } else {
    console.log(data.toString());
  }
});

fs.readFile("./b.txt", function(error, data) {
  if (error) {
    console.log("读取失败.");
  } else {
    console.log(data.toString());
  }
});

fs.readFile("./c.txt", function(error, data) {
  if (error) {
    console.log("读取失败.");
  } else {
    console.log(data.toString());
  }
});

//一共有六种输出结果
//1. a b c
//2. a c b
//3. b a c
//4. b c a
//5. c a b
//6. c b a

代码分析:
因为fs.readFile是异步操作,其函数内部的执行完成时间不一样,也就导致了输出结果顺序不是按照函数顺序进行排序的。可能会有人想着把异步操作嵌套起来,可这样就变成了回调地狱。为了使代码赏心悦目ES6中有针对的promise语法。
1.不用promise

const fs = require("fs");

fs.readFile("./a.txt", function(error, data) {
  if (error) {
    console.log("读取失败.");
  } else {
    console.log(data.toString());
    fs.readFile("./b.txt", function(error, data) {
      if (error) {
        console.log("读取失败.");
      } else {
        console.log(data.toString());
        fs.readFile("./c.txt", function(error, data) {
          if (error) {
            console.log("读取失败.");
          } else {
            console.log(data.toString());
          }
        });
      }
    });
  }
});

//稳定输出: a b c

2.使用promise

const fs = require("fs");

var promise = function(urlPath) {
  return new Promise(function(resolve, reject) {
    fs.readFile(urlPath, function(error, data) {
      if (error) {
        reject(error);
      } else {
        resolve(data.toString());0***
      }
    });
  });
};

promise("./a.txt")
  .then(function(data) {
    console.log(data);
    return promise("./b.txt");
  })
  .then(function(data) {
    console.log(data);
    return promise("./c.txt");
  })
  .then(function(data) {
    console.log(data);
  });

//稳定输出: a b c

接下来就解析下Promise的运行方式

二.Promise运行方式

1.一个promise对象中有三种状态:pending resolve reject,对应待定 完成 拒绝。
2.事件进入promise实例一开始是pending状态,当事件成功时调用resolve函数,返回promise对象;反之失败时调用reject函数,也返回promise对象。
3.then函数的作用就是接收前面的promise对象,返回promise对象(一般不是同一个promise对象)

var p1 = new Promise(function(resolve, reject) {
  fs.readFile("./a.txt", function(error, data) {
    if (error) {
      reject(error);
    } else {
      resolve(data.toString());
    }
  });
});

var p2 = new Promise(function(resolve, reject) {
  fs.readFile("./b.txt", function(error, data) {
    if (error) {
      reject(error);
    } else {
      resolve(data.toString());
    }
  });
});

var p3 = new Promise(function(resolve, reject) {
  fs.readFile("./c.txt", function(error, data) {
    if (error) {
      reject(error);
    } else {
      resolve(data.toString());
    }
  });
});

p1.then(function(data) {
  console.log(data);
  return p2;
})
  .then(function(data) {
    console.log(data);
    return p3;
  })
  .then(function(data) {
    console.log(data);
  });

在这里插入图片描述data就是每次每次读取成功的文件数据.

三.封装promise的ajax方法

function get(urlPath) {
  return new Promise(function(resolve, reject) {
    var oReq = new XMLHttpRequest();
    oReq.open("get", url, true);
    oReq.onload = function() {
      resolve(oReq.responseText);
    };
    oReq.onerror = function(error) {
      reject(error);
    };
    oReq.send();
  });
}
发布了29 篇原创文章 · 获赞 8 · 访问量 2291

猜你喜欢

转载自blog.csdn.net/zhuangww05/article/details/105082367