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

//封装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、

 function getJSON(url) {    
        return new Promise(function(resolve, reject) {      
              var XHR = new XMLHttpRequest();   
              XHR.open('GET', url, true);        
              XHR.send();        
              XHR.onreadystatechange = function() {           
                if (XHR.readyState == 4) {                
                    if (XHR.status == 200) {                    
                        try {                        
                            var response = JSON.parse(XHR.responseText);                        
                            resolve(response);                    
                            } 
                        catch (e) {                        
                                reject(e);                    
                        }                
                    } 
                    else {                    
                        reject(new Error(XHR.statusText));                
                    }            
                }        
            }    
    })} 
    
    getJSON(url).then(resp => console.log(resp));

封装一个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})