The interface request is encapsulated in the project, and the problem of no data returned by useFetch when refreshing the page is solved:
No data returned by useFetch when refreshing the page:
When the browser refreshes, the page does not display data, and the interface data does not return. When the parameters of nuxt's useFetch remain unchanged, the data will not be re-requested from the background interface, and the last result will be taken directly. However, there is a need to go to the background to obtain data in real time,
such as my attention page, and I clicked on other pages. Every time I enter this page or refresh, I need to go to the background to obtain data again, so I participated in a time stamp. The parameter key of the value, but in this way, every time F5 refreshes the page, the data cannot be obtained, resulting in the page not being displayed. Suspense doesn't work.
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 });
}
})();
How to use : composables/index.ts, the api interface will automatically import functions when placed in this
import Http from "@/utils/http";
/**
* 测试接口
*/
export const getTags = () => {
return Http.get("https://api/apiWx/wechat-config");
};
Use in pages or components:
onMounted(() => {
getTags()
.then((res) => {
console.log(res.value.data, "res");
})
.catch((err) => {
console.log(err, "错误");
});
});