用promise封装ajax_使用 promise 初次封装简单 ajax 异步请求

promise 异步 ajax 请求数据

promise 是一个非常好也非常有用的东西,链式调用解决了 ajax 回调地狱的情况,Promise是一个构造函数,在其原型链上有then, catch等方法具体的介绍,可以参照阮一峰的Promise对象介绍

开始

html 模板

Document

获取用户名称

点击获取用户名称发起请求获取用户数据

封装 ajax

function ajax(options) {

return new Promise(function (resolve, reject) {

var setting = {}

for (var k in options) {

setting[k] = options[k]

}

var xhr = new XMLHttpRequest()

xhr.open(options.method, options.url, options.async || true)

xhr.send(options.method === 'get' ? '' : data)

xhr.onreadystatechange = function() {

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

resolve(xhr)

}

}

})

}

上面代码意思是,使用原生 XHR 发起请求,请求成功将 promise 状态从 pending 变为 resolved ,并将 promise 对象return出来

调用

var page = 0

document.getElementById('getData').onclick = function () {

page ++

ajax({

method: 'get',

url: 'http://101.37.33.134:18888/mall/rsUser?pageNumber='+ page +'&pageSize=10'

}).then(function (data) {

var res = JSON.parse(data.response)

console.log(res.data.records)

for (var i = 0; i < res.data.records.length; i++) {

document.getElementById('app').innerHTML += '

'+ res.data.records[i].realName +'

'

}

})

}

点击按钮调用 ajax 方法,得到promise 对象通过 promise的then 方法进行链式回调,就可以在回调内取到数据进行处理

初次封装一下,如有错误请不吝指出