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

promise 异步 ajax 请求数据

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

开始

html 模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <button id="getData">获取用户名称</button>
    <div id="app"></div>
</body>
</html>

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

封装 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 += '<div>'+ res.data.records[i].realName +'</div>'
        }
    })
}

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

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