获取数据

1const { data } = await useFetch(
2  "https://pixabay.com/api/?key=your_api_key&q=sea"
3);
4console.log(data.value);

返回的 API 数据示例：

1{
2  "id": 195893,
3  "pageURL": "https://pixabay.com/en/blossom-bloom-flower-195893/",
4  "type": "photo",
5  "tags": "blossom, bloom, flower",
6  "previewURL": "https://cdn.pixabay.com/photo/2013/10/15/09/12/flower-195893_150.jpg",
7  "previewWidth": 150,
8  "previewHeight": 84,
9  "webformatURL": "https://pixabay.com/get/35bbf209e13e39d2_640.jpg",
10  "webformatWidth": 640,
11  "webformatHeight": 360,
12  "largeImageURL": "https://pixabay.com/get/ed6a99fd0a76647_1280.jpg",
13  "fullHDURL": "https://pixabay.com/get/ed6a9369fd0a76647_1920.jpg",
14  "imageURL": "https://pixabay.com/get/ed6a9364a9fd0a76647.jpg",
15  "imageWidth": 4000,
16  "imageHeight": 2250,
17  "imageSize": 4731420,
18  "views": 7671,
19  "downloads": 6439,
20  "likes": 5,
21  "comments": 2,
22  "user_id": 48777,
23  "user": "Josch13",
24  "userImageURL": "https://cdn.pixabay.com/user/2013/11/05/02-10-23-764_250x250.jpg"
25}

使用 useFetch 时，可解构出 data 和 pending 状态：

1const { data: images, pending: imagesPending } = await useFetch(...);

推荐将基础 URL 单独定义，并通过配置项控制请求行为：

1// 基础请求地址，用于后续拼接参数
2const baseUrl = "https://pixabay.com/api/";
3
4const {
5  data: images,
6  pending: imagesPending,
7  execute: fetchImages,
8} = await useFetch(
9  `?key=${apiKey}&q=sea`,
10  {
11    baseURL: baseUrl,
12    immediate: false,
13  }
14);

若不希望请求立即发起，可通过 immediate: false 配置禁用自动执行。此时需手动调用 execute 方法触发请求：

1await useFetch(
2  `?key=${apiKey}&q=sea`,
3  {
4    baseURL: baseUrl,
5    immediate: false,
6  }
7);

完整示例：

1const baseUrl = "https://pixabay.com/api/";
2
3const {
4  data: images,
5  pending: imagesPending,
6  execute: fetchImages,
7} = await useFetch(
8  `?key=${apiKey}&q=sea`,
9  {
10    baseURL: baseUrl,
11    immediate: false,
12  }
13);
14
15// 在需要时手动触发请求
16fetchImages();