Promise複数リクエスト、finally、チェーンコール学習

文書ディレクトリ

記事参照

基本構文

キャプチャ異常処理

チェーンコール

promiseのfinallyメソッド

アプリケーションシーン

非同期アプリケーションシーン使用説明

両要求には必然的な関係はなく、それぞれコールバックを実行すれば

である.

両リクエストには先着順があり、必ずOneを先にリクエストしてからTwo

を使用します.

以上のリクエストは成功したが、リクエスト間には関係ない

複数の要求は1つの成功だけで論理処理

を行う.

axios複数の非同期要求がすべて成功する後に処理されるトラフィック要求パッケージ

.

使用例

記事リファレンス

チェン一峰ES 6 promise

vue実力パッケージaxios

基本構文
初期のブラウザ互換性:PromiseオブジェクトはES 6の内容で、babelを使用して変換することができます.基本的な構文は以下の通りです.

var promise = new Promise(function(resolve, reject) {
  // ... some code
  if (/*        */){
    resolve(value);
  } else {
    reject(error);
  }
});
//then         resolved       ，     （  ） rejected       。
promise.then(function funcA(comments) {
  console.log("resolved: ", comments);
}, function funcB(err){
  console.log("rejected: ", err);
});

キャプチャ例外処理

var promise = new Promise(function(resolve, reject) {
  throw new Error('test');
});
promise.catch(function(error) {
  console.log(error);
});

チェーンコール
リファレンスhttps://segmentfault.com/a/1190000007598894リファレンスhttp://es6.ruanyifeng.com/#docs/promise#Promise-prototype-then
チェーン式thenを使用すると、順序に従って呼び出されるコールバック関数のセットを指定できます.この場合、前のコールバック関数は、まだPromiseオブジェクト(すなわち非同期操作)を返す可能性があります.この場合、後のコールバック関数は、そのPromiseオブジェクトの状態が変化するのを待って呼び出されます.

function start() {
  return new Promise((resolve, reject) => {
    resolve('start');
  });
}

start()
  .then(data => {
    // promise start
    console.log('result of start: ', data);
    return Promise.resolve(1); // p1
  })
  .then(data => {
    // promise p1
    console.log('result of p1: ', data);
    return Promise.reject(2); // p2
  })
  .then(data => {
    // promise p2
    console.log('result of p2: ', data);
    return Promise.resolve(3); // p3
  })
  .catch(ex => {
    // promise p3
    console.log('ex: ', ex);
    return Promise.resolve(4); // p4
  })
  .then(data => {
    // promise p4
    console.log('result of p4: ', data);
  });

上のコードは最終的に出力されます:result of start:start result of p 1:1 ex:2 result of p 4:4
promiseのfinallyメソッド
参考promise-finally学習
シーンの適用 app ， ， ‘ ’ ， ， loading ， .しかし、リクエストは成功、失敗、タイムアウトがあり、システム全体の正常な使用に影響を与えないために、プロンプトボックスを強制的に閉じる必要があり、promiseのfinallyを利用してプロンプトボックスを閉じる必要があります.

var promise = new Promise(function(resolve, reject) {
    console.log("promise")
    window.setTimeout(function(){
      if (false){
        resolve('huangbiao');
      } else {
        debugger
        reject('error');
      }
    },1000)
  }).then(function(){
    console.log('success');
  }).catch(function(){
    console.log('catch');
  }).finally(function(){
    console.log('finally');
  });

promise ， then catch ， finally 。
非同期適用シーンの使用方法の説明
2つのリクエストには必然的な関係はありません.それぞれコールバックを実行すればいいです.

var promiseOne = axios.get('http://first').then(function(resOne) {
	//   One        ，
	//           setState(resOne)                
})


var promiseTwo = axios.get('http://second').then(function(resTwo) {
	//   Two        
	//           setState(resTwo)                
})

2つのリクエストには先着順がありますので、必ずOneをリクエストしてからTwoを使います

var promiseOne = axios.get('http://first').then(function(resOne) {
	//   One        ，
	//           setState(resOne)                
	var promiseTwo = axios.get('http://second').then(function(resTwo) {
		//   Two        
		//           setState(resTwo)                
	})
})


var promiseTwo = axios.get('http://second').then(function(resTwo) {
	//   Two        
	//           setState(resTwo)                
	var promiseOne = axios.get('http://first').then(function(resOne) {
		//   One        ，
		//           setState(resOne)                
		setState(resTwo+resOne)
	})
})

複数のリクエストは成功しましたが、リクエスト間は関係ありません.

const p = Promise.all([p1, p2, p3]).then(function () {
	Three = One + Two
})

複数のリクエストは1つの成功だけで論理処理されます

const p = Promise.race([p1, p2, p3]);

axios複数の非同期リクエストがすべて成功した後に処理されるビジネスリクエストパッケージ

/**
*     promise  ，           ，     
* */
allPromise: function(promise1,promise2){
//           
  var userPromise = Array.prototype.slice.apply(arguments);
  console.dir(userPromise);
//       
  debugger
  var promiseObj = new Promise(function(resolve, reject){
	  axios.all(userPromise).then(axios.spread(function () {
		  resolve(arguments);
	  }),function(){
		  reject(arguments);
	  });
  });
  return promiseObj;
},

使用例

//         
  var getorgInfoPromise = getData.getRestful("getWarehousesByFacotryid", {id: whOrgId});
  //      
  var queryParam = {
	status: nodeObj.status,
	whOrgId: whOrgId
  }
  //     ID            
  var getWarehousesByFacotryidPromise = getData.postRestful("searchWarehouseInfo", {
	pageSize: pageSize,
	pageNum: current
  }, queryParam);
  //                 
  getData.allPromise(getorgInfoPromise, getWarehousesByFacotryidPromise).then(function (responseObj) {
	var getorgInfoPromiseRes = responseObj[0];
	var getWarehousesByFacotryidPromiseRes = responseObj[1];
	//     0       
	if (getorgInfoPromiseRes.data.resultCode == 0 && getWarehousesByFacotryidPromiseRes.data.resultCode == 0) {
	  var treeInfo = {
		//       
		type: "org",
		//     
		listInfo: getWarehousesByFacotryidPromiseRes.data,
		//     
		detailInfo: getorgInfoPromiseRes.data
	  }
	  that.totalNum = getWarehousesByFacotryidPromiseRes.data.totalNum;

	  that.treeClickAction(treeInfo);
	}
  });