uniapp封装公共请求typescript版（vue2）------面向对象思维改进版

第一步：新建文件夹service

第二步：新建文件request.ts

export class req {
    /* 服务器接口地址 */
    baseURL:string = 'https://xxxx' 
    /* 本地调试接口地址 */
    // baseURL:string='http://192.168.60.2:8086';    

    request(baseURL:string, method: "GET" | "POST",data: object | any):object{
          return new Promise(function(resolve, reject){
                  let header
                  if(uni.getStorageSync('token')){
                    header = {
                      'content-type': 'application/json',
                      'Authorization': uni.getStorageSync('token') //自定义请求头
                    };
                  }else {
                    header = {
                      'content-type': 'application/json',
                    };
                  }
                  uni.request({
                        url: baseURL,
                        method: method,
                        data: data,
                        header: header,
                        success(res:any) {

                          if (res.data.ok) {
                            resolve(res.data.payload);
            
                          } else if(res.data.code===401) { //后台没有权限的状态码
                              uni.reLaunch({
                                  url: '../login/login'
                              })
                          }else{
                              //其他异常
                              uni.showToast({
                                  title:res.data.msg,
                                  icon:'none'
                              })
                                 reject(res.data);
                          }
                        },
                        fail(err) {
                          //请求失败
                          reject(err)
                          uni.showToast({
                              title:'无法连接到服务器',
                              icon:'none'
                          })
                        }
                        
                      })
                      
          })
     }
}

第三步：新建文件夹api

第四步：新建文件login.ts

 import { req } from '../service/request'
 //定义user接口
 interface Iuser {
     avatar:string,
     corp_id: string,
     password: string,
     phone: string
 } 
//定义user类
class User extends req{
    login(data:Iuser){
        return this.request(this.baseURL + '/user/login', 'POST', data)
    }
 } 
export const user = new User()

第五步：在需要的页面文件中引入，例如index.vue

<script lang="ts">
    import {user} from '../../../api/login'
    export default Vue.extend({
        data() {
            return {
                data: {
   
                }
            }
        },
        methods: {
            async userLogin() { //登录
                try {
                    const LoginRes = await user.login({
                        avatar: "",
                        corp_id: "",
                        password: '00', 
                        phone: '1234567889'
                    })
                } catch (err) {
                    //部分特殊要求需要处理异常，没有特殊要求直接去掉try{}catch{}
                    console.log(err)
                }
            },
        }
    });
</script>

在success的回调里使用 例如 uni.showModal等 把回调改成async函数：success:async (res)=>{ ...... }

<script lang="ts">
    import {user} from '../../../api/login'
    export default Vue.extend({
        data() {
            return {
                data: {
   
                }
            }
        },
        methods: {
            userLogin() { //登录
                  wx.showModal({
                        title: '提示',
                        content: '确定删除吗',
                        success:async (res)=> {
                             if (res.confirm) { //用户点击确定
                              try {
                                const LoginRes = await user.login({
                                         avatar: "",
                                         corp_id: "",
                                         password: '00', 
                                         phone: '1234567889'
                                      })
                               } catch (err) {
                                 //部分特殊要求需要处理异常，没有特殊要求直接去掉try{}catch{}
                                console.log(err)
                                }
                               } else if (res.cancel) {
                                console.log('用户点击取消')
                             }
                         }
                    })
                
            },
        }
    });
</script>