javascript实现简单的ajax封装示例

下面是关于“javascript实现简单的ajax封装示例”的完整攻略。

什么是Ajax

Ajax（Asynchronous JavaScript and XML）指异步地使用JavaScript进行XMLHttpRequest（XHR）的一套技术方案。通过Ajax，我们可以在当前页面无需刷新的情况下向服务器发起请求并获取数据，从而更新页面展示。

实现Ajax封装示例

一般情况下，我们在使用Ajax前需要通过js代码创建一个XMLHttpRequest对象实例，然后向服务器发起请求，等待服务器响应并获取到数据后再将其展示在页面上。在这个过程中，步骤繁琐且代码重复量较大，容易引起混淆。因此，我们可以将这些步骤进行封装，以提高开发效率和代码可读性。

一般情况下，我们使用Ajax时需要对以下三个事件进行监听：

1. onreadystatechange：当readyState属性发生改变时触发；
2. ontimeout：当请求超时时触发；
3. onerror：当请求发生错误时触发。

具体实现过程如下：

/**
 * @function ajax
 * @param {string} url 请求地址
 * @param {object} options 请求参数
 * @returns {Promise} 返回Promise对象
 */

function ajax(url, options) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest();
    xhr.responseType = options.responseType || 'text';
    xhr.timeout = options.timeout || 10000;

    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(xhr.response);
        } else {
          reject(xhr);
        }
      }
    }

    xhr.onerror = function () {
      reject(xhr);
    }

    xhr.ontimeout = function () {
      reject(new Error('请求超时'));
    }

    // 组装请求参数并发起请求
    let params = null;
    if (options.method === 'GET') {
      params = options.data || null;
      xhr.open('GET', `${url}?${params}`, true);
      xhr.send();
    } else if (options.method === 'POST') {
      params = typeof options.data === 'string' ? options.data : JSON.stringify(options.data || {});
      xhr.open('POST', url, true);
      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
      xhr.send(params);
    }
  });
}

在上述代码中，我们将ajax请求进行了封装，并返回了一个Promise对象。开发者可以使用该方法方便地调用Ajax请求并获取数据。

示例

下面我们通过两个示例来演示如何使用上述ajax方法封装：

示例1：GET请求

ajax('https://jsonplaceholder.typicode.com/todos/1', {
  method: 'GET',
  responseType: 'json'
}).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
});

在上述代码中，我们使用ajax方法发起了一个GET请求，请求的url地址为 https://jsonplaceholder.typicode.com/todos/1，请求参数为空，timeout设置为10000ms，返回数据的类型为json格式。当请求成功后，我们打印了响应数据；当请求失败时，我们打印了错误信息。

示例2：POST请求

ajax('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  responseType: 'json',
  timeout: 5000,
  data: {
    title: 'foo',
    body: 'bar',
    userId: 1
  }
}).then(res => {
  console.log(res);
}).catch(err => {
  console.error(err);
});

在上述代码中，我们使用ajax方法发起了一个POST请求，请求的url地址为 https://jsonplaceholder.typicode.com/posts，请求参数为一个对象，timeout设置为5000ms，返回数据的类型为json格式。当请求成功后，我们打印了响应数据；当请求失败时，我们打印了错误信息。