基于XMLHttpRequest封装Ajax请求

Posted 2022-02-11 昵称正在加载中。。。

一、基本封装

<script src="ajax.js"></script>
<script>
       _.ajax(
        url: "https://cloud-music-api-sandy.vercel.app/top/playlist",
        type: "get",
        async: true,
        data: 
          limit: 20,
        ,
        beforeSend: function () 
          console.log("请求前");
        ,
        success: function (res) 
          console.log(res);
        ,
        error: function (error) 
          console.log(error);
        ,
        complete: function () 
          console.log("请求完成");
        ,
      );
</script>

ajax.js

function ajax(option) 
    // 获取请求 url 地址
    var url = option.url;
    // 获取请求类型
    var dataType = option.dataType;
    // 获取请求方式
    var type = option.type;
    // 获取请求数据
    var data = option.data;
    // 获取是否异步
    var async = option.async === false ? true : option.async;

    var str = "";
    // 将数据转成字符串
    if (typeof data === "object") 
        for (var key in data) 
            str += key + "=" + data[key] + "&";
        
        str.slice(0, str.length - 1);
    

    if (dataType != "jsonp") 
        // 创建 XMLHttpRequest 实例化对象
        var xhr = new XMLHttpRequest();
        // 监听准备状态变化
        xhr.onreadystatechange = function () 
            // 请求前
            if (xhr.readyState <= 1) 
                if (option.beforeSend) option.beforeSend()
            

            // 请求完成
            if (xhr.readyState == 4) 
                var res;
                if (option.complete) option.complete();
                // 响应完成
                if (xhr.status === 200) 
                    // 判断响应数据类型
                    var _type = xhr.getResponseHeader("content-Type");
                    if (_type.indexOf("json") > -1) 
                        res = JSON.parse(xhr.responseText);
                     else if (_type.indexOf("xml") > -1) 
                        res = xhr.responseXML;
                     else 
                        // 普通文本
                        res = xhr.responseText;
                    
                    if (option.success) option.success(res);
                 else 
                    if (option.error) option.error()
                
            
        
        // 判断请求的方式
        if (type === "get" || type === "GET") 
            // 判断请求的数据是否存在
            if (str.length == 0) 
                // 发起请求
                xhr.open(type, url, async)
             else 
                // 发起请求
                xhr.open(type, url + "?" + str, async)
            
            // 发送请求
            xhr.send(null)
         else if (type === "post" || type === "POST") 
            // 发起请求
            xhr.open(type, url, async);
            // 设置请求头
            xhr.setRequestHeader("content-Type", "application/x-www-form-urlencoded");
            // 发送请求
            xhr.send(str);
        
     

_ = 
_.ajax = ajax

二、promse 同步封装

function http(option) 
    // 获取请求参数
    var url = option.url;
    var data = option.data;
    var type = option.type;

    var str = "";
    if (typeof data == "object") 
        for (var key in data) 
            str += "&" + key + "=" + data[key]
        
        str = str.slice(0, str.length - 1);
    

    return new Promise((resolve, reject) => 
        // 创建异步实例对象
        var xhr = new XMLHttpRequest();
        // 创建准备状态变化函数
        xhr.onreadystatechange = function () 
            if (xhr.readyState == 4) 
                if (xhr.status == 200) 
                    var str;
                    var _type = xhr.getResponseHeader("content-Type");
                    if (_type.indexOf("jsonp") >= -1) 
                        str = JSON.parse(xhr.responseText);
                     else if (_type.indexOf("xml") >= -1) 
                        str = xhr.responseXML
                     else 
                        str = xhr.responseText
                    
                    resolve(str)
                 else 
                    reject(xhr)
                
            
        
        if (type == "get" || type == "GET") 
            if (str.length != 0) 
                xhr.open(type, url + "?" + str, true)
             else 
                xhr.open(type, url, true)
            
            xhr.send(null)
         else if (type == "post" || type == "POST") 
            xhr.open(type, url, true);
            xhr.setRequestHeader("content-Type", "application/x-www-form-urlencoded")
            xhr.send(str)
        
    )