ajaxpro post html,ajax与promise

原生js发送请求

// 格式化post提交数据

var formateParams=function(data, isCache) {

var arr = [];

for(var name in data) {

arr.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));

}

if(isCache) {

arr.push('v=' + (new Date()).getTime());

}

return arr.join('&');

}

//promise 封装xhr请求数据

var ajaxPro = function(param) {

var data = {

username: '179999999',

password: '666666'

}

return new Promise(function(resolve, reject) {

var xhr = new XMLHttpRequest();

xhr.open('POST', param.url, true);

xhr.onload = function() {

if(xhr.readyState == 4 && xhr.status == 200) {

resolve(JSON.parse(xhr.responseText));

} else {

params.error && params.error(status);

}

}

xhr.onerror = function() {

reject(JSON.parse(xhr.responseText));

}

// 非常重要，如果用post方式提交，必须加上请求头

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

//只有按照这个格式，后台才能收到数据username=179999999&password=666666

xhr.send(formateParams(data));

})

}

// 调用示例

var p = ajaxPro({

url: '' // 要获取的文件地址

});

p.then(function(response) {

console.log(response);

}).catch(function(err) {

console.log(err);

});

封装jquery的ajax方法

function loading(){

console.log('loading');

}

function stopLoading(){

console.log('stopLoading');

}

var ajaxPro = function(param) {

const APIURL = '';

var options = {

url: APIURL + param.url,

type: param.type || 'POST',

data: param.data,

before: param.before || loading,

complete: param.complete || stopLoading

}

return new Promise(function(resolve, reject) {

$.ajax({

url: options.url,

type: options.type,

data: options.data,

beforeSend: options.before,

complete: options.complete,

success: function(data) {

resolve(data);

},

error: function(jqXHR, textStatus, errorThrown) {

/**第一个参数

*readyState :当前状态,0-未初始化，1-正在载入，2-已经载入，3-数据进行交互，4-完成

*status ：返回的HTTP状态码，比如常见的404,500等错误代码。

*statusText ：对应状态码的错误信息，比如404错误信息是not found,500是Internal Server Error。

*responseText ：服务器响应返回的文本信息

*/

/**第二个参数返回的状态

*"timeout"(超时), "error"(错误), "abort"(中止), "parsererror"(解析错误)，还有可能返回空值

*字符串类型，表示服务器抛出返回的错误信息

*/

var errInfo = {

jqXHR:jqXHR,

textStatus:textStatus,

errorThrown:errorThrown

}

reject(errInfo)

}

});

});

};

// 调用示例

var p2 = ajaxPro({

url: '/Home/User/login',

data: {

username: "17999999999",

password: '666666'

}

}).then(function(data) {

console.log(data);

}).catch(function(err) {

console.log(err);

});

封装mui.ajax

var appUI = {

showWaiting: function() {

plus.nativeUI.showWaiting();

},

closeWaiting: function() {

plus.nativeUI.closeWaiting()

}

}

function request(parm) {

// 参数MD5加密

return new Promise(function(resolve, reject) {

// 接口域名

const APIURL = '';

var options = {

type: param.type || 'POST',

url:APIURL+param.url||'',

data: param.data,

dataType: param.dataType || 'json',

timeout:param.timeout||60000,

before: param.before || appUI.showWaiting,

complete: param.complete || appUI.closeWaiting

}

mui.ajax(options.url, {

data: options.data,

dataType: options.dataType, //要求服务器返回json格式数据

type: options.type, //HTTP请求类型，要和服务端对应，要么GET,要么POST

timeout: options.timeout, //超时时间设置为6秒；

beforeSend: options.before,

complete: options.complete,

success: function(data) {

options.complete();

if(data && data.code && data.code != undefined) {

resolve(data);

} else {

mui.toast("服务器繁忙,请稍后再试");

}

},

error: function(xhr, type, errorThrown) {

// type：错误描述，类型是String，可取值除了'null'外，其它可能值："timeout", "error", "abort", "parsererror"

options.complete();

if(type == 'timeout' || type == 'abort') {

mui.toast("请求超时：请检查网络：" + type)

} else {

mui.toast("服务器累了：" + type)

}

var errInfo = {

xhr:xhr,

type:type,

errorThrown:errorThrown

}

reject(errInfo)

}

});

})

}

参考博客