/**
* 簡單的異步操作
*/
function callback() {
console.log(`我是一個回調函數`);
}
console.log(`異步之前`);
setTimeout(callback, 1000);
console.log(`異步之後`);
/**
* ajax就是典型的異步操作
*/
// 發起ajax的過程
const XHR = new XMLHttpRequest();
console.log(XHR);
XHR.onreadystatechange = function() {
if (XHR.readyState === 4) {
if (XHR.status === 200) {
console.log(XHR.responseText);
} else {
console.log(XHR.status);
}
}
};
XHR.open('GET', `https://jsonplaceholder.typicode.com/users`, true);
XHR.send();
/**
* jQuery請求
*/
$.ajax({
type: 'get',
url: `https://jsonplaceholder.typicode.com/users`,
dataType: 'json',
success: function(res) {
console.log(res);
},
error: function(err) {
console.log(err);
}
});
/**
* 用Promise簡單的封裝一個AJAX函數
*/
function myAjax(method, url, params) {
return new Promise((resolve, reject) => {
const XHR = new XMLHttpRequest();
XHR.onreadystatechange = function() {
if (XHR.readyState === 4) {
if (XHR.status === 200) {
console.log(XHR.responseText);
} else {
console.log(XHR.status);
}
}
};
// get
if (method === 'get' || method === 'GET') {
if (typeof params === 'object') {
// params拆解成字符串
params = Object.keys(params)
.map(function(key) {
return (
encodeURIComponent(key) +
'=' +
encodeURIComponent(params[key])
);
})
.join('&');
}
url = params ? url + '?' + params : url;
XHR.open(method, url, true);
XHR.send();
}
//post
if (method === 'post' || method === 'POST') {
XHR.open(method, url, true);
XHR.setRequestHeader(
'Content-type',
'application/json; charset=utf-8'
);
XHR.send(JSON.stringify(params));
}
});
}
/**
* 使用定時器來模擬異步操作
*
*/
let p = new Promise(function(resolve, reject) {
console.log(resolve); // 成功之後的回調
console.log(reject); // 失敗時候的回調
setTimeout(() => {
resolve(100);
}, 1000);
});
p.then(function(data) {
console.log(data);
});
ajax與Promise的那些事兒
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章
aJax請求不走後臺405排查
本地起tomcat服務默認是http的，但是ajax請求的url是https，也就是跨域了。 然後不走後臺，瀏覽器F12顯示405 所以要配置一下tomcat，參考tomcat8.5配置http