[React Native]Promise机制

作者: 于连林520wcf | 来源:发表于2016-09-09 16:01 被阅读1890次

    React Native中经常会看到Promise机制。
    Promise机制代表着在JavaScript程序中下一个伟大的范式。可以把一些复杂的代码轻松撸成一个串,和Android中的rxjava非常像。

    Promise代表一个任务结果,这个任务有可能完成,有可能没有完成。Promise模式唯一需要的一个接口是调用then方法,用来注册当Promise完成或者失败时调用的回调函数。

    一般异步函数用到了Promise机制。

    在异步操作之前通常异步操作是借助回调函数的。

        onScuccessCallback(result){
            //...   成功的回调
        }
        onErrorCallback(error){
            //...  失败的回调
        }
        doSomething(){
            try {
                this.AsyncFunction(para,this.onScuccessCallback,this.onErrorCallback)
            }catch(errors){
                //...
            }
        }
    

    使用Promise机制后, 就直接通过then撸成串就好了

            this.AsyncFunction(para).then(
                (para)=>{
                    // 处理成功的事件
                }
            ).catch(
                (error)=>{
                    // 处理失败的事件
                }
            )
    

    这还体现不出优势来, Promise的真正强大之处在于可以方便的实现Promise的多重链接,可以参考官方的例子

      getMoviesFromApiAsync() {
        return fetch('http://facebook.github.io/react-native/movies.json')
          .then((response) => response.json())  //获取结果的json传递给下个then
          .then((responseJson) => {       //执行成功获取结果
            return responseJson.movies; 
          })
          .catch((error) => {   //执行失败
            console.error(error);
          });
      }
    

    更多精彩请关注微信公众账号likeDev。


    likeDev.jpg

    相关文章

      网友评论

      • 周南城:意思就是Promise相当于链式调用吗
      • 沧溟沧海啸: call_button(){

        // this.helloWorld(true).then(function (message) {
        // console.log(message);
        // }, function (error) {
        // console.log("err222"+error);
        // });
        this.helloWorld(false).then((message)=> {
        console.log(message);
        }
        ).catch(
        (error)=>{
        console.log("err222"+error);
        }
        );
        }
        helloWorld (ready) {
        return new Promise(function (resolve, reject) {
        if (ready) {
        resolve("Hello World!");
        } else {
        reject("Good bye!");
        }
        });
        }
      • 沧溟沧海啸:特意登陆上来就是想告诉作者,我还是没有学会怎么用。啊,android转react-native,连回调也是刚刚学会啊,像这样
        //数据库查询回调
        onGetData(arr){
        this.setState({
        dataArray: arr,
        isLoading: false,
        });
        }
        search(){
        var _this=this;
        sqLite.search(_this);
        }
        在另一个文件中
        search(_this){
        _this.onGetData(arr);
        }
        这样才回调成功了

        至于Promise,还没学会。。。,要不要加Promise到
        import{
        ToastAndroid,
        Promise
        } from 'react-native'; 啊
      • Azen:简单明了!
        于连林520wcf:@Azen 多谢夸奖

      本文标题:[React Native]Promise机制

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