Promise

学习笔记，非原创

Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数——更合理和更强大。

Promise特点

• 所谓Promise，简单说就是一个容器对象，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

• Promise对象代表一个异步操作，有三种状态：Pending（进行 中）、Resolved（已完成，又称 Fulfilled）和Rejected（已失 败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态

• 一旦状态改变，就不会再变化，任何时候都可以得到这个结果。 （Promise对象的状态改变，只有两种可能：从Pending变为 Resolved和从Pending变为Rejected）

• Promise对象一旦创建就会立即执行，但无法中途取消。

基本用法

// promise
var promise = new Promise(function(resolve, reject) {
// ... some code
    var flag = true; /* 异步操作成功 */
    if (flag){
        resolve('success');
    } else {
        reject('fail');
    }
});
promise.then(function(value) {
// success
    console.log('成功信息：', value)
}, function(error) {
// failure
    console.log('失败信息：', error)
});

定时器

function timer(ms) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve('done');
        }, ms);
    });
}
timer(1000).then(function(value) {
    console.log(value);
});

请求图片

function loadImageAsync(url) {
    var promise;
    return promise;
};
var imageUrl = 'http://img.pconline.com.cn/images/bbs4/20096/14/1244961943203.jpg';
loadImageAsync(imageUrl).then(function(image) {
    console.log('image -> ', image);
}, function(error) {
    console.log(error);
});

请求数据

function getJSON(url) {
    var promise;
    return promise;
}
var jsonUrl = 'http://facebook.github.io/react-native/movies.json';
getJSON(jsonUrl).then(function(json) {
    console.log('Contents: ' + json);
}, function(error) {
    console.error('出错了', error);
});

多次请求

var jsonUrl = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/Mo
var jsonUrl2 = 'http://facebook.github.io/react-native/movies.json';

function getText(url) {
    var promise;
    return promise;
}
getText(jsonUrl)
    .then(function (jsonText) {
        return jsonText;
    })
    .then(function (jsonText) {
        return JSON.parse(jsonText);
    })
    .then(function (json) {
        console.log('url1 json = ', json);
        return getText(jsonUrl2);
    })
    .then(function (jsonText) {
        console.log('url2 json: ', JSON.parse(jsonText));
    })
    .catch(function (err) {
        console.log(err);
    });

并行请求

function timeout(ms) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(ms + 'ms done!');
        }, ms);
    });
}
var promise1 = timeout(1000);
var promise2 = timeout(5000);
Promise.all([promise1, promise2]).then(function(results) {
    console.log('results = '
        , results)
});

竞争请求

function timeout(ms) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            reject(ms + 'ms timeout!');
        }, ms);
    });
}
function timer(ms) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            resolve(ms + 'ms done!');
        }, ms);
    });
}
var promise1 = timeout(1000);
var promise2 = timer(5000);
Promise.race([promise1, promise2]).then(function(results) {
    console.log('results = ', results)
}).catch(function(err) {
    console.log('err = ', err);
});

async/await

async 函数，使得异步操作变得更加方便

基本使用

function getJSON(url) {
    var promise;
    return promise;
}
var jsonUrl = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/Mo
var jsonUrl2 = 'http://facebook.github.io/react-native/movies.json';
var getData = async function () {
    try {
        var data1 = await getJSON(jsonUrl);
        var data2 = await getJSON(jsonUrl2);
        console.log('data1 = ', data1);
        console.log('data2 = ', data2);
    } catch(err) {
        console.log(err);
    }
};
var promise = getData();
console.log('这行代码在异步方法返回结果前执行。。。');
console.log('async 函数返回一个promise对象', promise);

Promise.all

function getJSON(url) {
    var promise;
    return promise;
}
var jsonUrl = 'https://raw.githubusercontent.com/facebook/react-native/master/docs/Mo
var jsonUrl2 = 'http://facebook.github.io/react-native/movies.json';
var getData = async function () {
    try {
        var promise1 = getJSON(jsonUrl);
        var promise2 = getJSON(jsonUrl2);
        var results = await Promise.all([promise1, promise2]);
        console.log('results = ', results);
    } catch(err) {
        console.log(err);
    }
};
getData();

Promise.race

function timeout(ms) {
    return new Promise(function(resolve, reject) {
    //...
    });
}
function timer(ms) {
    return new Promise(function(resolve, reject) {
    //...
    });
}
var getData = async function () {
    try {
        var promise1 = timeout(1000);
        var promise2 = timer(500);
        var result = await Promise.race([promise1, promise2]);
        console.log('result = ', result);
    } catch(err) {
        console.log('err = ', err);
    }
};
getData();

async 函数嵌套

function getJSON(url) {
//...
    return promise;
}
var jsonUrl2 = 'http://facebook.github.io/react-native/movies.json';
var getData = async function (url) {
    return await getJSON(url);
};
var getDataWrapper = async function () {
    try {
        var data1 = await getData(jsonUrl2);
        console.log('data1 = ', data1);
    } catch(err) {
        console.log(err);
    }
};
getDataWrapper();