Promise在react-native中的使用

一.方法

Promise.resolve(value)

方法返回一個以給定值解析后的Promise 對象罗捎。如果該值為promise告丢，返回這個promise打厘；如果這個值是thenable（即帶有"then" 方法)），返回的promise會“跟隨”這個thenable的對象辨泳，采用它的最終狀態(tài)蓖扑；否則返回的promise將以此值完成唉铜。此函數(shù)將類promise對象的多層嵌套展平。

const textResolve = () => {
    let promise = Promise.resolve('test resolve');
    promise.then(value => {
        console.log("then ="+value);
    }).catch(error => {
        console.log("error ="+error);
    });
};

結果：

 LOG  then =test resolve

Promise.reject(value)

方法返回一個帶有拒絕原因的Promise對象

const textReject = () => {
    let promise = Promise.reject('test reject');
    promise.then(value => {
        console.log('then =' + value);
    }).catch(error => {
        console.log('error =' + error);
    });
    promise.then(value => {
      console.log('then1 =' + value);
    },error => {
      console.log('error1 =' + error);
    });

    Promise.reject(new Error('test error ')).then(value => {
        console.log('resolve value ' + value);
    }, error => {
        console.log('reject value ' + error);
    });
};

結果：

 LOG  error1 =test reject
 LOG  reject value Error: test error 
 LOG  error =test reject

Promise.all(iterable)

方法返回一個 [Promise] 實例律杠，此實例在 iterable 參數(shù)內(nèi)所有的 promise 都“完成（resolved）”或參數(shù)中不包含 promise 時回調(diào)完成（resolve）潭流；如果參數(shù)中 promise 有一個失敗（rejected）俩功，此實例回調(diào)失敾猛鳌（reject），失敗原因的是第一個失敗 promise 的結果

const testMain=()=>{
   Promise.all([test1(),test2()]).then(results=>{
     console.log(results[0]);
     console.log(results[1]);
   }).catch(error=>{
     console.log("error==="+error);
   });
};

const test1=()=>{
  console.log("test1==start");
  return new Promise((resolve, reject) => {
    console.log("==========1");
      setTimeout(()=>{
        console.log("test1");
        resolve("my name is test1");
        console.log("test1==end");
      },2000);
  });
};

const test2=()=>{
  console.log("test2==start");
  return new Promise((resolve, reject) => {
    console.log("==========2");
    setTimeout(()=>{
      console.log("test2");
      resolve("my name is test2");
      console.log("test2==end");
    },2000);
  });
};

結果：


image.png

Promise.race(iterable)

方法返回一個 promise 實例诡蜓，一旦迭代器中的某個promise解決或拒絕熬甫，返回的 promise就會解決或拒絕。
如同上例蔓罚，吧all改成race

const testMain=()=>{
   Promise.race([test1(),test2()]).then(results=>{
    console.log(results);
   }).catch(error=>{
     console.log("error==="+error);
   });
};

結果


image.png

二.react-native中Promise實戰(zhàn)

平常我們使用fetch請求網(wǎng)絡是這樣寫的

const get = (url, success, fail) => {
    fetch(url, {
        method: 'GET',
    }).then(rsp => rsp.json())
        .then(rsp => {
            if (rsp.error) {
                fail && fail('==== fail');
            } else {
                success && success(rsp);
            }
        }).catch(error => {
        fail && fail('==== fail' + error);
    });
};

加入Promise后是這樣寫的

const getPromise = (url) => {
    return new Promise((resolve, reject) => {
        fetch(url, {
            method: 'GET',
        }).then(rsp => rsp.json())
            .then(rsp => {
                if (rsp.error) {
                    reject('==== fail');
                } else {
                    resolve(rsp);
                    console.log(JSON.stringify(rsp));
                }
            }).catch(error => {
            console.log('error==' + error);
            reject('==== fail' + error);
        });
    });
};

調(diào)用 都可以拿到所需要的結果

const loadData = () => {
    let url = 'http://gank.io/api/xiandu/categories';
    get(url, rsp => {
        console.log(JSON.stringify(rsp));
    }, error => {
        console.log('error==' + error);
    });

    getPromise(url).then(rsp => {
        console.log(JSON.stringify(rsp));
    }).catch(error => {
        console.log('error==' + error);
    });
};

