promise比ajax安全,ajax与Promise的那些事儿

/**

* 简单的异步操作

*/

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);

});