api请求出错全局提示

api/request.ts

@@ -36,9 +36,9 @@ export default function request(url: string, method: String = 'get', data?: any,
 
   return fetch(config.baseUrl + url, options)
     .then((r) => {
-      try{
+      try {
         return r.json()
-      }catch(e){
+      } catch (e) {
         console.error(e);
       }
       return {
@@ -48,6 +48,24 @@ export default function request(url: string, method: String = 'get', data?: any,
       }
     })
     .then((data) => {
+      if (data.errors) {
+        //全局消息提示
+        window.messageApi.error('请求出错')
+
+        if (Array.isArray(data.errors)) {
+          data.errors.forEach((item: any) => {
+            if (item.defaultMessage){
+              window.messageApi.error(item.defaultMessage)
+            }
+          })
+        }
+
+        return {
+          code: '-1',
+          message: '请求失败',
+          result: null
+        }
+      }
       return data;
     })
     .catch(error => {

pages/_app.page.tsx

@@ -2,7 +2,20 @@ import '../public/antd.min.css';
 import '../styles/index.scss';
 import type { AppProps } from 'next/app';
 import withTheme from '../theme';
+import { message } from 'antd';
+import { useEffect } from 'react';
 
 export default function App({ Component, pageProps }: AppProps) {
-  return withTheme(<Component {...pageProps} />);
+  const [messageApi, contextHolder] = message.useMessage();
+  useEffect(() => {
+    //全局消息提示
+    window.messageApi = messageApi;
+  }, [])
+  
+  return withTheme(
+    <>
+      {contextHolder}
+      <Component {...pageProps} />
+    </>
+  );
 }

tsconfig.json

@@ -17,7 +17,8 @@
     "incremental": true,
     "paths": {
       "~/*": ["./*"]
-    }
+    },
+    "typeRoots": ["./typings"]
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]

typings/type.d.ts

+import { MessageInstance } from 'antd/es/message/interface';
+
+declare global {
+  interface Window {
+    messageApi: MessageInstance;
+  }
+}