如何使用JavaScript和Axios正确调用SWAPI进行搜索查询-html教程-PHP中文网

如何使用JavaScript和Axios正确调用SWAPI进行搜索查询

花韻仙語

发布： 2025-11-04 13:22:01

原创

281人浏览过

如何使用JavaScript和Axios正确调用SWAPI进行搜索查询

本教程旨在解决使用javascript和axios调用swapi时常见的api url构造错误。文章将详细阐述swapi搜索接口的正确用法，包括如何构建带有资源类型和搜索参数的url，并提供完整的代码示例和最佳实践，帮助开发者高效地从swapi获取数据并展示在网页上。

理解SWAPI搜索接口的正确用法

在使用JavaScript和Axios与SWAPI（Star Wars API）交互时，一个常见的错误是未能正确构造API的搜索查询URL，导致收到HTTP 404（未找到）错误。问题通常出在将用户输入直接拼接在API根路径之后，而忽略了SWAPI对搜索请求的特定格式要求。

例如，如果用户的JavaScript代码尝试通过以下方式构建API请求：

const userInput = form.elements.query.value;
const res = await axios.get(`https://swapi.dev/api/${userInput}`);

登录后复制

当用户输入“luke”时，请求URL会变成 https://swapi.dev/api/luke。然而，SWAPI并没有名为“luke”的顶级资源，因此会返回404错误。SWAPI的搜索功能需要指定一个资源类型（如 people、films、planets 等），并通过 ?search= 参数来传递搜索关键词。

正确构建SWAPI搜索URL

根据SWAPI的官方文档，一个正确的搜索URL结构应为：

立即学习“Java免费学习笔记（深入）”；

https://swapi.dev/api/{resource}/?search={your_search_query}

其中：

Shrink.media

Shrink.media是当今市场上最快、最直观、最智能的图像文件缩减工具

123

查看详情

{resource}：指定要搜索的资源类型，例如 people（人物）、films（电影）、planets（行星）等。
{your_search_query}：用户的实际搜索关键词。

因此，如果我们要搜索人物（people），并使用用户输入作为查询关键词，正确的Axios请求应修改为：

const userInput = form.elements.query.value;
// 假设我们正在搜索人物资源
const res = await axios.get(`https://swapi.dev/api/people/?search=${userInput}`);

登录后复制

通过这种方式，当用户输入“luke”时，实际的请求URL将是 https://swapi.dev/api/people/?search=luke，这将正确地向SWAPI的“人物”资源发起搜索请求。

完整的示例代码

以下是一个完整的HTML和JavaScript示例，演示如何构建一个简单的“电影查找器”应用，并正确地使用Axios和SWAPI进行搜索。

HTML结构 (index.html)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.scss"> <!-- 假设有样式文件 -->
    <title>SWAPI 查找器</title>
    <!-- 引入 Axios CDN -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <h1>SWAPI 查找器</h1>

    <form action="" id="searchForm">
        <input type="text" placeholder="查找人物、电影或行星..." name="query">
        <select name="resourceType" id="resourceType">
            <option value="people">人物</option>
            <option value="films">电影</option>
            <option value="planets">行星</option>
            <!-- 可以根据需要添加更多资源类型 -->
        </select>
        <button id="searchBtn">搜索</button>
    </form>

    <ul class="results-list"></ul>

    <script src="script.js"></script>
</body>
</html>

登录后复制

JavaScript逻辑 (script.js)

const form = document.querySelector('#searchForm');
const resultsList = document.querySelector('.results-list');

form.addEventListener('submit', async function (e) {
    e.preventDefault(); // 阻止表单默认提交行为，避免页面刷新

    const userInput = form.elements.query.value;
    const resourceType = form.elements.resourceType.value; // 获取选中的资源类型

    // 清空之前的搜索结果
    resultsList.innerHTML = '';

    if (!userInput.trim()) {
        const listItem = document.createElement('LI');
        listItem.textContent = '请输入搜索关键词。';
        resultsList.append(listItem);
        return;
    }

    try {
        // 构建正确的SWAPI搜索URL
        const apiUrl = `https://swapi.dev/api/${resourceType}/?search=${userInput}`;
        const res = await axios.get(apiUrl);

        const dataResults = res.data.results;

        if (dataResults && dataResults.length > 0) {
            for (let item of dataResults) {
                const listItem = document.createElement('LI');
                // SWAPI结果中，人物有'name'，电影有'title'，行星有'name'
                listItem.textContent = item.name || item.title;
                resultsList.append(listItem);
            }
        } else {
            const listItem = document.createElement('LI');
            listItem.textContent = `未找到与 "${userInput}" 相关的 ${resourceType}。`;
            resultsList.append(listItem);
        }
    } catch (error) {
        console.error('API请求失败:', error);
        const listItem = document.createElement('LI');
        listItem.textContent = `搜索失败，请稍后再试。错误信息: ${error.message}`;
        resultsList.append(listItem);
    }
});

登录后复制

在这个改进的JavaScript代码中，我们不仅修正了API URL的构造方式，还增加了选择资源类型的功能，并对结果的显示和错误处理进行了优化。

注意事项与最佳实践

查阅API文档是关键： 在使用任何第三方API之前，务必仔细阅读其官方文档。文档会详细说明端点结构、必需参数、可选参数、认证方式以及返回数据格式。这是避免常见错误最有效的方法。
逐步测试API： 在将API集成到完整的应用程序之前，建议单独测试API端点。可以使用浏览器开发者工具、Postman、Insomnia或简单的fetch/axios脚本，硬编码搜索字符串并console.log返回结果。这有助于理解API的响应结构，并快速定位API调用本身的问题。
错误处理： 在实际应用中，API请求应始终包含错误处理机制（如try...catch块）。这可以捕获网络错误、HTTP错误（如404、500）或其他任何在请求过程中可能发生的异常，从而提升用户体验和应用的健壮性。
数据展示： API返回的数据通常是JSON格式的对象或数组。在将数据显示到DOM中时，需要根据数据的实际结构进行解析和迭代。例如，SWAPI的搜索结果通常在res.data.results数组中，你需要遍历这个数组来创建列表项。
用户体验： 考虑在搜索过程中提供加载指示器，并在没有结果时给出友好的提示。

总结

正确构造API请求URL是成功与Web API交互的基础。对于SWAPI这类需要特定搜索参数的API，理解其文档中定义的URL结构至关重要。通过指定资源类型和使用?search=参数，开发者可以避免404错误，并有效地获取所需数据。结合适当的错误处理和数据展示逻辑，可以构建出功能完善且用户友好的Web应用程序。

以上就是如何使用JavaScript和Axios正确调用SWAPI进行搜索查询的详细内容，更多请关注php中文网其它相关文章！