var p = new Promise(function (resolve,reject){
//這裡開一個定時器模仿非同步任務
setTimeout(function(){
var flag = turn;
if(flag) {
//正常情況下拿到資料
resolve('我是成功時的返回資料');
} else {
//伺服器出錯,響應的錯誤資訊
reject('出錯了');
}
},1000);
});
p.then(function(data) {
//在這裡用data接收正確資訊
console.log(data);
},function(info) {
//在這裡用info接收錯誤資料
console.log(info);
});
//基於Promise傳送Ajax請求
function queryData(url) {
var p = new Promise(function(resolve,reject) {
var xhr = new XMLHttpRequest();
//每當 readyState 改變時,就會觸發 onreadystatechange 事件
xhr.onreadystatechange =function() {
if(xhr.readyState != 4) return;
if(xhr.readyState === 4 && xhr.status ===200) {
resolve(xhr.responseText);//拿到響應資料(以文字形式)
} else {
reject('伺服器錯誤');
}
};
xhr.open('get',url);
xhr.send(null);
});
return p;
}
queryData('http://localhost:3000/data')
.then(function(data) {
console.log(data);//列印正確的響應資料
},function(info) {
console.log(info)//列印錯誤資訊
});
進入onload之後,只出現了狀態碼4。也就是說,只有處於狀態碼4,請求已完成,響應已就緒的情況下,才會進入onload。只要進入onload請求中,一定是已經到4這個狀態了。
function loadText(){
let xhr = new XMLHttpRequest();
xhr.open('GET','sample.txt',true);
console.log("READYSTATE"+ xhr.readyState);
//兩種請求方式onload和onreadystatechange
xhr.onload = function(){
console.log("READYSTATE"+ xhr.readyState);
console.log(this.responseText);
}
xhr.send();
}
當請求被傳送到伺服器時,我們需要執行一些基於響應的任務。
每當 readyState 改變時,就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態資訊。
以下是 XMLHttpRequest 物件的三個重要的屬性:
在 onreadystatechange 事件中,我們規定當伺服器響應已做好被處理的準備時所執行的任務。
當 readyState 等於 4 且狀態為 200 時,表示響應已就緒:
//注意:onreadystatechange 事件被觸發 5 次(0 - 4),對應著 readyState 的每個變化。
xhr.open("get","test1.php",true);
xhr.send(null);
xhr.onreadystatechange = function(){ // 回撥函數
if(xhr.readyState == 4){
if(xhr.status == 200){
var data = xhr.responseText; // 獲取響應資料(以文字形式)
console.log(data);
}
}
}
//基於Promise傳送Ajax請求
function queryData(url) {
var p = new Promise(function(resolve,reject) {
var xhr = new XMLHttpRequest();
//每當 readyState 改變時,就會觸發 onreadystatechange 事件
xhr.onreadystatechange =function() {
if(xhr.readyState != 4) return;
if(xhr.readyState === 4 && xhr.status ===200) {
resolve(xhr.responseText);//拿到響應資料(以文字形式)
} else {
reject('伺服器錯誤');
}
};
xhr.open('get',url);
xhr.send(null);
});
return p;
}
//在這裡我們解決傳送多個Ajax請求,並把保證其順序,利用Promise的.then()方法
//在這裡我們忽略請求錯誤的情況
queryData('http://localhost:3000/data')
.then(function(data){
console.log(data)
//在這裡return的時一個新的Promise物件
return queryData('http://localhost:3000/data1')
})
//這裡呼叫的是上面return的Promise物件並且函數中的data用於接受上一個非同步任務的處理結果
.then(function(data){
console.log(data)
return queryData('http://localhost:3000/data2')
})
.then(function(data){
console.log(data)
})
then
我們來對Promise範例物件的then方法做個分析
var p = new Promise(function(resolve,reject)
下面我們用程式碼來看看
//基於Promise傳送Ajax請求
function queryData(url) {
var p = new Promise(function(resolve,reject) {
var xhr = new XMLHttpRequest();
//每當 readyState 改變時,就會觸發 onreadystatechange 事件
xhr.onreadystatechange =function() {
if(xhr.readyState != 4) return;
if(xhr.readyState === 4 && xhr.status ===200) {
resolve(xhr.responseText);//拿到響應資料(以文字形式)
} else {
reject('伺服器錯誤');
}
};
xhr.open('get',url);
xhr.send(null);
});
return p;
}
var p1 = queryData('http://localhost:3000/a1');
var p2 = queryData('http://localhost:3000/a1');
var p3 = queryData('http://localhost:3000/a1');
//promise.all 在拿到三個返回資料後列印三個值
Promise.all([p1,p2,p3]).then(function(result){
console.log(result)
})
//promise.race 在拿到第一個返回資料就只輸出它的值
Promise.race([p1,p2,p3]).then(function(result){
console.log(result)
})