有人回說fetch 也是promise椿肩，可以直接return回去嘛。
嗯 是可以的豺谈，但是網(wǎng)絡請求郑象，很多東西需要統(tǒng)一處理的，所以外面再加一層promise來封裝好點茬末。

這里有個問題厂榛，fetch沒有自帶的請求超時，這個時候丽惭，我們就可以想到Promise.race方法了击奶。
一個網(wǎng)絡請求的promise 一個超時的promise 誰先結束就返回誰的結果。知道怎么寫了么责掏，
看看是否一樣

const timeOut = (httpPromise, time = 6000) => {

    let timeOut = new Promise((resolve, reject) => {
        setTimeout(() => {
            reject('time_out');
        }, time);
    });

    return Promise.race([httpPromise, timeOut]);
};

調(diào)用

const get = (url, success, fail) => {
    timeOut(fetch(url, {
        method: 'GET',
    }), 100)
        .then(rsp => rsp.json())
        .then(rsp => {
            if (rsp.error) {
                fail && fail('==== fail');
            } else {
                success && success(rsp);
            }
        }).catch(error => {
        fail && fail('==== fail' + error);
    });
};

const getPromise = (url) => {
    return new Promise((resolve, reject) => {
        timeOut(fetch(url, {
            method: 'GET',
        }), 600)
            .then(rsp => rsp.json())
            .then(rsp => {
                if (rsp.error) {
                    reject('==== fail');
                } else {
                    resolve(rsp);
                    console.log(JSON.stringify(rsp));
                }
            }).catch(error => {
            console.log('error==' + error);
            reject('==== fail' + error);
        });
    });
};

結果1和結果2:

 LOG  error====== failtime_out
 LOG  {"error":false,"results":[{"_id":"57c83777421aa97cbd81c74d","en_name":"wow","name":"科技資訊","rank":1},{"_id":"57c83577421aa97cb162d8b1","en_name":"apps","name":"趣味軟件/游戲","rank":5},{"_id":"57a97cbd81c74b","en_name":"imrich","name":"裝備黨","rank":50},{"_id":"57c836b4421aa97cbd81c74c","en_name":"funny","name":"草根新聞","rank":100},{"_id":"5827dc81421aa911e32d87cc","en_name":"android","name":"","rank":300},{"_id":"582c5346421aa95002741a8e","en_name":"diediedie","name":"創(chuàng)業(yè)新聞","rank":340},{"_id":"5829c2bc421aa911e32d87e7","en_name":"thinking","name":"獨立思想","rank":400},{"_id":"5827dd7b421b7eca","en_name":"iOS","name":"iOS","rank":500},{"_id":"5829b881421aa911dbc9156b","en_name":"teamblog","name":"團隊博客","rank":600}]}
 LOG  {"error":false,"results":[{"_id":"57c83777421aa97cbd81c74d","en_name":"wow","name":"科技資訊","rank":1},{"_id":"57c83577421aa97cb162d8b1","en_name":"apps","name":"趣味軟件/游戲","rank":5},{"_id":"57a97cbd81c74b","en_name":"imrich","name":"裝備黨","rank":50},{"_id":"57c836b4421aa97cbd81c74c","en_name":"funny","name":"草根新聞","rank":100},{"_id":"5827dc81421aa911e32d87cc","en_name":"android","name":"","rank":300},{"_id":"582c5346421aa95002741a8e","en_name":"diediedie","name":"創(chuàng)業(yè)新聞","rank":340},{"_id":"5829c2bc421aa911e32d87e7","en_name":"thinking","name":"獨立思想","rank":400},{"_id":"5827dd7b421b7eca","en_name":"iOS","name":"iOS","rank":500},{"_id":"5829b881421aa911dbc9156b","en_name":"teamblog","name":"團隊博客","rank":600}]}

當然還有更多用得到的地方柜砾，比如 AsyncStorage
我們經(jīng)常用它來儲取一個數(shù)據(jù)，先看看源碼换衬。如get方法,它就是callBack 和Promise一起用的痰驱。

  /**
   * Fetches an item for a `key` and invokes a callback upon completion.
   *
   * See http://facebook.github.io/react-native/docs/asyncstorage.html#getitem
   */
  getItem: function(
    key: string,
    callback?: ?(error: ?Error, result: ?string) => void,
  ): Promise {
    invariant(RCTAsyncStorage, 'RCTAsyncStorage not available');
    return new Promise((resolve, reject) => {
      RCTAsyncStorage.multiGet([key], function(errors, result) {
        // Unpack result to get value from [[key,value]]
        const value = result && result[0] && result[0][1] ? result[0][1] : null;
        const errs = convertErrors(errors);
        callback && callback(errs && errs[0], value);
        if (errs) {
          reject(errs[0]);
        } else {
          resolve(value);
        }
      });
    });
  },

