Javascript 如何搜索API

我是Vue.js的初学者，想做一个使用API的项目。这个项目最初是由TraversyMedia使用React完成的，但它似乎非常简单，可以转换为Vuejs。我的问题是我不确定如何在API中搜索特定的参与者。搜索栏检测到输入，但我在查询API时遇到问题。*

<template lang="">
    <div>
        <!-- Breaking Bad -->
        <Header></Header>
        <Search v-on:wordChange="onWordChange"></Search>
        <ActorList v-bind:characters="actorInfo"></ActorList>
        <!-- characters is the name of the property we want to show up in the child component -->
        <!-- {{ actorInfo.length }} -->
        <Actor></Actor>
    </div>
</template>
<script>
    import Header from "./components/Header";
    import Search from "./components/Search";
    import ActorList from "./components/ActorList";
    import Actor from "./components/Actor";
    import axios from "axios";

    export default {
        name: "App",
        data: function() {
            return { actorInfo: [] };
        },
        components: {
            Header,
            Search,
            ActorList,
            Actor
        },
        mounted() {
            axios
                .get("https://www.breakingbadapi.com/api/characters?name", {})
                .then((response) => {
                    this.actorInfo = response.data;
                    // this.datas = response.data;
                    // console.log(response.data);
                })
                .catch(function(error) {
                    console.log(error);
                });
            //This is how to get all data from the api endpoint with axios
        },
        methods: {
            onWordChange: function(searchTerm) {
                console.log(searchTerm);
            }
        }
    };
</script>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: "Montserrat";
        font-size: 15px;
        color: white;
        background: rgb(0, 0, 0);
        background: linear-gradient(
            90deg,
            rgba(0, 0, 0, 1) 0%,
            rgba(2, 44, 23, 1) 33%,
            rgba(2, 44, 23, 1) 66%,
            rgba(0, 0, 0, 1) 100%
        );
    }
</style>

从“/components/Header”导入标题；
从“/components/Search”导入搜索；
从“/components/ActorList”导入ActorList；
从“/components/Actor”导入参与者；
从“axios”导入axios；
导出默认值{
名称：“应用程序”，
数据：函数（）{
返回{actorInfo:[]}；
},
组成部分：{
标题，
搜索，
ActorList，
演员
},
安装的（）{
axios
.get（“https://www.breakingbadapi.com/api/characters?name", {})
。然后（（响应）=>{
this.actorInfo=response.data；
//this.datas=response.data；
//console.log（response.data）；
})
.catch（函数（错误）{
console.log（错误）；
});
//这就是如何使用axios从api端点获取所有数据
},
方法：{
onWordChange:函数（searchTerm）{
console.log（searchTerm）；
}
}
};
* {
保证金：0；
填充：0；
框大小：边框框；
}
身体{
字体系列：“蒙特塞拉特”；
字体大小：15px；
颜色：白色；
背景：rgb（0,0,0）；
背景：线性梯度(
90度，
rgba（0,0,0,1）0%，
rgba（2,44,23,1）33%，
rgba（2,44,23,1）66%，
rgba（0,0,0,1）100%
);
}

只有当组件安装到DOM时，才会触发您在

装入的
axios
请求。这只会发生一次，这就是为什么你打字时什么也没发生

我推荐两种选择：

选项1：在页面加载时查询API一次，并在客户端本地搜索所有记录

这种方法的好处是，您不会在每次击键时都查询API，因此搜索速度非常快，而且您还可以控制如何根据查询匹配记录。这种方法的缺点是，如果API中提供了新数据，则需要刷新页面以查看和查询它。
从我看到的情况来看，这看起来像是你想要做的

如果是这样，您可以使用computed属性显示查询的过滤结果，同时使用
this.actorInfo
包含可搜索记录的整个列表：


...
...
...
导出默认值{
...
数据（）{
返回{
actorInfo:[]
}
},
挂载（）{
axios.get（）https://www.breakingbadapi.com/api/characters?name')
。然后（响应=>{
this.actorInfo=response.data
})
},
计算：{
筛选结果（）{
返回此.actorInfo.filter（actor=>{
//如果需要，请使用您自己的自定义“搜索”匹配算法替换此返回语句
返回actor.toLowerCase（）.startsWith（this.searchTerm.toLowerCase（））
})
}
},
方法：{
onWordChange（搜索术语）{
this.searchTerm=searchTerm
}
}
...
}


选项2：在每次击键时查询API

这种方法的好处是可以立即看到API提供的新信息。缺点是，每次击键之间都会有一些（可能）明显的延迟，并且可能会受到速率限制的风险（服务器可能会暂时阻止您的请求，因为您发送的请求太多），并且您实际上无法控制如何根据查询匹配记录

为此，您可以创建另一个名为
search
的方法，该方法使用搜索词，然后执行HTTP请求。要显示页面加载上的所有记录，您在
mounted
中执行搜索时没有指定值，这应该会返回所有内容（仅对于此特定API，其他API可能会有不同的行为，因此以后请注意这一点）。之后，使用的每次击键都会发送一个HTTP请求，其中包含搜索输入的值，该值将为您返回过滤后的结果


...
...
...
导出默认值{
...
挂载（）{
this.search（“”）//我确认这将加载页面加载上的所有记录
},
方法：{
onWordChange（搜索术语）{
this.search（searchTerm）
},
搜索（搜索词）{
axios.get（）https://www.breakingbadapi.com/api/characters?name=${searchTerm}'）
。然后（响应=>{
this.actorInfo=response.data
})
}
}
...
}
挂载
不会返回任何内容<代码>挂载

从未使用过。我明白了，应该使用什么来代替？我应该改用这个方法吗？这能回答你的问题吗？不完全是我要找的。简单地说，我可以显示API的内容。我有图像和数据显示。我只是不知道如何搜索特定的参与者并显示信息，正如您所解释的，

mounted

将在装载DOM时执行。那么为什么不改用

created（）

呢？

created

在

mounted

之前被触发，所以是的，您可以改用

created

来获取“页面加载”数据。在这种情况下，我坚持使用

mounted

，因为OP使用了

mounted

。但是，是的，OP，在获取da时，更喜欢创建的

而不是装载的