封装一个通用的ajax函数以及用promise和fetch封装ajax请求函数

你的名字 2023-06-08 04:43 29阅读 0赞

//封装ajax
    function useajax(method, url, data, callback, type) { 
      //创建兼容对象
      var xhr;
      if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
      } else { 
        xhr = new ActiveXObject("Microsoft.XMLHttp");
      }
      xhr.onreadystateChange = function() { 
        if (xhr.status == 200 && xhr.readyState == 4) { 
          if (type == "json") { 
            var res = JSON.parse(xhr.responseText);
          } else if (type == "xml") { 
            var res = responseXML;
          } else { 
            var res = xhr.responseText;
          }
          callback(res);
        }
      };
        //判断data是否有数据
        var param = '';
        //这里使用stringify方法将js对象格式化为json字符串
        if (JSON.stringify(data) != '{}') { 
            url += '?';
            for (var i in data) { 
                param += i + '=' + data[i] + '&';   //将js对象重组，拼接成url参数存入param变量中
            }
            //使用slice函数提取一部分字符串，这里主要是为了去除拼接的最后一个&字符
            //slice函数：返回一个新的字符串。包括字符串从 start 开始（包括 start）到 end 结束（不包括 end）为止的所有字符。
            param = param.slice(0, param.length - 1);
        }
    
        //判断method是否为get
        if (method == "get") { 
            //是则将数据拼接在url后面
            url = url + param;
        }
        //初始化请求
        xhr.open(method,url,true);
    
        if(method == 'post'){ 
            xhr.setRequestHeader("content-Type","application/x-www-fprm-urlencoded");
            //发送请求
            xhr.send(param)
        }
        else{ 
            xhr.send(null)
        }
    }

方便自己以后复用！！！

用promise封装一个ajax、

封装一个fetch

/** * 将对象转成 a=1&b=2的形式 * @param obj 对象 */
    function obj2String(obj, arr = [], idx = 0) { 
      for (let item in obj) { 
        arr[idx++] = [item, obj[item]]
      }
      return new URLSearchParams(arr).toString()
    }
    
    /** * 真正的请求 * @param url 请求地址 * @param options 请求参数 * @param method 请求方式 */
    function commonFetcdh(url, options, method = 'GET') { 
      const searchStr = obj2String(options)
      let initObj = { }
      if (method === 'GET') {  // 如果是GET请求，拼接url
        url += '?' + searchStr
        initObj = { 
          method: method,
          credentials: 'include'
        }
      } else { 
        initObj = { 
          method: method,
          credentials: 'include',
          headers: new Headers({ 
            'Accept': 'application/json',
            'Content-Type': 'application/x-www-form-urlencoded'
          }),
          body: searchStr
        }
      }
      fetch(url, initObj).then((res) => { 
        return res.json()
      }).then((res) => { 
        return res
      })
    }
    
    /** * GET请求 * @param url 请求地址 * @param options 请求参数 */
    function GET(url, options) { 
      return commonFetcdh(url, options, 'GET')
    }
    
    /** * POST请求 * @param url 请求地址 * @param options 请求参数 */
    function POST(url, options) { 
      return commonFetcdh(url, options, 'POST')
    }
    GET('https://www.baidu.com/search/error.html', { a:1,b:2})
    POST('https://www.baidu.com/search/error.html', { a:1,b:2})