Nuxt3 用 useFetch 同一个链接不同请求参数为什么返回的数据是同一个？

Question

写一个接口文件 list.js

export const listApi = (data) => {
    return new Promise(function (resolve) {
        useFetch('http://127.0.0.1:8081/api/list', {
            method: "post",
            body: data
        }).then(res => {
            // console.log(res.data.value.data.list[0].title)

            resolve(res);
        })
    });
}

然后再 app.vue 里面发两个请求，后台给的数据不同，但是打印的数据确实同一个

<script setup lang="ts">
import {listApi} from "~/api/list";

listApi({page: 1, page_size: 5}).then(res => {
    console.log(res.data.value.data.list[0].title)
});
listApi({page: 2, page_size: 5}).then(res => {
    console.log(res.data.value.data.list[0].title)
});
</script>

<template>
...
</template>

<style scoped>

</style>

如果直接在app.vue里面这样写，就正常，放回不同数据

<script setup lang="ts">
useFetch('http://127.0.0.1:8081/api/list', {
    method: "post",
    body: {page: 1, page_size: 5}
}).then(res => {
    console.log(res.data.value.data.list[0].title)
})
useFetch('http://127.0.0.1:8081/api/list', {
    method: "post",
    body: {page: 2, page_size: 5}
}).then(res => {
    console.log(res.data.value.data.list[0].title)
})
</script>

<template>
...
</template>

<style scoped>

</style>

这是为什么，应该怎么写？

Answer 1

用fetch：

export const listApi = async (data) => {
    const response = await fetch('http://127.0.0.1:8081/api/list', {
        method: "POST",
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    });
    const result = await response.json();
    return result;
};