使用promise封装 原生ajax，$.ajax(),以及fetch及使用

---

一、使用promise封装原生ajax。

// Promise 封装 ajax
function ajax(method, url, data){
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest();
        var method = method || "GET";
        var data = data || null;
        xhr.open(method, url, true);
        xhr.onreadystatechange = function() {
            if(xhr.status === 200 && xhr.readyState === 4){
                resolve(xhr.responseText);
            } else {
                reject(xhr.responseText);
            }
        }
        xhr.send(data);
        })
}

// 使用
ajax("GET", "/some/url.json", null)
.then(result => {
    console.log(result);
})

二、使用promise封装$.ajax()。

    //封装
    function ajax(url, type = "get", data = "") {
        return new Promise((resolve, reject) => {
            $.ajax({
                type,
                url,
                data,
                success: function (res) {
                    resolve(res)
                }
            });
        })
    }

    //调用
    ajax('https://api.it120.cc/list').then(res=>{
        console.log(res);
    })

三、使用promise封fetch？

//与XMLHttpRequest(XHR)类似，fetch()方法允许你发出AJAX请求
//讲点通俗的就是fetch是ajax的升级版

let request = function (url, type = 'get', data) {
            return fetch(url, {
                    method: type, // *GET, POST, PUT, DELETE, 等
                    headers: {
                        "Content-Type": "application/json",
                    }, // 请求头
                    body: data,
                }).then(res => {
                    // 判断状态码
                    if (res.status !== 200) {
                        console.log("存在一个问题，状态码为：" + res.status);
                        return;
                    }
                    //检查响应文本
                    res.json().then(function (arr) {
                        console.log(data);
                    });
                })
        }
    // 请求接口
request("https://api.it120.cc/maxinglong/banner/list")