使用axios封装Promise的请求方法

Web应用程序中，我们通常需要使用Ajax技术来向服务器发送请求并获取数据。使用原生的XMLHttpRequest对象进行Ajax请求虽然可行，但需要处理的细节比较多。在这种情况下，我们通常会选择使用流行的Ajax库，例如jQuery、Axios等。

Axios是一个基于Promise的HTTP库，可以在浏览器和Node.js中使用。它具有简单易用的API和强大的功能，使得在进行HTTP请求时变得更加简单和高效。

本文将介绍如何使用axios封装一个Promise的请求方法，并支持超时时间和loading的添加。

安装axios

在使用axios之前，我们需要先安装它。可以通过npm来安装axios，具体命令如下：
npm install axios
安装完成后，在代码中引入axios库：
import axios from 'axios';

封装请求方法

接下来，我们将使用axios来封装一个Promise的请求方法。该方法具有以下特点：

• 支持GET、POST、PUT、DELETE等HTTP方法。
• 支持传递参数、请求头等配置项。
• 支持超时时间的设置。
• 支持loading的添加。

首先，我们可以先定义一个名为request的函数，用于发送HTTP请求。在函数中，我们将使用axios来发送请求，并返回一个Promise对象。

function request(url, options = {}) {
  // 默认配置项
  const defaults = {
    method: 'GET',
    timeout: 30000,
    showLoading: true,
  };

  // 合并配置项
  const opts = Object.assign({}, defaults, options);

  // 添加loading
  if (opts.showLoading) {
    // todo: 显示loading
  }

  // 发送请求
  return new Promise((resolve, reject) => {
    axios({
      url,
      method: opts.method,
      params: opts.params,
      data: opts.data,
      headers: opts.headers,
      timeout: opts.timeout,
    })
      .then((response) => {
        // 关闭loading
        if (opts.showLoading) {
          // todo: 隐藏loading
        }

        // 返回响应数据
        resolve(response.data);
      })
      .catch((error) => {
        // 关闭loading
        if (opts.showLoading) {
          // todo: 隐藏loading
        }

        // 返回错误信息
        reject(error);
      });
  });
}

在上述代码中，我们首先定义了一个默认的配置项，包括HTTP方法、超时时间和是否显示loading。然后，我们使用Object.assign()方法将传入的配置项和默认配置项进行合并。

接下来，我们添加了loading，如果showLoading为true，则显示loading；如果为false，则不显示loading。

然后，我们使用axios发送HTTP请求，并在请求成功时将返回的数据作为resolve的参数传递给Promise对象，并关闭loading，最终返回一个Promise对象。

当请求失败时，我们直接将错误信息作为reject的参数传递给Promise对象，并关闭loading。

最后，我们将定义好的request函数暴露出来，以便在其他模块中使用。

export default request;

使用请求方法

现在我们已经封装了一个Promise的请求方法，接下来我们可以在代码中使用该方法来发送HTTP请求。

假设我们要从服务器获取一些用户数据，我们可以使用以下代码来发送GET请求：

import request from './request';

request('/api/users')
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

在上述代码中，我们首先使用import关键字导入了request函数，然后使用该函数发送了一个GET请求，并将返回的数据打印在控制台上。

如果我们需要发送一个POST请求，并传递一些参数，可以使用以下代码：

import request from './request';

request('/api/users', {
  method: 'POST',
  data: {
    name: 'Tom',
    age: 20,
  },
})
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });

在上述代码中，我们使用了data属性来传递POST请求的参数，然后将返回的数据打印在控制台上。

添加loading

除了支持超时时间和不同的HTTP方法外，我们还可以为每个请求添加loading，并支持入参控制是否显示loading。

我们可以通过在request函数中添加代码来实现该功能。具体而言，我们可以在request函数中添加代码来显示loading，并在请求结束后关闭loading。

// 添加loading
if (opts.showLoading) {
  // 显示loading
  const loading = document.createElement('div');
  loading.innerText = 'Loading...';
  document.body.appendChild(loading);

  // 保存loading的引用，以便在请求结束后关闭loading
  opts.loading = loading;
}

// 发送请求
return new Promise((resolve, reject) => {
  axios({
    url,
    method: opts.method,
    params: opts.params,
    data: opts.data,
    headers: opts.headers,
    timeout: opts.timeout,
  })
    .then((response) => {
      // 关闭loading
      if (opts.loading) {
        document.body.removeChild(opts.loading);
      }

      // 返回响应数据
      resolve(response.data);
    })
    .catch((error) => {
      // 关闭loading
      if (opts.loading) {
        document.body.removeChild(opts.loading);
      }

      // 返回错误信息
      reject(error);
    });
});

在上述代码中，我们首先在request函数中添加了代码来显示loading。如果showLoading为true，则创建一个新的div元素，将其文本设置为Loading...，并将其添加到body元素中。

然后，我们使用opts.loading属性来保存loading的引用，以便在请求结束后关闭loading。

在请求结束后，我们使用document.body.removeChild()方法将loading从DOM中删除，并关闭loading。

结论

在本文中，我们介绍了如何使用axios封装一个Promise的请求方法，并支持超时时间和loading的添加。使用该方法，我们可以方便地在代码中发送HTTP请求，并获得响应数据或错误信息。

通过添加loading，我们可以在请求期间向用户显示一个提示，以便让用户知道请求正在进行中。

总之，axios是一个非常强大和流行的HTTP客户端库，可以帮助我们轻松地发送HTTP请求，并获得响应数据或错误信息。通过将axios与Promise结合使用，我们可以编写出简单而强大的请求代码，并在需要时添加额外的功能，如超时时间和loading等。

希望本文能够帮助读者更好地了解axios和Promise，并帮助他们编写更加优雅和健壮的JavaScript代码。