如何封装 Axios 以使用 async/await？

异步编程与Axios封装

在现代JavaScript开发中，异步编程是一个至关重要的概念，随着ES6引入的Promise以及ES8引入的async/await语法，处理异步操作变得更加简洁和直观，本文将探讨如何使用async/await结合Axios库进行HTTP请求的封装，并展示如何通过这种方式提高代码的可读性和维护性。

一、异步编程基础

1、回调函数：早期的异步编程主要依赖于回调函数，当多个异步操作相互依赖时，会导致“回调地狱”，使代码难以维护。

2、Promise：为了解决回调地狱的问题，ECMAScript 6引入了Promise对象，Promise提供了一种更优雅的方式来处理异步操作，允许开发者使用链式调用来处理多个异步操作。

3、async/await：ECMAScript 8进一步简化了异步编程，引入了async和await关键字，这使得基于Promise的异步代码看起来和同步代码非常相似，极大地提高了代码的可读性和可维护性。

二、Axios简介

Axios是一个基于Promise的HTTP客户端，可用于浏览器和Node.js环境，它支持发送HTTP请求的各种方法（如GET、POST、PUT、DELETE等），并且可以拦截请求和响应，转换请求和响应数据，取消请求等。

三、使用async/await封装Axios

为了更好地组织和管理HTTP请求，我们可以使用async/await语法对Axios进行封装，以下是一个基本的封装示例：

import axios from 'axios';
const instance = axios.create({
  baseURL: 'https://api.example.com', // API的基础URL
  timeout: 5000 // 请求超时时间
});
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做一些处理
    return config;
  },
  error => {
    // 处理请求错误
    console.log(error);
    return Promise.reject(error);
  }
);
instance.interceptors.response.use(
  response => {
    // 对响应数据做一些处理
    return response.data;
  },
  error => {
    // 处理响应错误
    console.log(error);
    return Promise.reject(error);
  }
);
export async function request(url, method = 'get', data = null) {
  try {
    let response;
    if (method.toLowerCase() === 'get') {
      response = await instance.get(url, { params: data });
    } else if (method.toLowerCase() === 'post') {
      response = await instance.post(url, data);
    } else if (method.toLowerCase() === 'put') {
      response = await instance.put(url, data);
    } else if (method.toLowerCase() === 'delete') {
      response = await instance.delete(url);
    } else {
      throw new Error(Unsupported method: ${method});
    }
    return response.data;
  } catch (error) {
    console.error('API请求失败', error);
    throw error; // 将错误抛出以便调用者处理
  }
}

在这个示例中，我们首先创建了一个Axios实例，并设置了基础URL和请求超时时间，我们为请求和响应添加了拦截器，以便在发送请求之前和收到响应之后进行一些通用的处理，我们定义了一个request函数，该函数接受URL、HTTP方法（默认为GET）和数据作为参数，并返回一个Promise对象，在函数内部，我们根据传入的方法类型调用相应的Axios方法，并使用async/await语法等待请求完成，如果请求成功，我们将响应数据返回；如果请求失败，我们将错误抛出以便调用者处理。

四、使用封装后的Axios进行HTTP请求

使用封装后的Axios进行HTTP请求非常简单，以下是一个简单的示例：

async function fetchData() {
  try {
    const data = await request('/some-endpoint', 'get');
    console.log(data);
  } catch (error) {
    console.error('获取数据失败', error);
  }
}
fetchData();

在这个示例中，我们调用了封装后的request函数来发送一个GET请求到/some-endpoint，由于request函数返回的是一个Promise对象，因此我们可以使用await关键字等待请求完成并获取响应数据，如果请求成功，我们将数据打印到控制台；如果请求失败，我们将错误信息打印到控制台。

五、归纳与最佳实践

通过使用async/await和Axios的组合，我们可以更加简洁和高效地进行异步HTTP请求，以下是一些最佳实践建议：

1、合理设置超时时间：为了避免请求无限期地挂起，应该为每个请求设置合理的超时时间。

2、统一处理错误：在拦截器中统一处理请求和响应的错误，可以减少重复代码并提高代码的可维护性。

3、灵活处理响应数据：根据业务需求灵活处理响应数据，例如可以在拦截器中对响应数据进行格式化或转换。

4、保持代码清晰：虽然async/await使异步代码看起来像同步代码，但仍然需要保持代码的清晰性和可读性，避免在async函数中编写过多的逻辑代码，可以将复杂的逻辑拆分成多个函数或模块。

六、相关问题与解答栏目

1、问题一：为什么使用async/await而不是Promise？

解答：虽然Promise也可以用于处理异步操作，但async/await语法更加简洁和直观，它使得基于Promise的异步代码看起来和同步代码非常相似，极大地提高了代码的可读性和可维护性，async/await还可以更好地处理多个异步操作之间的依赖关系。

2、问题二：如何取消使用Axios发出的请求？

解答：Axios取消了传统ajax的abort方法，改用了cancel token，可以通过以下方式实现请求的取消：安装axios-cancel-token插件（npm install axios-cancel-token --save），在发送请求时指定cancel token，并在需要取消请求时调用token的cancel方法。

import axios from 'axios';
import { CancelToken } from 'axios-cancel-token';
let cancel;
axios.get('/user/12345', {
  cancelToken: new CancelToken(function executor(c) {
    cancel = c;
  })
});
// 取消请求
cancel();

到此，以上就是小编对于“async await 封装 axios”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。