ES6の約束の使用について話します

約束の基礎

公式文書：

API /新promise.html

記事を説明するための良い原則：

理解し、約束の使用、Jsのためのあなたのコードをリファクタリング

約束は、コールバック地獄の出現に対処することである。ネストされたシリーズのようなコード、代わりに書き込みコードを減らすためにループします。

今日はほとんどのブラウザの約束をサポートしています。私たちは、コンソールに出力を見ることができます。

私たちは見ることができますPromise()。これは、コンストラクタで、資本Pの説明を。私たちは、と渡す必要があるresolveとreject機能
しながら、prototype私たちが見ることができるthenし、catchこの2つの機能。これら2つの関数はコールバック地獄を解決する鍵である。
原理知識、会場と私はリンクを与えることができます。以下は主について話をするコードの使用に関連して。

使用の約束

約束のコンストラクタ

約束処理動作は、非同期であり、メインプログラムを実行する実行順序は、非同期動作の後、JSで
使用されるデモを容易にするために、setTimeout()非同期要求をシミュレートします

次のコードを見てください

new Promise((resolve, rejcet) => {
	setTimeout(() => {
		console.log('Promise')
	}, 2000)
	console.log('in Promise')
});

console.log('out Promise')

出力

in Promise
out Promise
Promise

そこで、我々はコードがすぐに実行されるときに新しい約束を、知ることができます。

それでは、どのよう我々のコードは、あなたがそれをしたい、適切なタイミングでのアクションでの約束を実行したのですか？

私たちは、例えば、次のコードを関数に新しい約束を書き、その後、必要なときに呼び出すことができます。

function testPromise() {
	return new Promise((resolve, rejcet) => {
		setTimeout(() => {
			console.log('Promise')
		}, 2000)
		console.log('in Promise')
	});
}
console.log('out Promise')
testPromise()

出力

out Promise
in Promise
Promise

コンストラクタ関数

new Promise((resolve, rejcet) => {... }とき。あなたは、新たな約束は二つのパラメータを持つ関数に導入された見ることができます
どのresolve非同期メソッドが成功した場合で、かつreject際に障害と呼ばれています

次のコードは、私はタイマーを書いて、組み合わせたajax()最初のパラメータは非同期要求、シミュレートするためにflagシミュレートするために使用されるが異常である、
我々は見に戻ってステップ実行することができ、それは、その実行順序の下に言及されます

// 模拟ajax请求 第一个参数来模拟是否出现异常
function ajax(flag, err, data, resolve, reject) {
	// return 并不会起到返回的作用,只是为了代码到此结束
	if (flag == false)
		return reject(err)
	resolve(data)
}

function testPromise(err, data, flag) {
	return new Promise((resolve, reject) => {
		// 设置ajax(ture/false,...)来决定是否有异常
		setTimeout(ajax(flag, err, data, resolve, reject), 2000)
	})
}

testPromise('出错了 err', '没有错误，返回数据data', true)
	.then((data) => {
		console.log('----回调resolve :' + data)
	})
	.catch(err => {
		console.log('----回调reject :' + err)
	})

実行順序

それは混乱である一見上記コード、いくつかの論理的混乱以下櫛実行の順序

• testPromise（「間違っERR」、「エラー無し、データがデータを返さ」）コードの呼び出しのこの行testPromise(err, data)
• 前のステップ新しいプロミス（（決意、リジェクト） => {}） 内resolveとrejectすぐに任意の値とリターンを持っていないPromise被験体を
  • このとき、オブジェクトはしかし、約束を返しresolve、そしてrejectまだ特定の機能が、機能はプレースホルダです。後で注入だろう
  • そして、のsetTimeout（AJAX（偽、ERR、データ、解決、リジェクト）は、2000年）、それ（非同期アナログ）を実行JSら2S秒タイマ遅延は、あります
• 次戻る.then（データ=> {...} ）then()注入される。非同期メソッドの成功後に実行される特定の機能を通過しresolve、そして.catch（ERR => {}）を注入しますreject
• この決意で、拒否すべての特定の機能を持って、上記の手順は、JSで非常に高速に完了することになっています
• 2S後、のsetTimeout（）の実装
• フラグ==偽のAJAX（）をリターンを実行するには、（ERR => {}）コールバック.catchに（ERR）を拒否します
• 出力はconsole.log（ '----コールバック拒否：' + ERR）

要求非同期が戻り値を返しません

具体的な使用

上記のコードと説明を通じて、我々は特別な約束を見てきましたが、どのように我々はそれの特定のコールバック地獄を解決することができますか？

testPromise('出错了 err', '没有错误，返回数据data', true)
	.then((data) => {
		console.log('----回调resolve :' + data)
		return testPromise('哈哈哈,又错了', '这一次还没有错', true)
	})
	.then(data => {
		console.log('----回调resolve :' + data)
	})
	.catch(err => {
		console.log('----回调reject :' + err)
	})

出力

----回调resolve :没有错误，返回数据data
---回调resolve :这一次还没有错

また戻らなければならないPromise、彼らは再び使用する前にインスタンスを.then()する方法

このように、我々は、元のネストされたコードを見ることができ、我々は合格している.then()一緒に。にシリーズ
限り、返すためにAコールをPromiseあなたは無限に、インスタンスすることができます.then()ダウン

例外処理

上記のコードは、ことによるcatch()異常捕捉。

function testPromise(err, data) {
	return new Promise((resolve, reject) => {
		// 设置ajax(ture/false,...)来决定是否有异常
		setTimeout(ajax(false, err, data, resolve, reject), 2000)
	})
}

testPromise('出错了 err', '没有错误，返回数据data')
	.then((data) => {
		console.log('----回调resolve :' + data)
		return testPromise('哈哈哈,又错了', '这一次还没有错')
	})
	.then(data=>{
		console.log('----回调resolve :' + data)
	})
	.catch(err => {
		console.log('----回调reject :' + err)
	})

出力：

----回调reject :出错了 err

その結果、間違った一度だけ出力され
、我々は結果を知ることができるが、catch()約束の実行チェーンの出現は実行されません後、異常に長いコードなどであります

後者の例外コードエラーのであれば、どのように我々はまだそれを強制することを約束実行チェーンを作るのですか？

実際、.then(function(){},function(){} )

.then()どちらの関数も渡すことができます

• 最初の関数のためのハンドラが正常に渡す必要があります実行され
• 第二の機能は、例外を処理することで、着用することはできません。Ifは渡され、実行チェーンの約束に影響を与えないように、処理されません.catch
• これらの機能の両方を返す必要がありPromise、実行チェーンを継続するためにインスタンスを

testPromise('出错了 err', '没有错误，返回数据data', false)
	.then((data) => {
		console.log('----回调resolve :' + data)
		return testPromise('哈哈哈,又错了', '这一次还没有错', false)
	},err =>{
		console.log(err)
		return testPromise('哈哈哈,又错了', '这一次还没有错', false)
	})
	.then(data => {
		console.log('----回调resolve :' + data)
	})
	.catch(err => {
		console.log('----回调reject :' + err)
	})

出力

出错了 err
----回调reject :哈哈哈,又错了

axios

axiosは、HTTPライブラリの約束に基づいており
、非常に良いパッケージを持っていた、特にいくつかの共通のGET、POSTリクエスト。そしてまた、非常に良いブロッカーメカニズム
我々は見つけることができるようにも、神の特に力をお勧めします。

中国の説明axios