不使用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