使用Promise对象实现ajax封装

1. 原生ajax请求基础知识

1.1 ajax readyState状态码

• 0 - (未初始化)还没有调用send()方法
• 1 - (载入)已调用send()方法，正在发送请求
• 2 - (载入完成)send()方法执行完成，
• 3 - (交互)正在解析响应内容
• 4 - (完成)响应内容解析完成，可以在客户端调用了

1.2 ajax请求四步曲

1. 建立XMLHttpRequest对象, new XMLHttpRequest();
2. 配置请求信息，(如open,get方法)，使用open方法与服务器建立链接;
3. 向服务器发送数据;
4. 调用onreadystatechange函数，针对不同的响应状态进行处理;

// 1. 建立XMLHttpRequest对象
let xhr = new XMLHttpRequest();
console.log('new过之后', xhr.readyState);

// 2. 配置请求信息，(如open,get方法)，使用open方法与服务器建立链接
xhr.open('get', '/readystate');
console.log('open之后', xhr.readyState);

// 3. 向服务器发送数据
xhr.send();
console.log('send之后', xhr.readyState);

// 4. 调用onreadystatechange函数，针对不同的响应状态进行处理
xhr.onreadystatechange = function () {
  console.log('changed', xhr.readyState);
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      resolve(xhr.response);
    } else {
      reject(xhr.response);
    }
  }
}

2. 使用Promise对象实现ajax封装

1. 确定函数需要接收的参数，即调用ajax请求用户需要传入的参

• method = 'get', // 请求方法，默认值设置为get，不传该参数默认为get请求
• url, // 访问的url
• data, // 请求时的其他参数
• headers // 请求头参数
• responseType // 希望得到的相应类型

2. 将ajax四步曲的代码封装成Promise对象并作为函数的返回值

function req({
  method = 'get',
  url,
  data,
  headers
}) {
  return new Promise((resolve, reject) => {
    // 原生ajax4步曲
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    for (let key in headers) {
      xhr.setRequestHeader(key, heades[key]);
    }
    if (data) xhr.send(data);
    else xhr.send();
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.response);
        } else {
          reject(xhr.response);
        }
      }
    }
  })
}

3. 调用一下封装的函数进行测试

let res = await req({
  url: '测试的url',
});