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 += '
}
})
}
点击按钮调用 ajax 方法,得到promise 对象通过 promise的then 方法进行链式回调,就可以在回调内取到数据进行处理
初次封装一下,如有错误请不吝指出