Promise 与异步编程

• 1. 异步编程的背景知识

  • Javascript 引擎是基于单线程事件循环的概念构建的,同一时刻只允许一个代码块在执行。
  • 那些代码被放在一个任务队列，每当一段代码准备执行时，都会被添加到任务队列。每当javascript引擎中的一段代码结束执行，事件循环会执行队列中的下一个任务，任务队列是javascript引擎中的一段程序，负责监控代码执行并管理任务队列。
  • 队列中的任务会从第一个一直执行到最后一个。

• 1.1 JS引擎相关

  • jS引擎的主线程负责执行代码，由于只有这一个线程，执行当然是同步的，即按照顺序来。另外，还有一个叫做任务队列的东西，所有的异步代码都是从队列当中来。

JS引擎工作流程

• 在JS中，所谓的异步任务，有三种：
  • 第一 鼠标键盘事件触发，例如onclick、onkeydown等等
  • 第二 网络事件触发，例如onload、onerror等等
  • 第三 定时器，例如setTimeout、setInterval

2. Promise的基础知识

2.1 Promise生命周期

graph TD
A[padding] --> B[Fulfilled]
A[padding] --> C[Rejected]

• 每个 Promise 都会经历一个生命周期,先是处于 进行中(pedding) 的状态,此时操作尚未完成,所以它也是 未处理(unsettled);一旦异步操作之行结束,Promise则变为 已处理(settled)的状态。
  操作结束后，Promise可能会进入到以下两个状态中的其中一个。
  • Fulfilled Promise 异步操作成功完成。
  • Rejected 由于程序错误或一些其他原因，Promise 异步操作未能成功完成。

• 所有 Promise 都有 then() 方法,它接受两个参数:第一个是当Promise状态变为fulfilled 时要调用的函数,与异步相关的附加数据都会传递给这个完成函数;第二个是当 Promise 的状态变为 rejected 时要调用的函数,所有失败状态相关的附加参数都会传递给这个拒绝函数。以下是用 Promise封装的 ajax :

let ajaxPromise = (url, params) => {
    // 判断 params 是否存在
    if(params) {
        url = url + '?' + params;
    }
    return new Promise ((resolve, reject) => {
        let ajax = null;
        if(window.XMLHttpRequest) {
            ajax = new XMLHttpRequest ();
        }
        else {
            ajax = new ActiveXObject ('Microsoft.XMLHTTP ');
        }
        ajax.open ('GET', url);
        ajax.send ();
        ajax.onreadystatechange = () => {
            if(ajax.readyState == 4 && ajax.status == 200) {
                resolve (ajax.responseText);
            }
        };
        // 如果 3秒内请求未完成,则调用 失败函数
        setTimeout (() => {
            reject ();
        }, 3000);
     
    });
};
let url = 'http://192.168.2.220:8080';
let params = 'name=wangjq&handsome=true';
ajaxPromise(url,params).then(result=>{
    console.log (result.data);
},reason => {
    console.log (reason.message);
})