封装ajax请求（笔记）

思路

• 接收请求配置，包括url、method、params、data
• 返回Promise对象，让用户定义回调函数
• 处理params中的查询字符
• 新建XMLHttpRequest对象，发送请求报文
• 处理响应报文

代码

export function request ({	// 对象解构，设置默认值
  url,
  method = 'GET',
  params = {},
  data = {}
}) {
  // 返回一个Promise，给用户定义回调函数
  return new Promise((resolve, reject) => {
    // 处理params中的查询参数，拼接到url上
    let queryString = '';
    // 拼接查询字符串
    Object.keys(params).forEach(key => {
      queryString += `${key}=${params[key]}&`
    });
    if(queryString){
      // 去掉最后一个&符
      queryString = queryString.substring(0, queryString.length-1);
      // 拼接到url后
      url = url + '?' + queryString;
    }

    
    // 创建xhr对象
    const xhr = new XMLHttpRequest();
    // 初始化请求
    xhr.open(url, method);
    // 对不同的请求方法进行处理，并发送
    if(method === 'GET' || method === 'DELETE'){
      xhr.send();
    } else if (method === 'POST' || method === 'PUT'){
      // 如果是带请求体（data）的请求，要设置请求头为JSON告诉服务器请求体为json
      xhr.setRequestHeader('Content-type', 'application/json;charset=utf-8');
      // 将请求体转换成JSON字符串再发送
      xhr.send(JSON.stringify(data));
    }


    // 处理响应报文,监听响应状态的改变，会改变4次, 0-4
    xhr.onreadystatechange = function () {
      // 如果响应状态不等于4，就不执行
      if(xhr.readyState !== 4) {
        return;
      }
      // 如果成功
      if(xhr.status >= 200 && xhr.status <300){
        // 处理返回结果
        const result = {
          data: JSON.parse(xhr.response),
          status: xhr.status,
          statusText: xhr.statusText
        }
        resolve(result);
      } else {
        // 如果失败就回调失败函数，并返回错误信息
        reject(new Error('request error status is ' + xhr.status));
      }
    }
  });
}