ES6中Promise使用必要

不使用promise請求數據,請求成功後將數據給一個變量保存,然後在下面打印

			function response() {
				let xml = new XMLHttpRequest()
				xml.open('GET', url)
				xml.onreadystatechange = function() {
					if (xml.status == 200 && xml.readyState == 4) {
						console.log(xml.response)
						Object.assign(json,xml.response)
					}
				}
				xml.responseType = "json"
				xml.setRequestHeader("Accept", "application/json")
				xml.send();
				console.log(json)//{}
			}
			response()

上面執行完請求後打印獲取的數據,控制檯打印一個空對象,就是因爲請求是異步操作,請求沒有完成console.log就執行了,所以控制檯打印的是原來的信息,就是請求的時間中,下面的代碼正常執行,使用promise將異步操作執行完再執行console.log就可以獲取想要的信息了

			function createAsync(url) {
				let promise = new Promise((resolve, reject) => {
					let xml = new XMLHttpRequest()
					xml.open('GET', url)
					xml.onreadystatechange = function() {
						//等readyState == 4 再往下執行
						if(xml.readyState !== 4){
							return;
						}
						if (xml.status == 200) {
							resolve(xml.response)//resolve中的信息傳到下面.then第一個函數的參數中
							Object.assign(json,xml.response)//把獲取的數據給json變量
						}else{
							reject(new Error("Ou no!"))
						}
					}
					xml.responseType = "json"
					xml.setRequestHeader("Accept", "application/json")
					xml.send();
				})
				return promise
			}
			
			createAsync(url)
			.then(function (res) {
				console.log(res)//{userId: 1, id: 1, title: "delectus aut autem", completed: false}
				console.log(json)//{userId: 1, id: 1, title: "delectus aut autem", completed: false}
			},function (err) {
				console.log(err)
			})

簡單來說就是把原來的普通ajax請求放到promise中,js給提供好的promise兩個參數一個成功時返回,另一個失敗時返回,而返回的數據在下面promise函數執行完畢時的.then操作獲取,在.then中對獲取到的數據進行操作,就會保證此時數據已經正確獲取到了,或者返回一個err

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章