美文网首页
[React-Native]网络请求:Promise

[React-Native]网络请求:Promise

作者: 美乃滋酱啊 | 来源:发表于2016-09-02 17:29 被阅读1185次

异步执行的封装

使用Promise的对象封装异步请求,使用resolvereject分别包装正常返回和异常返回的值和信息。

例如,执行一段网络请求:

async getMovieData(){

        let promise = new Promise(function (resolve, reject) {

            fetch(REQUEST_URL)
                .then(function (response) {
                    return response.json();
                })
                .then(function (responseData) {
                    resolve(responseData);
                })
                .catch(function (error) {
                    reject(error)
                })
        })
        return promise;
    }

然后,在调用处进行通过thencatch操作返回相关的信息:

 let movieData = RequestUtils.getMovieData();
        movieData.then(function (responseData) {
            alert(responseData.movies);
        }).catch(function (errorMessage) {
            alert('错误的信息是:' + errorMessage);
        })

这里要额外的注意上下文对象的区分

 let movieData = RequestUtils.getMovieData();
        movieData.then(function (responseData) {

            globalComponent.setState({
                dataSource: globalComponent.state.dataSource.cloneWithRows(responseData.movies),
                loaded: true
            })

        }).catch(function (errorMessage) {

            //alert('错误的信息是:' + errorMessage);

            globalComponent.setState({
                loaded: false,
                errorMsg: errorMessage
            })

        });

这里的全局的globalComponent对象实在constructor构造中实例化的

 // 构造
constructor(props) {
    super(props);
    // 初始状态
    globalComponent = this;

    ...
}

All

promise.all([...])

对数组中的Promise全部进行处理,只有其中所有的对象返回onFulFilled或者onRejected方法的时候,该all方法才会进行返回

Race

Promise.race([...])

对数组中的Promise进行竞速处理,例如:

var winnerPromise = new Promise(function (resolve) {
        setTimeout(function () {
            console.log('this is winner');
            resolve('this is winner');
        }, 4);
    });
var loserPromise = new Promise(function (resolve) {
        setTimeout(function () {
            console.log('this is loser');
            resolve('this is loser');
        }, 1000);
    });
// 第一个promise变为resolve后程序停止
Promise.race([winnerPromise, loserPromise]).then(function (value) {
    console.log(value);    // => 'this is winner'
});

最终程序的结果是:

this is winner
this is winner
this is loser

需要注意的是,每个参与竞速(race)的promise对象本身都会进行处理,但是,一旦一种某个预先返回了数据,那么其他的promise的对象将不会调用onFulFilled或者onRejected方法以进行下一步回调。

何时进行onRejected

以下两种情况:

function throwError(value) {
    // 抛出异常
    throw new Error(value);
}
// <1> onRejected不会被调用
function badMain(onRejected) {
    return Promise.resolve(42).then(throwError, onRejected);
}
// <2> 有异常发生时onRejected会被调用
function goodMain(onRejected) {
    return Promise.resolve(42).then(throwError).catch(onRejected);
}
// 运行示例
badMain(function(){
    console.log("BAD");
});
goodMain(function(){
    console.log("GOOD");
});

其中<1>中的并不能在打印出log,但是<2>是可以的。

在本promise实现中进行的error错误只能被后面链中的catch进行抓获。

相关文章

网友评论

      本文标题:[React-Native]网络请求:Promise

      本文链接:https://www.haomeiwen.com/subject/btqkettx.html