実習プロジェクトの知識点と経験まとめ(三):非同期操作:Promise及びpromiseに基づくaxios;Async await

8272 ワード
tip 先端 javascript es 6/es 7
JS【紅宝書が必要です.実践して繰り返し勉強します.】
  • 事件泡沫事件捕獲
  • Promise及びpromiseに基づくaxios–インターフェースデータ呼び出しの同期非同期問題及び異なるライフサイクルにおける場合
  • イベントバインディングbindおよびbind、call、appy変更関数におけるthisの指向性を理解し、使用する.
    Promiseオブジェクトはキーワードnewとその構造関数によって作成されます.
    どうやってPromiseを作成しますか?
    const promise = new Promise((resolve, reject) => {
    // do something here ...
    if (success) {
        resolve(value); // fulfilled
    } else {
        reject(error); // rejected
    }
});
    then法により,それぞれreolved状態とreject状態のコールバック関数を指定した.
      promise.then(function(value) {
      // success
  }, function(error) {
      // failure
  });
    プロミスの例を作成したら、すぐに実行します.
    promiseパッケージaxios
    const params = {
            	method: 'post',
            	data: {
            	}
            }
function axios (url,params){
	return new Promise((resolve,reject)=>{
		axios.get(url,params).then(function(response){
			resolve(response.data)
		})
		.catch(function(err){
			reject(err)
		})
	})
}
axios(url,params).then(function(data){
	console.log(data)
})
.catch(function(){
})
    async
    ES 2017標準はASync関数を導入しています.非同期動作がより便利になります.
    async関数が戻ってくるPromiseオブジェクトは、関数が実行されると、awaitに出会うと先に戻ります.内部のawait命令の後の非同期操作Promiseオブジェクトが実行されるまで、ステータスが変化します.return文またはエラーが発生しない限り、.つまり、async関数内部の非同期動作が完了した場合にのみ、thenメソッドで指定されたコールバック関数が実行されます.
    async function f() {
  try {
    await Promise.reject('   ');
  } catch(e) {
  }
  return await Promise.resolve('hello world');
}

f()
.then(v => console.log(v))
// hello world
    • javascript Historyオブジェクト詳細