インターフェイス リクエストはプロジェクトにカプセル化され、ページの更新時に useFetch によってデータが返されない問題は解決されます。
ページの更新時に useFetch によってデータが返されません。
ブラウザが更新されても、ページにはデータが表示されず、インターフェイス データも返されません。nuxt の useFetch のパラメーターが変更されない場合、データはバックグラウンド インターフェイスから再要求されず、最後の結果が直接取得されます。ただし、注目しているページ、他のページをクリックするなど、リアルタイムでデータを取得するにはバックグラウンドに移動する必要があり、
このページに入るたび、または更新するたびに、バックグラウンドに移動してデータを再度取得する必要があるため、値のパラメータキーとしてタイムスタンプを参加させたのですが、このままではF5でページを更新するたびにデータが取得できず、結果としてページが表示されなくなります。サスペンスが機能しない。
ユーティリティ/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 });
}
})();
使用方法: composables/index.ts、API インターフェースは、これに配置されると関数を自動的にインポートします。
import Http from "@/utils/http";
/**
* 测试接口
*/
export const getTags = () => {
return Http.get("https://api/apiWx/wechat-config");
};
ページまたはコンポーネントで使用します。
onMounted(() => {
getTags()
.then((res) => {
console.log(res.value.data, "res");
})
.catch((err) => {
console.log(err, "错误");
});
});