feat: 使用 weui 的 toptips，给予更好的错误提示 (#7)

miniprogram/api/shorturl.ts

@@ -1,16 +1,16 @@
 import http from '@utils/http'
 import { URL } from '@constant/shortlink'
 import { CODE } from '@constant/error'
-import { HttpApiError } from '@models/error'
+import { HttpError } from '@models/error'
 import logger from '@utils/logger'
 
 const create = async (link: string) => {
   try {
     return await http.post<IShortlinkCreateResponse>(URL.CREATE, {link} as IShortlinkCreateRequest)
   } catch (e) {
-    logger.error('创建短链接失败', e.code, e.message)
-    
-    return Promise.reject(new HttpApiError(CODE.HTTP_API_SHORTLINK_CREATE))
+    logger.error('创建短链接失败', e)
+
+    throw new HttpError(CODE.HTTP_API_SHORTLINK_CREATE, e.message);
   }
 }
 

miniprogram/api/totp.ts

@@ -1,56 +1,56 @@
 import http from '@utils/http'
 import { URL } from '@constant/totp'
 import { CODE } from '@constant/error'
-import { HttpApiError } from '@models/error'
+import { HttpError } from '@models/error'
 import logger from '@utils/logger'
 
 const all = async () => {
   try {
     return await http.post<ITotpItemResponse[]>(URL.ALL)
   } catch (e) {
-    logger.error('查询 TOTP 列表失败', e.code, e.message)
+    logger.error('查询 TOTP 列表失败', e)
 
-    return Promise.reject(new HttpApiError(CODE.HTTP_API_TOTP_ALL))
+    throw new HttpError(CODE.HTTP_API_TOTP_ALL, e.message)
   }
 }
 
 const detail = async (id: number) => {
   try {
     return await http.post<ITotpItemResponse>(URL.DETAIL, {id} as ITotpDetailRequest)
   } catch (e) {
-    logger.error('查询 TOTP 详情失败', e.code, e.message)
+    logger.error('查询 TOTP 详情失败', e)
 
-    return Promise.reject(new HttpApiError(CODE.HTTP_API_TOTP_DETAIL))
+    throw new HttpError(CODE.HTTP_API_TOTP_DETAIL, e.message)
   }
 }
 
 const create = async (uri: string) => {
   try {
     return await http.post<ITotpResponse>(URL.CREATE, {uri} as ITotpCreateRequest)
   } catch (e) {
-    logger.error('创建 TOTP 失败', e.code, e.message)
+    logger.error('创建 TOTP 失败', e)
 
-    return Promise.reject(new HttpApiError(CODE.HTTP_API_TOTP_CREATE))
+    throw new HttpError(CODE.HTTP_API_TOTP_CREATE, e.message)
   }
 }
 
 const update = async (data: ITotpUpdateRequest) => {
   try {
     return await http.post<ITotpResponse>(URL.UPDATE, data)
   } catch (e) {
-    logger.error('更新 TOTP 信息失败', e.code, e.message)
+    logger.error('更新 TOTP 信息失败', e)
 
-    return Promise.reject(new HttpApiError(CODE.HTTP_API_TOTP_UPDATE))
+    throw new HttpError(CODE.HTTP_API_TOTP_UPDATE, e.message)
   }
 }
 
 const deleteTotp = async (id: number) => {
   try {
     return await http.post<ITotpResponse>(URL.DELETE, {id} as ITotpDeleteRequest)
   } catch (e) {
-    logger.error('删除 TOTP 失败', e.code, e.message)
+    logger.error('删除 TOTP 失败', e)
 
-    return Promise.reject(new HttpApiError(CODE.HTTP_API_TOTP_ALL))
+    throw new HttpError(CODE.HTTP_API_TOTP_ALL, e.message)
   }
 }
 

miniprogram/api/user.ts

@@ -2,35 +2,35 @@ import http from '@utils/http'
 import { URL } from '@constant/user'
 import { CODE } from '@constant/error'
 import logger from '@utils/logger'
-import { HttpApiError } from '@models/error'
+import { HttpError } from '@models/error'
 
 const login = async (code: string) => {
   try {
     return await http.post<IUserLoginResponse>(URL.LOGIN, {code} as IUserLoginRequest, false, false)
   } catch (e) {
-    logger.error('登录接口请求失败', e.code, e.message)
+    logger.error('登录接口请求失败', e)
 
-    return Promise.reject(new HttpApiError(CODE.HTTP_API_USER_LOGIN))
+    throw new HttpError(CODE.HTTP_API_USER_LOGIN, e.message)
   }
 }
 
 const detail = async () => {
   try {
     return await http.post<IUserDetailResponse>(URL.DETAIL)
   } catch (e) {
-    logger.error('查询用户详情失败', e.code, e.message)
+    logger.error('查询用户详情失败', e)
 
-    return Promise.reject(new HttpApiError(CODE.HTTP_API_USER_DETAIL))
+    throw new HttpError(CODE.HTTP_API_USER_DETAIL, e.message)
   }
 }
 
 const update = async (updated: IUserUpdateRequest) => {
   try {
     return await http.post<IUserUpdateResponse>(URL.UPDATE, updated)
   } catch (e) {
-    logger.error('更新用户信息失败', e.code, e.message)
+    logger.error('更新用户信息失败', e)
 
-    return Promise.reject(new HttpApiError(CODE.HTTP_API_USER_UPDATE))
+    throw new HttpError(CODE.HTTP_API_USER_UPDATE, e.message)
   }
 }
 

miniprogram/constant/app.ts

@@ -4,7 +4,7 @@ const STORAGE = {
 }
 
 const URL = {
-  BASE: 'https://miniprogram.ysdor.cn',
+  BASE: 'https://miniprogram.yanda.net.cn',
 }
 
 export { STORAGE, URL }

miniprogram/constant/error.ts

@@ -9,8 +9,6 @@ const CODE = {
   LOGIN: 1000,
   // http 调用错误
   HTTP: 2000,
-  // http 业务错误
-  HTTP_API: 2001,
   // http 内部参数错误
   HTTP_PARAMS: 2002,
   // http 业务错误 - 用户接口
@@ -36,7 +34,6 @@ const MESSAGE = {
   [CODE.LOGIN]: '登录失败',
   [CODE.HTTP]: '网络请求失败',
   [CODE.HTTP_PARAMS]: '内部参数错误',
-  [CODE.HTTP_API]: '业务处理失败',
   [CODE.HTTP_API_USER_LOGIN]: '业务登录失败',
   [CODE.HTTP_API_USER_DETAIL]: '查询详情失败',
   [CODE.HTTP_API_USER_UPDATE]: '更新失败',
@@ -48,4 +45,9 @@ const MESSAGE = {
   [CODE.HTTP_API_SHORTLINK_CREATE]: '生成失败',
 }
 
-export { CODE, MESSAGE }
+const WECHAT_MESSAGE = {
+  3: '系统权限未授予微信',
+  5: '请求超时',
+}
+
+export { CODE, MESSAGE, WECHAT_MESSAGE }

miniprogram/interface/error.ts

@@ -4,18 +4,12 @@ interface IERROR {
 }
 
 interface ILoginError extends IERROR {
-  describe?: string,
 }
 
 interface IHttpError extends IERROR {
-  describe?: string,
   url?: string,
   headers?: IRequestHeaders,
-  timeout?: number,
-}
-
-interface IHttpApiError extends IERROR {
   query?: IRequestQuery,
   data?: IRequestData,
-  headers?: IRequestHeaders,
+  timeout?: number,
 }

miniprogram/models/error.ts

@@ -5,45 +5,34 @@ class EError extends Error implements IERROR {
 
   constructor(code?: number, message?: string) {
     super()
-
+    
     this.code = code || CODE.UNKNOWN
-    this.message = message || MESSAGE[this.code]
+    this.message = message || MESSAGE[this.code] || MESSAGE[CODE.UNKNOWN]
   }
 }
 
-class WeixinError extends EError {}
+class WeixinError extends EError {
+  constructor(code?: number, message?: string) {
+    super(code || CODE.WEIXIN, message)
+  }
+}
 
 class LoginError extends EError implements ILoginError {
-  describe?: string;
-
-  constructor(describe?: string, code?: number, message?: string) {
+  constructor(code?: number, message?: string) {
     super(code || CODE.LOGIN, message)
-
-    this.describe = describe
   }
 }
 
 class HttpError extends EError implements IHttpError {
-  describe?: string;
   url?: string;
   headers?: IRequestHeaders;
-  timeout?: number;
-
-  constructor(describe?: string, code?: number, message?: string) {
-    super(code || CODE.HTTP, message)
-
-    this.describe = describe
-  }
-}
-
-class HttpApiError extends EError implements IHttpApiError {
   query?: IRequestQuery;
   data?: IRequestData;
-  headers?: IRequestHeaders;
+  timeout?: number;
 
   constructor(code?: number, message?: string) {
-    super(code || CODE.HTTP_API, message)
+    super(code || CODE.HTTP, message)
   }
 }
 
-export { EError, WeixinError, LoginError, HttpError, HttpApiError }
+export { EError, WeixinError, LoginError, HttpError }

miniprogram/pages/shorturl/index.json

@@ -1,4 +1,6 @@
 {
-  "usingComponents": {},
+  "usingComponents": {
+    "mp-toptips": "weui-miniprogram/toptips/toptips"
+  },
   "navigationBarTitleText": "短链生成"
 }

miniprogram/pages/shorturl/index.ts

@@ -2,27 +2,22 @@ import api from '@api/shorturl'
 
 Page({
   data: {
+    toptipError: '',
     link: '',
     shortlink: ''
   },
   async submit(e: any) {
-    await wx.showToast({title: '生成中', icon: 'loading', mask: true, duration: 3000})
+    await wx.showLoading({title: '生成中', mask: true})
 
     const { link } = e.detail.value
 
-    const { shortlink } = await api.create(link)
-
-    if ((shortlink ?? '') == '') {
-      await wx.showToast({title: '生成失败', icon: 'error'})
-      return;
-    }
-
-    this.setData({
-      link,
-      shortlink,
+    api.create(link).then(({shortlink}) => {
+      this.setData({link, shortlink})
+    }).catch((e) => {
+      this.setData({toptipError: e.message});
+    }).finally(async () => {
+      await wx.hideLoading();
     })
-
-    await wx.hideToast()
   },
   async copy() {
     if (this.data.shortlink == '') {

miniprogram/pages/shorturl/index.wxml

@@ -1,3 +1,5 @@
+<mp-toptips msg="{{toptipError}}" type="error" show="{{toptipError}}"></mp-toptips>
+
 <form bindsubmit="submit">
   <view class="weui-form">
     <view class="weui-form__bd">

miniprogram/pages/totp/edit.json

@@ -1,5 +1,7 @@
 {
   "usingComponents": {
+    "mp-dialog": "weui-miniprogram/dialog/dialog",
+    "mp-toptips": "weui-miniprogram/toptips/toptips"
   },
   "navigationBarTitleText": "备注身份验证器"
 }

miniprogram/pages/totp/edit.ts

@@ -2,6 +2,9 @@ import api from '@api/totp'
 
 Page({
   data: {
+    toptipError: '',
+    dialogShow: false,
+    dialogButtons: [{"text": "取消"}, {"text": "重试"}],
     id: 0,
     issuer: '',
     username: '',
@@ -10,30 +13,44 @@ Page({
     this.data.id = Number(query.id || 0)
   },
   async onShow() {
-    const {id, issuer, username} = await api.detail(this.data.id)
+    await wx.showLoading({title: '加载中'})
 
-    this.setData({
-      id,
-      issuer: issuer ?? '',
-      username: username ?? '',
-    })
+    api.detail(this.data.id).then(({id, issuer, username}) => {
+      this.setData({id, issuer: issuer ?? '', username: username ?? ''})
+    }).catch(() => {
+      this.setData({dialogShow: true})
+    }).finally(() => wx.hideLoading())
   },
   async submit(e: any) {
     await wx.showToast({title: '更新中', icon: 'loading', mask: true, duration: 3000})
 
-    await api.update({id: this.data.id, ...e.detail.value} as ITotpUpdateRequest)
-
-    wx.showToast({
-      title: '修改成功',
-      icon: 'success',
-      success: () => {
-        setTimeout(() => {
-          wx.navigateBack()          
-        }, 1500);
-      }
+    api.update({id: this.data.id, ...e.detail.value} as ITotpUpdateRequest)
+    .then(() => {
+      wx.showToast({
+        title: '修改成功',
+        icon: 'success',
+        mask: true,
+        success: () => {
+          setTimeout(() => wx.navigateBack(), 1500);
+        }
+      })
+    }).catch(() => {
+      this.setData({toptipError: e.message})
     })
   },
   async cancel() {
     await wx.navigateBack()
+  },
+  dialogTap(e: any) {
+    this.setData({dialogShow: false})
+
+    const {index} = e.detail
+
+    if (index === 1) {
+      this.onShow()
+    }
+  },
+  dialogClose() {
+    this.setData({dialogShow: false})
   }
 })

miniprogram/pages/totp/edit.wxml

@@ -1,3 +1,8 @@
+<mp-toptips msg="{{toptipError}}" type="error" show="{{toptipError}}"></mp-toptips>
+<mp-dialog title="查询最新信息失败" buttons="{{dialogButtons}}" show="{{dialogShow}}" bindbuttontap="dialogTap" bindclose="dialogClose">
+  <view>请问是否重试？</view>
+</mp-dialog>
+
 <form bindsubmit="submit">
   <view class="weui-form">
     <view class="weui-form__bd">