MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Qwik 与第三方库集成：使用 axios 进行 API 调用

2023-10-175.1k 阅读

Qwik 与第三方库集成：使用 axios 进行 API 调用

Qwik 框架概述

Qwik 是一个现代的前端框架，旨在提供极致的性能和用户体验。它采用了一种独特的策略，将 JavaScript 的执行推迟到真正需要的时候，从而实现更快的页面加载速度和更好的交互性。Qwik 的核心概念包括即时渲染（Instant Rendering）、自动代码分割（Automatic Code Splitting）以及最小化 JavaScript 传输（Minimal JavaScript Transfer）。这些特性使得 Qwik 在构建高性能 Web 应用时具有显著的优势。

例如，在传统的前端框架中，页面加载时会一次性下载并执行大量的 JavaScript 代码，这可能会导致页面在加载过程中出现卡顿。而 Qwik 通过即时渲染，页面的初始 HTML 可以快速呈现给用户，然后根据用户的交互按需加载和执行 JavaScript 代码，大大提升了用户感知的加载速度。

axios 库简介

axios 是一个流行的基于 Promise 的 HTTP 客户端，用于在浏览器和 Node.js 中进行 HTTP 请求。它具有简洁易用的 API，支持各种请求方法（如 GET、POST、PUT、DELETE 等），并且可以轻松地处理请求和响应的拦截、错误处理等功能。

以下是一个简单的使用 axios 发送 GET 请求的示例：

import axios from 'axios';

axios.get('https://example.com/api/data')
 .then(response => {
      console.log(response.data);
    })
 .catch(error => {
      console.error('Error fetching data:', error);
    });

在这个示例中，我们使用 axios 的 get 方法发送一个 GET 请求到指定的 URL。如果请求成功，then 回调函数会被执行，我们可以在其中处理服务器返回的数据。如果请求失败，catch 回调函数会捕获到错误并进行相应的处理。

在 Qwik 项目中集成 axios

安装 axios

首先，我们需要在 Qwik 项目中安装 axios。假设我们已经创建了一个 Qwik 项目，进入项目目录并使用 npm 或 yarn 安装 axios：

npm install axios
# 或者
yarn add axios

安装完成后，我们就可以在项目中引入并使用 axios 了。

创建 API 服务模块

为了更好地管理 API 调用，我们通常会创建一个专门的 API 服务模块。在 Qwik 项目的 src 目录下，创建一个名为 api 的文件夹，然后在其中创建一个 axiosService.js 文件。

在 axiosService.js 中，我们可以配置 axios 的一些全局设置，例如设置 baseURL，这样我们在发送请求时就不需要每次都完整地填写 URL：

import axios from 'axios';

