使用Vue从JavaScript文件调用REST API
<p>我有一个在Vue页面上完美运行的Axios API调用。我需要将其变成一个独立的可调用模块，以便在应用程序中多次重复使用。每次尝试都失败了，我不确定是缺乏对独立js的经验还是其他原因。</p>
<p>这是可工作的Vue代码。</p>
<pre class="lang-html prettyprint-override"><code><template>
<div>
<ul v-if="posts && posts.length">
<li v-for="post of posts">
<p><strong>{{post.resID}}</strong></p>
<p>{{post.Name}}</p>
</li>
</ul>
<ul v-if="errors && errors.length">
<li v-for="error of errors">
{{error.message}}
</li>
</ul>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: "GetMxList",
data() {
return {
posts: [],
errors: []
}
},
// 在组件创建时获取帖子。
created() {
axios.get("http://localhost:8080/rest/...")
.then(response => {
// JSON响应会自动解析。
this.posts = response.data
})
.catch(e => {
this.errors.push(e)
})
}
}
</script>
</code></pre>
<p>Vue 3。谢谢你的回答。抱歉我没有表达清楚。我的目标是创建一个模块（类似于rest.js），然后在Pinia中使用它。目的是加载一次，然后经常使用结果。目前，它可以通过类似以下代码的“静态”加载工作，其中getJSONList调用返回一个JSON格式的答案，并将该答案放入MyList中以供整个应用程序使用。因此，组件只需使用Pinia映射。</p>
<pre class="brush:php;toolbar:false;">actions: {
async fetchList() {
const data = await getJSONList();
this.Mylist = data;
},</pre>
<p>很多次迭代。虽然这不返回任何内容，但至少不会抛出任何错误...</p>
<pre class="brush:php;toolbar:false;">import axios from 'axios';
export function getJSONList() {
const rest = axios.create({
baseURL: "http://localhost:8080/rest/", // 更好的做法是使用环境变量
});
const getPosts = async () => {
try {
return (await rest.get("http://localhost:8080/rest/")).data;
} catch (err) {
console.error(err.toJSON());
throw new Error(err.message);
}
};
return (getPosts);
}</pre></p>
1
766
![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
通常，你只需要将Axios部分移入一个模块，并将数据的使用留给你的组件。
// services/rest.js import axios from "axios"; const rest = axios.create({ // 更好的方式是使用环境变量来定义你的URL baseURL: "http://localhost:8080/rest/tctresidents/v1", }); // 这是一个函数 export const getResidents = async () => { try { // 请求路径将会附加到baseURL后面 return (await rest.get("/Residents")).data; } catch (err) { // 参考 https://axios-http.com/docs/handling_errors console.error(err.toJSON()); throw new Error(err.message); } };然后在你的组件/存储/任何地方...
import { getResidents } from "./path/to/services/rest"; export default { data: () => ({ residents: [], errors: [] }), async created() { try { this.residents = await getResidents(); } catch (err) { this.errors.push(err); } }, };