请求函数封装promise请求函数

借鉴aioxs

请求函数 -》返回promise对象

请求分为:成功  失败

 进行完一系列操作后在微信开发者平台测试的时候,如果有数据更新一定要重新编译刷新一下,代码:

/*
请求函数
@param  UniApp.Requestoptions
@returns Promise
1.返回Promise对象
2.请求成功
2.1提取核心数据 res.data
2.2添加类型,支持泛型
3.请求失败
3.1网络错误-》提示用户换网络
3.2401错误-》清理用户信息,跳转到登录页
3.3其他错误-》根据后端错误信息轻提示
*/
//2.2 添加类型,支持泛型
interface Data<T> {
  code: string
  msg: string
  result: T
}
export const http = <T>(options: UniApp.RequestOptions) => {
  //1.返回promise对象
  return new Promise<Data<T>>((resolve, reject) => {
    uni.request({
      ...options,
      //2.请求成功
      success(res) {
        //2.1提取核心数据 res.data
        if (res.statusCode >= 200 && res.statusCode < 300) {
          //获取数据成功,调用resolve
          resolve(res.data as Data<T>)
        } else if (res.statusCode == 401) {
          //401错误调用reject
          //清理用户信息,跳转到登录页
          const memberStroe = useMemberStore()
          memberStroe.clearProfile()
          uni.navigateTo({ url: 'pages/login/login' })
          reject(res)
        } else {
          //通用错误,调用reject
          //根据后端错误信息轻提示
          uni.showToast({
            icon: 'none',
            title: (res.data as Data<T>).msg || '请求错误',
          })
          reject(res)
        }
      },
      //响应失败
      fail(err) {
        //网路错误,调用reject
        uni.showToast({
          icon: 'none',
          title: '网络错误,换个网络试试',
        })
        reject(err)
      },
    })
  })
}

这段代码也写在http.ts里面,测试网络问题的时候模拟器里面的模拟操作->office就是没有网络的意思测试其他错误的时候就就把my.vue里面的url设置没有

 

 

posted @ 2024-01-22 14:37  艾鑫4646  阅读(27)  评论(0编辑  收藏  举报