我們就這樣封裝下

function get(name = STORAGE_KEY.Unknown) {
    return new Promise((resolve, reject) => {
        AsyncStorage.getItem(name, function (error, result) {
            if (error) {
                reject(`讀取失敗证芭，讀取結果為 ${error}`);
            } else {
                try {
                    let obj = JSON.parse(result);
                    if (obj !== null && typeof obj === 'object') {
                        resolve(obj);
                    } else {
                        let msg = `反序列化 AsyncStorage 失敗【${name}】，讀取結果為 ${result}`;
                        console.log(msg);
                        reject(msg);
                    }
                } catch (err) {
                    let msg = `反序列化 AsyncStorage 異车Ｓ常【${name}】废士，讀取結果為 ${err}`;
                    console.log(msg);
                    reject(msg);
                }
            }
        });
    });
}

當然這都是部分使用，更多的請查看官方文檔另萤。

最后編輯于 ：
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末湃密，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子四敞，更是在濱河造成了極大的恐慌，老刑警劉巖拔妥，帶你破解...
    沈念sama閱讀 216,651評論 6贊 501
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件忿危，死亡現(xiàn)場離奇詭異，居然都是意外死亡没龙，警方通過查閱死者的電腦和手機铺厨，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,468評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來硬纤，“玉大人解滓，你說我怎么就攤上這事◇菁遥” “怎么了洼裤？”我有些...
    開封第一講書人閱讀 162,931評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長溪王。 經(jīng)常有香客問我腮鞍，道長，這世上最難降的妖魔是什么莹菱？ 我笑而不...
    開封第一講書人閱讀 58,218評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任移国，我火速辦了婚禮，結果婚禮上道伟，老公的妹妹穿的比我還像新娘迹缀。我一直安慰自己，他們只是感情好蜜徽，可當我...
    茶點故事閱讀 67,234評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布祝懂。 她就那樣靜靜地躺著，像睡著了一般娜汁。 火紅的嫁衣襯著肌膚如雪嫂易。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,198評論 1贊 299
  • 城市分裂傳說
    那天掐禁，我揣著相機與錄音怜械，去河邊找鬼颅和。 笑死，一個胖子當著我的面吹牛缕允，可吹牛的內(nèi)容都是我干的峡扩。 我是一名探鬼主播，決...
    沈念sama閱讀 40,084評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼障本，長吁一口氣：“原來是場噩夢啊……” “哼教届！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起驾霜，我...
    開封第一講書人閱讀 38,926評論 0贊 274
  • 萬榮殺人案實錄
    序言：老撾萬榮一對情侶失蹤案训，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后粪糙，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體强霎，經(jīng)...
    沈念sama閱讀 45,341評論 1贊 311
  • ?護林員之死
    正文 獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,563評論 2贊 333
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年蓉冈，在試婚紗的時候發(fā)現(xiàn)自己被綠了城舞。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 39,731評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡寞酿，死狀恐怖家夺，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情伐弹，我是刑警寧澤拉馋，帶...
    沈念sama閱讀 35,430評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站掸茅，受9級特大地震影響椅邓，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜昧狮，卻給世界環(huán)境...
    茶點故事閱讀 41,036評論 3贊 326
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一景馁、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧逗鸣，春花似錦合住、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,676評論 0贊 22
  • 一樁弒父案透葛，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至卿樱，卻和暖如春僚害，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背繁调。 一陣腳步聲響...
    開封第一講書人閱讀 32,829評論 1贊 269
  • 情欲美人皮
    我被黑心中介騙來泰國打工萨蚕， 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留靶草，地道東北人。 一個月前我還...
    沈念sama閱讀 47,743評論 2贊 368
  • 代替公主和親
    正文 我出身青樓岳遥，卻偏偏與公主長得像奕翔，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子浩蓉，可洞房花燭夜當晚...
    茶點故事閱讀 44,629評論 2贊 354