手写promise,async,await

249 阅读1分钟

promise

promise是什么?

promise是一个解决回调地狱的函数,是一个强大的异步回调方案。es6将其弄可以直接使用!

我们知道promise中共有三种状态

pending 过渡态
fulfilled 完成态
rejected 失败态

function Promise(exector) {
            let self = this;
            //status表示一种状态
            let status = "pending";
            let value = undefined;
            let reason = undefined;
            //成功执行
            function resolve(value) {
                if (status == 'pending') {
                    self.value = value;
                    self.status = "resolve";
                }
            }
            //执行失败
            function reject(reason) {
                if (status == 'pending') {
                    self.reason = reason;
                    self.status = "reject"
                }
            }
            //对异常操作
            try {
                exector(resolve, reject)
            } catch (e) {
                reject(e)
            }
            //设置promise的then方法
            Promise.prototype.then = function(reject, resolve) {
                let self = this;
                if (this.status == 'resolve') {
                    reject(self.value)
                }
                if (this.status == 'reject') {
                    resolve(self.reason)
                }
            }
        }
        //new 一个promise  进行测试  
        let promise = new Promise((reject, resolve) => {
            resolve("return resolve");
        });
        promise.then(data => {
            console.log(`success${data}`);

        }, err => {
            console.log(`err${err}`);

        })



AJAX

//第一步,创建XMLHttpRequest对象
var xmlHttp = new XMLHttpRequest();
function CommentAll() {
    //第二步,注册回调函数
    xmlHttp.onreadystatechange =callback1;
    //{
    //    if (xmlHttp.readyState == 4)
    //        if (xmlHttp.status == 200) {
    //            var responseText = xmlHttp.responseText;

    //        }
    //}
    //第三步,配置请求信息,open(),get
    //get请求下参数加在url后,.ashx?methodName = GetAllComment&str1=str1&str2=str2
    xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true);

    //post请求下需要配置请求头信息
    //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

    //第四步,发送请求,post请求下,要传递的参数放这
    xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"

}
//第五步,创建回调函数
function callback1() {
    if (xmlHttp.readyState == 4)
        if (xmlHttp.status == 200) {
            //取得返回的数据
            var data = xmlHttp.responseText;
            //json字符串转为json格式
            data = eval(data);
            $.each(data,
                function(i, v) {
                    alert(v);
                });       
        }
}

MDN原文链接

async,await

async 函数就是 Generator 函数的语法糖。
var fs = require('fs');

var readFile = function (fileName){
  return new Promise(function (resolve, reject){
    fs.readFile(fileName, function(error, data){
      if (error) reject(error);
      resolve(data);
    });
  });
};

var gen = function* (){
  var f1 = yield readFile('/etc/fstab');
  var f2 = yield readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};


写成 async 函数,就是下面这样。

var asyncReadFile = async function (){
  var f1 = await readFile('/etc/fstab');
  var f2 = await readFile('/etc/shells');
  console.log(f1.toString());
  console.log(f2.toString());
};