原生ajax进行简单的封装

/* 
xhr + promise 封装一个异步ajax请求的通用函数 简洁版

ajax ('xxx.json')
*/

function ajax(url) {
  return new Promise((resolve, reject) => {
    // 创建一个XHR对象

    const xhr = new XMLHttpRequest()
    // 初始化一个异步请求(还没发请求)

    xhr.open('GET', url, true)
    // 绑定状态改变的监听

    xhr.onreadystatechange = function () { 
        /*
       ajax引擎得到响应数据后

       将xhr的readyState属性指定为4
       将响应数据保存在response / responseText属性上

       调用此回调函数

       */

        
      // 如果状态值不为4, 直接结束(请求还没有结束)

      if (xhr.readyState !== 4) {
        return

     }
      // 如果响应码在200~~299之间, 说明请求都是成功的

      if (xhr.status>=200 && xhr.status<300) {
        // 指定promise成功及结果值

        resolve(JSON.parse(xhr.responseText))
     } else { // 请求失败了

        // 指定promise失败及结果值

        reject(new Error('request error staus '+ request.status))
     }
   }
    xhr.send()
 })
}

使用：

// 使用async/await语法
async function fetchData() {
  try {
    const data = await ajax('https://example.com/api/data.json');
    console.log('Received data:', data);
    // 在这里处理获取到的数据
  } catch (error) {
    console.error('Failed to fetch data:', error.message);
    // 在这里处理错误情况
  }
}

fetchData();

// 或者使用Promise链式调用
ajax('https://example.com/api/data.json')
  .then(data => {
    console.log('Received data:', data);
    // 在这里处理获取到的数据
  })
  .catch(error => {
    console.error('Failed to fetch data:', error.message);
    // 在这里处理错误情况
  });