与拦截器和URL阵列更优雅地使用Axios-DEV365 开发者社区

Axios是在JavaScript中提出HTTP请求的流行库。它提供了一个简单直观的API，用于发送请求和处理响应。在这篇文章中，我们将通过创建一系列URL并将拦截器用于普通标题来探讨如何更优雅地使用Axios。

设置访问令牌和API端点

首先，我们需要设置访问令牌和API端点。我们将将访问令牌定义为一个常数，而我们的端点为一个对象，键代表每个端点，代表端点URL的值。

const accessToken = "INSERT YOUR ACCESS TOKEN HERE";
const endpoints = {
  basicProfile: "/users/profile",
  skills: "/users/skills",
  positions: "/users/positions",
}

创建Axios实例

接下来，我们将创建一个具有基本URL和常见标头的Axios实例。我们将使用axios对象的create方法来创建此实例。我们还将在Authorization标题中包括我们的访问令牌，并设置Content-Type和X-Restli-Protocol-Version标题。

const api = axios.create({
  baseURL: "https://api.example.com/v2",
  headers: {
    Authorization: `Bearer ${accessToken}`,
    "Content-Type": "application/json",
    "X-Restli-Protocol-Version": "2.0.0",
  },
});

使用拦截器设置基本URL

我们将使用拦截器为所有请求设置基本URL。这将允许我们在提出请求时仅指定端点名称，而不是完整的URL。我们将使用request拦截器修改config对象，并将url属性设置为我们的endpoints对象的相应URL。

api.interceptors.request.use((config) => {
  config.url = endpoints[config.url];
  return config;
});

使用一系列URL来获取数据

最后，我们将使用一系列URL来从多个端点获取数据。我们将使用Promise.all方法一次发送多个请求，并等待所有请求完成。请求完成后，我们将从每个响应中提取数据并根据需要使用。

Promise.all([api.get("basicProfile"), api.get("skills"), api.get("positions")])
  .then((responses) => {
    const basicProfile = responses[0].data;
    const skills = responses[1].data.elements;
    const positions = responses[2].data.elements;

    // Use fetched data
  })
  .catch((error) => {
    console.error(error);
  });

在此示例中，我们正在从三个端点获取数据：basicProfile，skills和positions。我们正在使用一系列URL来提出请求，而Promise.all方法等待所有这些方法都可以完成。请求完成后，我们将从每个响应中提取数据并根据需要使用它。

通过为通用标题使用一系列URL和拦截器，我们可以使代码更加优雅和易于阅读。这些技术还可以帮助减少样板代码并提高我们的代码库的可维护性。