feat: add axios error toaster

src/apis/album.ts

@@ -5,7 +5,6 @@ type GetAlbumFn = (id: number) => Promise<IGetAlbumResponse>
 
 const getAlbum: GetAlbumFn = async (id) => {
   const response = await axios({
-    method: 'get',
     url: '/album',
     params: {
       id

src/apis/auth.ts

@@ -1,11 +1,10 @@
-import axios from 'helpers/axios'
+import axios, { requestWithoutErrorToast } from 'helpers/axios'
 import { ILoginRequest, ILoginResult } from './types/auth'
 
 type LoginFn = (params: ILoginRequest) => Promise<ILoginResult>
 
 const login: LoginFn = ({ phone, password }) => {
-  return axios({
-    method: 'get',
+  return requestWithoutErrorToast({
     url: '/login/cellphone',
     params: {
       phone,

src/apis/comment.ts

@@ -24,7 +24,6 @@ type UnlikeCommentFn = (params: Params, callback?: Function) => Promise<any>
 
 const likeUnlikeComment: LikeUnlikeCommentFn = async ({ likeOrUnlike, type, id, commentId }) => {
   const response = await axios({
-    method: 'get',
     url: '/comment/like',
     params: {
       id,

src/apis/personalized.ts

@@ -9,7 +9,6 @@ type GetBannerFn = () => Promise<IBanner[]>
 
 const getPersonalizedSonglist: GetPersonalizedSonglistFn = async ({ limit }) => {
   const response = await axios({
-    method: 'get',
     url: '/personalized',
     params: {
       limit
@@ -21,7 +20,6 @@ const getPersonalizedSonglist: GetPersonalizedSonglistFn = async ({ limit }) =>
 
 const getPersonalizedNewMusic: GetPersonalizedNewMusicFn = async () => {
   const response = await axios({
-    method: 'get',
     url: '/personalized/newsong'
   })
 
@@ -30,7 +28,6 @@ const getPersonalizedNewMusic: GetPersonalizedNewMusicFn = async () => {
 
 const getPersonalizedMV: GetPersonalizedMVFn = async () => {
   const response = await axios({
-    method: 'get',
     url: '/personalized/mv'
   })
 
@@ -39,7 +36,6 @@ const getPersonalizedMV: GetPersonalizedMVFn = async () => {
 
 const getBanner: GetBannerFn = async () => {
   const response = await axios({
-    method: 'get',
     url: '/banner',
     params: {
       type: 0

src/apis/search.ts

@@ -9,7 +9,6 @@ type SearchFn = (params: ISearchRequest) => Promise<any>
 
 const searchHot: SearchHotFn = async () => {
   const response = await axios({
-    method: 'get',
     url: '/search/hot'
   })
 
@@ -18,7 +17,6 @@ const searchHot: SearchHotFn = async () => {
 
 const searchSuggest: SearchSuggestFn = async ({ keywords }) => {
   const response = await axios({
-    method: 'get',
     url: '/search/suggest',
     params: {
       keywords
@@ -30,7 +28,6 @@ const searchSuggest: SearchSuggestFn = async ({ keywords }) => {
 
 const search: SearchFn = async ({ keywords, type = TARGET_TYPE.MUSIC, limit = PAGE_SIZE, offset = 0 }) => {
   const response = await axios({
-    method: 'get',
     url: '/search',
     params: {
       keywords,

src/apis/song.ts

@@ -38,7 +38,6 @@ type GetgetLyricFn = (id: number) => Promise<{ lyric: string, offset: number, ve
 
 const getSongDetail: GetSongDetailFn = async (ids) => {
   const response = await axios({
-    method: 'get',
     url: '/song/detail',
     params: {
       ids: ids.join(',')
@@ -50,7 +49,6 @@ const getSongDetail: GetSongDetailFn = async (ids) => {
 
 const getTopSongs: GetTopSongsFn = async (type = SONG_TYPE.ALL) => {
   const response = await axios({
-    method: 'get',
     url: '/top/song',
     params: {
       type
@@ -62,7 +60,6 @@ const getTopSongs: GetTopSongsFn = async (type = SONG_TYPE.ALL) => {
 
 const getRecommendSongs: GetRecommendSongsFn = async () => {
   const response = await axios({
-    method: 'get',
     url: '/recommend/songs'
   })
 
@@ -71,7 +68,6 @@ const getRecommendSongs: GetRecommendSongsFn = async () => {
 
 const getSimiSonglist: GetSimiSonglistFn = async ({ id, offset, limit }) => {
   const response = await axios({
-    method: 'get',
     url: '/simi/playlist',
     params: {
       id,
@@ -85,7 +81,6 @@ const getSimiSonglist: GetSimiSonglistFn = async ({ id, offset, limit }) => {
 
 const getSimiSong: GetgetSimiSongFn = async ({ id, offset, limit }) => {
   const response = await axios({
-    method: 'get',
     url: '/simi/song',
     params: {
       id,
@@ -99,7 +94,6 @@ const getSimiSong: GetgetSimiSongFn = async ({ id, offset, limit }) => {
 
 const getComments: GetCommentsFn = async ({ id, offset, limit }) => {
   const response = await axios({
-    method: 'get',
     url: '/comment/music',
     params: {
       id,
@@ -113,7 +107,6 @@ const getComments: GetCommentsFn = async ({ id, offset, limit }) => {
 
 const getLyric: GetgetLyricFn = async (id) => {
   const response = await axios({
-    method: 'get',
     url: '/lyric',
     params: {
       id

src/apis/songlist.ts

@@ -13,7 +13,6 @@ type GetUserSonglistFn = (uid: number) => Promise<{ create: ISonglist[], collect
 
 const getSonglistDetail: GetSonglistDetailFn = async (id) => {
   const response = await axios({
-    method: 'get',
     url: '/playlist/detail',
     params: {
       id
@@ -34,7 +33,6 @@ const getSonglistDetail: GetSonglistDetailFn = async (id) => {
 
 const getSonglists: GetSonglistsFn = async ({ cat, order, limit = PAGE_SIZE, offset }) => {
   const response = await axios({
-    method: 'get',
     url: '/top/playlist',
     params: {
       cat,
@@ -49,7 +47,6 @@ const getSonglists: GetSonglistsFn = async ({ cat, order, limit = PAGE_SIZE, off
 
 const getSonglistCats: GetSonglistCatsFn = async () => {
   const response = await axios({
-    method: 'get',
     url: '/playlist/catlist'
   })
 
@@ -58,7 +55,6 @@ const getSonglistCats: GetSonglistCatsFn = async () => {
 
 const getSonglistHotCats: GetSonglistHotCatsFn = async () => {
   const response = await axios({
-    method: 'get',
     url: '/playlist/hot'
   })
 
@@ -67,7 +63,6 @@ const getSonglistHotCats: GetSonglistHotCatsFn = async () => {
 
 const getHighQualitySonglist: GetHighQualitySonglistFn = async (cat = '全部') => {
   const response = await axios({
-    method: 'get',
     url: '/top/playlist/highquality',
     params: {
       limit: 1,
@@ -80,7 +75,6 @@ const getHighQualitySonglist: GetHighQualitySonglistFn = async (cat = '全部')
 
 const getUserSonglist: GetUserSonglistFn = async (uid) => {
   const response = await axios({
-    method: 'get',
     url: '/user/playlist',
     params: {
       uid,

src/components/Layout/Header/style.module.css

@@ -5,7 +5,7 @@
   width: 100%;
   min-width: bodyMinWidth;
   height: headerHeight;
-  background-color: #f8f8f8;
+  background-color: rgba(248, 248, 248, 0.95);
   position: fixed;
   top: 0;
   display: flex;

src/components/Layout/Sidebar/LoginDialog/index.tsx

@@ -57,7 +57,7 @@ const LoginDialog: React.FC<IDialogProps> = ({ isOpen, onClose = noop }) => {
             setPassword(event.target.value)
           }}
         />
-        {error && <span className='error'>{error.message}</span>}
+        {error && <div className='error'>{error.message}</div>}
 
         <div className={styles.loginBtn}>
           <Button onClick={handleLogin} loading={loading}>登录</Button>

src/components/Layout/Sidebar/MusicDetail/index.tsx

@@ -70,12 +70,14 @@ const MusicDetail = () => {
             <Spinner size={Spinner.SIZE_SMALL} />
           ) : (
             <>
-              <div className={styles.block}>
-                <div className={styles.title}>包含这首歌的歌单</div>
-                <div>
-                  <Songlists data={songlistState.value || []} />
+              {!!songlistState.value?.length && (
+                <div className={styles.block}>
+                  <div className={styles.title}>包含这首歌的歌单</div>
+                  <div>
+                    <Songlists data={songlistState.value || []} />
+                  </div>
                 </div>
-              </div>
+              )}
               <div className={styles.block}>
                 <div className={styles.title}>相似歌曲</div>
                 <div>

src/helpers/axios.ts

@@ -1,28 +1,50 @@
-import axios, { AxiosRequestConfig } from 'axios'
+import axios, { AxiosRequestConfig, ResponseType, AxiosInstance } from 'axios'
+import Toaster from 'helpers/toaster'
 import { SERVER } from 'constants/server'
 
-const myAxios = ({
-  url,
-  method = 'get',
-  params,
-  data,
-  ...others
-}: AxiosRequestConfig) => {
-  return axios({
+const TIMEOUT = 40000
+const MIME_TYPE: IDictionary<ResponseType> = {
+  JSON: 'json'
+}
+
+const createInstance = () => {
+  const instance = axios.create({
     baseURL: SERVER,
-    url,
-    method,
-    params,
-    data,
     withCredentials: true,
-    ...others
-  }).then(result => {
-    // console.log('axios origin result => ', result)
-    return result.data
-  }).catch(error => {
-    // console.log('axios origin error => ', error)
-    throw error
+    timeout: TIMEOUT,
+    responseType: MIME_TYPE.JSON
+  })
+
+  instance.interceptors.response.use(handleResponse, handleError)
+
+  return instance
+}
+
+const handleResponse = (response: any) => {
+  return response.data
+}
+
+const handleError = (error: any) => {
+  const { response, message } = error
+  return Promise.reject(response ? new Error(response.data.message || message) : error)
+}
+
+const toastError = (error: any) => {
+  const { response, message } = error
+
+  Toaster.show({
+    message: response?.data?.message || message
   })
+
+  return Promise.reject(error)
+}
+
+interface Instance extends AxiosInstance {
+  (config: AxiosRequestConfig): Promise<any>
 }
+export const requestWithoutErrorToast: Instance = createInstance()
+
+const request: Instance = createInstance()
+request.interceptors.response.use(undefined, toastError)
 
-export default myAxios
+export default request

src/helpers/toaster.ts

@@ -0,0 +1,8 @@
+import { Toaster, Position } from '@blueprintjs/core'
+
+const AppToaster = Toaster.create({
+  className: 'mo-toaster',
+  position: Position.TOP_RIGHT
+})
+
+export default AppToaster

src/styles/global.module.css

@@ -27,6 +27,7 @@ img {
 
 /* 设置全局样式 */
 :global(.error) {
+  margin-top: 10px;
   color: red !important;
 }
 
@@ -75,3 +76,8 @@ img {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+:global(.mo-toaster .bp3-toast) {
+  color: #fff;
+  background-color: red;
+}