ajax 回调,封装Ajax（回调与Promise）

1. 回调函数的形式

/*

@params:

url: 请求地址

method： 请求方式，GET/POST

data：请求数据

async：是否异步

header：请求头

success： 成功回调

fail： 失败回调

*/

function sAjax(opts) {

opts.url = opts.url || '';

opts.method = (opts.method || 'GET').toUpperCase();

opts.data = opts.data || {};

opts.async = opts.async && true; //默认异步 -- 这里注意一下，因为这里需要传递布尔值

opts.headers = opts.header || 'json'; //默认json

opts.success = opts.success || function() {};

opts.fail = opts.fail || function() {};

//仅支持POST和GET

if (opts.method !== 'GET' && opts.method !== 'POST') {

throw new Error('请使用GET或POST请求');

}

//GET需要把参数写到地址中

var dataArr = [];

var dataStr = '';

for (var k in opts.data) {

dataArr.push(k + '=' + opts.data[k])

}

dataStr = dataArr.join('&');

if (opts.method === 'GET') {

opts.url = opts.url + '?' + dataStr;

}

//创建xhr对象

var xhr = null;

try {

xhr = new XMLHttpRequest();

} catch {

alert('您的浏览器不支持AJAX！');

return;

}

//监听readyState改变

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

opts.success(xhr.response);

} else {

opts.fail(xhr.response);

}

}

}

//确定发送类型

xhr.open(opts.method, opts.url, opts.async);

//发送 -- 如果是POST，需要设置请求头，参数写到send方法中

if (opts.method === 'POST') {

xhr.setRequestHeader('content-type', 'application/' + opts.header);

xhr.send(dataStr);

} else {

xhr.send();

}

}

/* 调用 */

sAjax({

url: 'http://localhost:3000/goods',

method: 'post',

data: {

name: 'Tom',

sex: 'man'

},

async: false,

header: 'x-www-form-urlencoded',

success(res) {

console.log(res);

},

fail(err) {

console.log(err);

}

})

2. promise的形式

/*

@params:

url: 请求地址

method： 请求方式，GET/POST

data：请求数据

async：是否异步

header：请求头

*/

function sAjax(opts) {

return new Promise((resolve, reject) => {

opts.url = opts.url || '';

opts.method = (opts.method || 'GET').toUpperCase();

opts.data = opts.data || {};

opts.async = opts.async && true; //默认异步 -- 这里注意一下，因为这里需要传递布尔值

opts.headers = opts.header || 'json'; //默认json

//仅支持POST和GET

if (opts.method !== 'GET' && opts.method !== 'POST') {

throw new Error('请使用GET或POST请求');

}

//GET需要把参数写到地址中

var dataArr = [];

var dataStr = '';

for (var k in opts.data) {

dataArr.push(k + '=' + opts.data[k])

}

dataStr = dataArr.join('&');

if (opts.method === 'GET') {

opts.url = opts.url + '?' + dataStr;

}

//创建xhr对象

var xhr = null;

try {

xhr = new XMLHttpRequest();

} catch {

alert('您的浏览器不支持AJAX！');

return;

}

//监听readyState改变

xhr.onreadystatechange = function() {

if (xhr.readyState === 4) {

if (xhr.status === 200) {

resolve(xhr.response);

} else {

reject(xhr.response);

}

}

}

//确定发送类型

xhr.open(opts.method, opts.url, opts.async);

//发送 -- 如果是POST，需要设置请求头，参数写到send方法中

if (opts.method === 'POST') {

xhr.setRequestHeader('content-type', 'application/' + opts.header);

xhr.send(dataStr);

} else {

xhr.send();

}

})

}

/* 调用 */

sAjax({

url: 'http://localhost:3000/goods',

method: 'post',

data: {

name: 'Tom',

sex: 'man'

},

async: false,

header: 'x-www-form-urlencoded'

}).then(res => {

console.log(res)

})