什么是Promise

Promise是异步编程的一种解决方案,它是一个容器,里面保存着某个将来才会结束的事件。

通过异步操作的结果,决定它是哪种状态。

pending —> fulfilled 或者 pending —> rejected

  • 基本使用

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    const getData = function(url) {
    return new Promise((resolve, reject) => {
    try{
    setTimeout(() => {
    console.log('data loaded');
    resolve('get ' + url + ' data successfully');
    }, 2000);
    }catch(e){
    reject(new Error('error'));
    }
    });
    }

    getData('test.json').then((data) => {
    console.log(data);
    });
  • 异步加载图片

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    const loadImage = function(url) {
    return new Promise((resolve, reject) => {
    const img = new Image();
    img.onerror = reject;
    img.onload = () => {
    setTimeout(() => {
    resolve('img loaded');
    }, 2000);
    };
    img.src = url;
    });
    }

    const imgURL = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=628594730,4098634647&fm=27&gp=0.jpg';
    document.body.innerHTML = 'loading...';
    loadImage(imgURL).then(data => {
    const img = document.createElement('img');
    img.style.width = '100px';
    img.style.height = '100px';
    img.src = imgURL;
    document.body.innerHTML = '';
    document.body.appendChild(img);
    });
  • Ajax请求

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    const getData = function(url) {
    return new Promise((resolve, reject) => {
    const handler = function() {
    if (this.readyState !== 4) {
    return;
    }
    if (this.status === 200) {
    resolve(this.response);
    } else {
    reject(new Error(this.statusText));
    }
    };
    const client = new XMLHttpRequest();
    client.open('GET', url);
    client.responseType = 'json';
    client.onreadystatechange = handler;
    client.setRequestHeader('Accept', 'application/json');
    client.send();
    });
    }

    getData('test.json').then(data => {
    console.log(data);
    });
  • 应总是使用第一个then获取resolve状态的结果,使用catch获取错误的结果

    1
    2
    3
    4
    5
    getData('test.json').then(data => {
    console.log(data);
    }).catch(e => {
    console.log(e);
    });
  • Promise.all()用于将多个Promise实例,包装成一个新的Promise实例

    1
    const p = Promise.all([p1, p2, p3]);
    1. p1, p2, p3的状态都变成fulfilled, p也会变成fulfilled,p1, p2, p3的返回值组成一个数组传递给p的回调函数。
    2. p1, p2, p3中只要有一个被rejected,p的状态就变成rejected, 第一个被rejected的实例的返回值,会传递给p的回调函数。
  • Promise.race()也是将多个Promise实例包装成一个新的Promise实例

    1. p1, p2, p3只要有一个先改变状态,p的状态就跟着改变。