面试题：Qwik 中 axios 基础集成与配置

引入 axios 库：
- 首先，确保你的 Qwik 项目已经初始化。如果项目是基于 npm 或 yarn 的，在项目根目录下运行以下命令安装 axios：
```
npm install axios
# 或者使用 yarn
yarn add axios
```

配置简单的 GET 请求获取数据：

在 Qwik 组件中，假设你有一个名为 MyComponent.tsx 的组件。引入 axios 并编写获取数据的逻辑。
示例代码如下：

import { component$, useSignal } from '@builder.io/qwik';
import axios from 'axios';

export const MyComponent = component$(() => {
  const data = useSignal<any>(null);
  const fetchData = async () => {
    try {
      const response = await axios.get('YOUR_API_URL');
      data.value = response.data;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      {data.value && (
        <pre>{JSON.stringify(data.value, null, 2)}</pre>
      )}
    </div>
  );
});

在上述代码中，useSignal 用于创建一个可响应的数据信号 data，fetchData 函数是一个异步函数，通过 axios.get 方法向指定的 API 发送 GET 请求，并将响应数据赋值给 data。点击按钮时触发 fetchData 函数获取数据并展示。

解决跨域问题：

服务器端配置：
- 如果 API 是你自己开发的，在服务器端配置 CORS（跨域资源共享）。例如，在 Node.js 中使用 Express 框架，可以安装 cors 包并进行如下配置：
```
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());

// 其他路由和服务器配置代码
```
代理配置（开发环境）：
- 在 Qwik 项目的开发环境中，可以使用 http - proxy - middleware 进行代理配置。
- 首先安装 http - proxy - middleware：
```
npm install http - proxy - middleware
# 或者使用 yarn
yarn add http - proxy - middleware
```
- 在项目根目录下创建一个 vite.config.ts 文件（如果没有的话），配置代理如下：
```
import { defineConfig } from 'vite';
import { createVuePlugin } from '@vitejs/plugin - vue';
import { createProxyMiddleware } from 'http - proxy - middleware';

export default defineConfig({
  plugins: [createVuePlugin()],
  server: {
    proxy: {
      '/api': {
        target: 'YOUR_API_URL',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});
```
- 上述配置中，将以 /api 开头的请求代理到实际的 API 地址，这样在开发环境中可以避免跨域问题。在组件中发送请求时，将 URL 改为 /api/... 形式。例如：const response = await axios.get('/api/data'); 。

使用 JSONP（如果 API 支持）：

JSONP 是一种跨域解决方案，但它仅适用于 GET 请求且 API 支持 JSONP 的情况。
Axios 本身不直接支持 JSONP，但可以使用 jsonp - client 库。先安装 jsonp - client：

npm install jsonp - client
# 或者使用 yarn
yarn add jsonp - client

示例代码：

import { component$, useSignal } from '@builder.io/qwik';
import jsonp from 'jsonp - client';

export const MyComponent = component$(() => {
  const data = useSignal<any>(null);
  const fetchData = async () => {
    try {
      const response = await jsonp('YOUR_JSONP_API_URL');
      data.value = response;
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  return (
    <div>
      <button onClick={fetchData}>Fetch Data</button>
      {data.value && (
        <pre>{JSON.stringify(data.value, null, 2)}</pre>
      )}
    </div>
  );
});

但这种方式有一定局限性，如仅支持 GET 请求，且依赖 API 端支持 JSONP 回调等。

星途面试题库

面试题：Qwik 中 axios 基础集成与配置

知识考点

面试题答案