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

发布了117 篇原创文章 · 获赞 146 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/printf_hello/article/details/105372824