ajax 的promise封装

126 阅读1分钟

本篇文章,关于ajax中的promise封装, 以下是关于ajax实现promise封装:

function ajax(options) {
    let baseUrl = 'http://192.168.217.178:9527'
    return new Promise((resolve, reject) => {   // 返回一个promise
        let { url = '/', method, data } = options;
        url = baseUrl + url;
        method  method.toUpperCase();
        let query = '';
        for (let k in data) {
            query += k + '=' + data[k] + '&'
        }
        query = query.slice(0, query.length - 1);
        let xhr = new XMLHttpRequest()
        // 区分get和post请求,
        if (method === 'GET') {
            url = query == '' ? url : url + '?' + query; //  GET请求,参数拼接在url上
            xhr.open(method, url, true);
            xhr.send();
        }

        if (method === 'POST') {
            xhr.open(method, url, true);
            xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded") // 设置请求头
            xhr.send(query); // post请求的参数在send中
        }

        xhr.onreadystatechange = () => {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let res = JSON.parse(xhr.responseText)
                resolve(res)   // 如果成功则调用resolve 成功函数
            }
        }
    })
}

封装好了的ajax如何调用:

let p = ajax({
    url: "/api/goodList",
    method: "get",
    data: {
        page: 1
    }
})

此时的p的返回值为一个promise对象,如何获取值呢

p.then(res =>{
    console.log(res)
})