La demande d'interface est encapsulée dans le projet, et le problème de l'absence de données renvoyées par useFetch lors du rafraîchissement de la page est résolu :
Aucune donnée renvoyée par useFetch lors du rafraîchissement de la page :
Lorsque le navigateur est actualisé, la page n'affiche pas de données et les données d'interface ne sont pas renvoyées. Lorsque les paramètres de useFetch de nuxt restent inchangés, les données ne seront pas redemandées à partir de l'interface d'arrière-plan, et le dernier résultat sera pris directement. Cependant, il est nécessaire d'aller en arrière-plan pour obtenir des données en temps réel,
comme ma page d'attention, et j'ai cliqué sur d'autres pages. Chaque fois que j'entre dans cette page ou que je l'actualise, je dois aller en arrière-plan pour obtenir des données encore une fois, j'ai donc participé à un horodatage.Le paramètre clé de la valeur, mais de cette façon, chaque fois que F5 rafraîchit la page, les données ne peuvent pas être obtenues, ce qui fait que la page ne s'affiche pas. Le suspense ne fonctionne pas.
utils/https.ts
import {
_AsyncData } from "nuxt3/dist/app/composables/asyncData";
import {
ElMessage } from "element-plus";
const baseUrl = "";
// 指定后端返回的基本数据类型
export interface ResponseConfig {
code: number;
status: number;
data: any;
msg: string;
}
export interface ValueConfig {
value: any;
}
const fetch = async (url: string, options?: any): Promise<any> => {
await nextTick(); //解决刷新页面useFetch无返回
const reqUrl = baseUrl + url;
return new Promise((resolve, reject) => {
useFetch(reqUrl, {
...options })
.then(({
data, error }: _AsyncData) => {
if (error.value) {
reject(error.value);
return;
}
const value = data.value;
if (!value) {
console.log("执行错误了");
// 这里处理错误回调
// reject(value)
// $router.replace('/reject/' + value.status)
} else if (value.code === 102) {
ElMessage({
message: value.msg,
type: "error",
});
} else {
resolve(ref(value));
}
})
.catch((err: any) => {
reject(err);
});
});
};
export default new (class Http {
get(url: string, params?: any): Promise<any> {
return fetch(url, {
method: "get", params });
}
post(url: string, params?: any): Promise<any> {
return fetch(url, {
method: "post", params });
}
put(url: string, body?: any): Promise<any> {
return fetch(url, {
method: "put", body });
}
delete(url: string, body?: any): Promise<any> {
return fetch(url, {
method: "delete", body });
}
})();
Mode d'emploi : composables/index.ts, l'interface api importera automatiquement les fonctions lorsqu'elles seront placées dans ce
import Http from "@/utils/http";
/**
* 测试接口
*/
export const getTags = () => {
return Http.get("https://api/apiWx/wechat-config");
};
Utilisation dans des pages ou des composants :
onMounted(() => {
getTags()
.then((res) => {
console.log(res.value.data, "res");
})
.catch((err) => {
console.log(err, "错误");
});
});