封装Ajax（回调与Promise）

1. 回调函数的形式

/* 
 @params: 
   url: 请求地址
   method： 请求方式，GET/POST
   data：请求数据
   async：是否异步
   header：请求头
   success： 成功回调
   fail： 失败回调
*/

function sAjax(opts) {
  opts.url = opts.url || '';
  opts.method = (opts.method || 'GET').toUpperCase();
  opts.data = opts.data || {};
  opts.async = opts.async && true; //默认异步 -- 这里注意一下，因为这里需要传递布尔值
  opts.headers = opts.header || 'json'; //默认json
  opts.success = opts.success || function() {};
  opts.fail = opts.fail || function() {};

  //仅支持POST和GET
  if (opts.method !== 'GET' && opts.method !== 'POST') {
    throw new Error('请使用GET或POST请求');
  }

  //GET需要把参数写到地址中
  var dataArr = [];
  var dataStr = '';
  for (var k in opts.data) {
    dataArr.push(k + '=' + opts.data[k])
  }
  dataStr = dataArr.join('&');  
  if (opts.method === 'GET') {
    opts.url = opts.url + '?' + dataStr;
  }

  //创建xhr对象
  var xhr = null;
  try {
    xhr = new XMLHttpRequest();
  } catch {
    alert('您的浏览器不支持AJAX！');
    return;
  }
  //监听readyState改变
  xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          opts.success(xhr.response);
        } else {
          opts.fail(xhr.response);
        }
      }
  }
  //确定发送类型
  xhr.open(opts.method, opts.url, opts.async);
  //发送 -- 如果是POST，需要设置请求头，参数写到send方法中
  if (opts.method === 'POST') {
    xhr.setRequestHeader('content-type', 'application/' + opts.header);
    xhr.send(dataStr);
  } else {
    xhr.send();
  }
}

/* 调用 */
sAjax({
  url: 'http://localhost:3000/goods',
  method: 'post',
  data: {
    name: 'Tom',
    sex: 'man'
  },
  async: false,
  header: 'x-www-form-urlencoded',
  success(res) {
    console.log(res);
  },
  fail(err) {
    console.log(err);
  }
})

2. promise的形式

/* 
 @params: 
   url: 请求地址
   method： 请求方式，GET/POST
   data：请求数据
   async：是否异步
   header：请求头
*/

function sAjax(opts) {
  return new Promise((resolve, reject) => {
      opts.url = opts.url || '';
      opts.method = (opts.method || 'GET').toUpperCase();
      opts.data = opts.data || {};
      opts.async = opts.async && true; //默认异步 -- 这里注意一下，因为这里需要传递布尔值
      opts.headers = opts.header || 'json'; //默认json
      
      //仅支持POST和GET
      if (opts.method !== 'GET' && opts.method !== 'POST') {
        throw new Error('请使用GET或POST请求');
      }
    
      //GET需要把参数写到地址中
      var dataArr = [];
      var dataStr = '';
      for (var k in opts.data) {
        dataArr.push(k + '=' + opts.data[k])
      }
      dataStr = dataArr.join('&');  
      if (opts.method === 'GET') {
        opts.url = opts.url + '?' + dataStr;
      }
    
      //创建xhr对象
      var xhr = null;
      try {
        xhr = new XMLHttpRequest();
      } catch {
        alert('您的浏览器不支持AJAX！');
        return;
      }
      //监听readyState改变
      xhr.onreadystatechange = function() {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              resolve(xhr.response);
            } else {
              reject(xhr.response);
            }
          }
      }
      //确定发送类型
      xhr.open(opts.method, opts.url, opts.async);
      //发送 -- 如果是POST，需要设置请求头，参数写到send方法中
      if (opts.method === 'POST') {
        xhr.setRequestHeader('content-type', 'application/' + opts.header);
          xhr.send(dataStr);
        } else {
          xhr.send();
        }
    })
}


/* 调用 */
sAjax({
  url: 'http://localhost:3000/goods',
  method: 'post',
  data: {
    name: 'Tom',
    sex: 'man'
  },
  async: false,
  header: 'x-www-form-urlencoded'
}).then(res => {
  console.log(res)
})