// 创建一个 axios 实例
const api = axios.create({
  baseURL: 'https://your-api-base-url.com/api',
  timeout: 5000, // 设置请求超时时间为 5 秒
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
api.interceptors.request.use(config => {
  // 在发送请求之前可以对 config 进行一些处理，例如添加 token
  const token = localStorage.getItem('token');
  if (token) {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器
api.interceptors.response.use(response => {
  // 对响应数据进行一些通用的处理，例如检查状态码
  if (response.status === 200) {
    return response.data;
  }
  return response;
}, error => {
  // 处理响应错误
  if (error.response) {
    // 服务器返回了一个非 2xx 的状态码
    console.error('Server returned error:', error.response.status, error.response.data);
  } else if (error.request) {
    // 请求已经发出，但是没有收到响应
    console.error('No response received:', error.request);
  } else {
    // 在设置请求时发生了一些错误
    console.error('Error setting up the request:', error.message);
  }
  return Promise.reject(error);
});

export default api;

在上述代码中：

  1. 我们使用 axios.create 创建了一个 axios 实例 api，并设置了 baseURL、timeout 和默认的 headers。
  2. 通过 interceptors.request.use 添加了请求拦截器，在请求发送前添加了 Authorization 头信息（假设我们从 localStorage 中获取了 token）。
  3. 使用 interceptors.response.use 添加了响应拦截器，对响应数据进行了一些通用处理，并且在发生错误时进行了详细的错误记录。

在 Qwik 组件中使用 API 服务

假设我们有一个 Qwik 组件需要从 API 获取数据并展示。在 src/routes 目录下创建一个 Home.tsx 组件（这是 Qwik 应用的首页组件示例）：

import { component$, useLoader } from '@builder.io/qwik';
import api from '../api/axiosService';

export default component$(() => {
  const [data, setData] = useLoader(async () => {
    const response = await api.get('/data');
    return response;
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
});

在这个组件中：

  1. 我们引入了 useLoader 钩子，这是 Qwik 提供的用于加载数据的钩子。useLoader 接受一个异步函数，该函数会在组件加载时执行。
  2. 在异步函数中，我们使用之前创建的 api 实例发送一个 GET 请求到 /data 端点（结合之前设置的 baseURL，实际请求的 URL 是 https://your-api-base-url.com/api/data）。
  3. useLoader 返回一个数组，第一个元素是加载的数据，第二个元素是用于更新数据的函数。我们使用数组解构将数据赋值给 data，并使用 setData 来更新数据（在这个简单示例中暂未使用 setData）。
  4. 最后，我们在组件的 JSX 中展示获取到的数据，如果数据存在，就将其以 JSON 格式字符串的形式展示出来。

处理不同类型的 API 请求

POST 请求

假设我们有一个 API 端点用于创建新的资源，例如创建一个用户。我们可以在 axiosService.js 中添加一个函数来处理 POST 请求：

// 在 axiosService.js 中添加以下函数
export const createUser = async (userData) => {
  return api.post('/users', userData);
};

然后在 Qwik 组件中使用这个函数：

import { component$, useLoader } from '@builder.io/qwik';
import { createUser } from '../api/axiosService';

export default component$(() => {
  const [newUser, setNewUser] = useLoader(async () => {
    const userData = {
      name: 'John Doe',
      email: 'johndoe@example.com'
    };
    const response = await createUser(userData);
    return response.data;
  }, []);

  return (
    <div>
      <h1>Create User</h1>
      {newUser && <pre>{JSON.stringify(newUser, null, 2)}</pre>}
    </div>
  );
});

在上述代码中：

  1. 在 axiosService.js 中，createUser 函数接受用户数据作为参数，并使用 api.post 发送一个 POST 请求到 /users 端点。
  2. 在 Qwik 组件中，我们构造了一个 userData 对象，然后使用 createUser 函数发送 POST 请求，并将返回的新用户数据展示出来。

PUT 请求

对于更新资源的场景，我们可以类似地在 axiosService.js 中添加一个函数来处理 PUT 请求。假设我们要更新一个用户的信息：

// 在 axiosService.js 中添加以下函数
export const updateUser = async (userId, updatedData) => {
  return api.put(`/users/${userId}`, updatedData);
};

在 Qwik 组件中使用这个函数：

import { component$, useLoader } from '@builder.io/qwik';
import { updateUser } from '../api/axiosService';

export default component$(() => {
  const [updatedUser, setUpdatedUser] = useLoader(async () => {
    const userId = 1;
    const updatedData = {
      name: 'Jane Doe',
      email: 'janedoe@example.com'
    };
    const response = await updateUser(userId, updatedData);
    return response.data;
  }, []);

  return (
    <div>
      <h1>Update User</h1>
      {updatedUser && <pre>{JSON.stringify(updatedUser, null, 2)}</pre>}
    </div>
  );
});

这里，updateUser 函数接受用户 ID 和更新的数据作为参数，使用 api.put 发送 PUT 请求到 /users/{userId} 端点来更新用户信息。

DELETE 请求

要删除资源，我们在 axiosService.js 中添加一个处理 DELETE 请求的函数：

// 在 axiosService.js 中添加以下函数
export const deleteUser = async (userId) => {
  return api.delete(`/users/${userId}`);
};

在 Qwik 组件中使用这个函数：

import { component$, useLoader } from '@builder.io/qwik';
import { deleteUser } from '../api/axiosService';

export default component$(() => {
  const [deleteResult, setDeleteResult] = useLoader(async () => {
    const userId = 1;
    const response = await deleteUser(userId);
    return response.data;
  }, []);

  return (
    <div>
      <h1>Delete User</h1>
      {deleteResult && <pre>{JSON.stringify(deleteResult, null, 2)}</pre>}
    </div>
  );
});

deleteUser 函数接受用户 ID 作为参数，使用 api.delete 发送 DELETE 请求到 /users/{userId} 端点来删除指定用户。

错误处理与优化

全局错误处理

在 Qwik 应用中，我们可以通过创建一个全局的错误边界来处理 API 调用过程中可能出现的错误。在 src 目录下创建一个 ErrorBoundary.tsx 文件：

import { component$, useContext } from '@builder.io/qwik';
import { QwikCityErrorContext } from '@builder.io/qwik-city';

export default component$(() => {
  const error = useContext(QwikCityErrorContext);

  return (
    <div>
      {error && (
        <div>
          <h1>An error occurred</h1>
          <pre>{error.message}</pre>
        </div>
      )}
    </div>
  );
});

然后在 main.tsx 中注册这个错误边界：

import { component$, render } from '@builder.io/qwik';
import { QwikCity } from '@builder.io/qwik-city';
import ErrorBoundary from './ErrorBoundary';

const App = component$(() => {
  return (
    <QwikCity>
      <ErrorBoundary />
      {/* 其他应用内容 */}
    </QwikCity>
  );
});

render(<App />, document.getElementById('qwik'));

这样，当 API 调用或其他地方抛出错误时，错误信息会在 ErrorBoundary 组件中显示出来，提供给用户一个友好的错误提示。

加载状态处理

在 API 调用过程中，我们可以通过显示加载状态来提升用户体验。在之前的 Home.tsx 组件示例中，我们可以添加加载状态的处理：

import { component$, useLoader } from '@builder.io/qwik';
import api from '../api/axiosService';

export default component$(() => {
  const [data, { isLoading, error }] = useLoader(async () => {
    const response = await api.get('/data');
    return response;
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      {isLoading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
});

在这个更新后的组件中，useLoader 返回的对象包含了 isLoading 和 error 属性。我们可以根据 isLoading 来显示加载提示，根据 error 来显示错误信息，使得用户在 API 调用过程中有更好的感知。

缓存策略

为了减少不必要的 API 调用，我们可以实现一些缓存策略。一种简单的方式是在内存中缓存 API 响应数据。在 axiosService.js 中，我们可以添加一个缓存对象和相关的逻辑：

const responseCache = {};

export const getCachedData = async (url) => {
  if (responseCache[url]) {
    return responseCache[url];
  }
  const response = await api.get(url);
  responseCache[url] = response.data;
  return response.data;
};

然后在 Qwik 组件中使用这个缓存函数：

import { component$, useLoader } from '@builder.io/qwik';
import { getCachedData } from '../api/axiosService';

export default component$(() => {
  const [data, { isLoading, error }] = useLoader(async () => {
    const response = await getCachedData('/data');
    return response;
  }, []);

  return (
    <div>
      <h1>Data from API</h1>
      {isLoading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
    </div>
  );
});

在上述代码中，getCachedData 函数首先检查缓存中是否已经有对应 URL 的数据，如果有则直接返回缓存数据，否则发送 API 请求并将响应数据缓存起来。这样在多次请求相同数据时，可以直接从缓存中获取，提高了应用的性能。

与 Qwik 路由结合

在路由组件中进行 API 调用

Qwik 的路由系统允许我们在不同的路由组件中进行 API 调用。例如，假设我们有一个用户详情页面，其路由为 /users/:id。我们可以在对应的路由组件中获取用户 ID 并进行 API 调用获取用户详情。在 src/routes/users/[id].tsx 文件中：

import { component$, useLoader, useParams } from '@builder.io/qwik';
import api from '../../../api/axiosService';

export default component$(() => {
  const { id } = useParams();
  const [user, { isLoading, error }] = useLoader(async () => {
    const response = await api.get(`/users/${id}`);
    return response.data;
  }, [id]);

  return (
    <div>
      <h1>User Details</h1>
      {isLoading && <p>Loading...</p>}
      {error && <p>Error: {error.message}</p>}
      {user && (
        <div>
          <p>Name: {user.name}</p>
          <p>Email: {user.email}</p>
        </div>
      )}
    </div>
  );
});

在这个组件中：

  1. 我们使用 useParams 钩子获取路由参数中的 id。
  2. useLoader 的依赖数组中包含了 id，这样当 id 变化时，会重新触发数据加载。
  3. 根据获取到的 id，我们发送一个 GET 请求到 /users/{id} 端点来获取用户详情，并在组件中展示相关信息。

预加载数据

Qwik 支持在路由切换前预加载数据，以提高用户体验。我们可以在 src/routes/_layout.tsx 文件中配置预加载逻辑。假设我们有一个布局组件，其中包含了一些需要在不同页面中共享的数据（例如用户的基本信息）：

import { component$, useLoader } from '@builder.io/qwik';
import api from '../api/axiosService';

export default component$(() => {
  const [userInfo, { isLoading }] = useLoader(async () => {
    const response = await api.get('/user/info');
    return response.data;
  }, []);

  return (
    <div>
      {isLoading && <p>Loading user info...</p>}
      {/* 布局内容，例如导航栏等 */}
    </div>
  );
});

通过在布局组件中进行数据预加载，当用户切换到不同页面时，这些共享数据已经加载完成，减少了页面切换时的等待时间。同时，我们可以在其他路由组件中根据需要使用这些预加载的数据，例如在用户详情页面中可能会结合预加载的用户基本信息进行展示或进一步的逻辑处理。

安全性考虑

防止 CSRF 攻击

在进行 API 调用时，防止跨站请求伪造（CSRF）攻击是非常重要的。一种常见的做法是在服务器端生成 CSRF 令牌，并在每次请求中包含这个令牌。在 Qwik 应用中，我们可以在发送请求时从 cookie 中获取 CSRF 令牌并添加到请求头中。假设服务器在响应中通过 Set - Cookie 头设置了名为 X - CSRF - Token 的 CSRF 令牌：

// 在 axiosService.js 中更新请求拦截器
import axios from 'axios';
import Cookies from 'js - cookie';

// 创建一个 axios 实例
const api = axios.create({
  baseURL: 'https://your-api-base-url.com/api',
  timeout: 5000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 请求拦截器
api.interceptors.request.use(config => {
  const csrfToken = Cookies.get('X - CSRF - Token');
  if (csrfToken) {
    config.headers['X - CSRF - Token'] = csrfToken;
  }
  return config;
}, error => {
  return Promise.reject(error);
});

// 响应拦截器和其他代码不变...

export default api;

在上述代码中，我们使用 js - cookie 库从 cookie 中获取 X - CSRF - Token，并在请求拦截器中将其添加到请求头中，这样服务器可以验证请求的合法性，防止 CSRF 攻击。

数据加密

对于敏感数据的传输，我们应该进行加密。在前端，可以使用一些加密库，例如 crypto - js。假设我们要发送用户登录信息，并且需要对密码进行加密：

import CryptoJS from 'crypto - js';
import api from './axiosService';

const encryptPassword = (password) => {
  return CryptoJS.SHA256(password).toString();
};

const login = async (username, password) => {
  const encryptedPassword = encryptPassword(password);
  const data = {
    username,
    password: encryptedPassword
  };
  return api.post('/login', data);
};

export { login };

在上述代码中，我们使用 CryptoJS.SHA256 对密码进行加密，然后将加密后的密码发送到服务器进行登录验证。这样可以在一定程度上保护用户的敏感信息在传输过程中的安全性。

通过以上详细的步骤和代码示例，我们全面地介绍了在 Qwik 项目中如何集成 axios 进行 API 调用，涵盖了从基本的安装配置到不同类型请求的处理、错误处理、性能优化以及安全性考虑等多个方面，希望能帮助开发者构建出高性能、安全可靠的前端应用。