uniapp API Promise 化

石榴熟了

具体 API Promise 化 的策略：

• 异步的方法，如果不传入 success、fail、complete 等 callback 参数，将以 Promise 返回数据。例如：uni.getImageInfo()
• 异步的方法，且有返回对象，如果希望获取返回对象，必须至少传入一项 success、fail、complete 等 callback 参数。例如：
  
  

     // 正常使用
       const task = uni.connectSocket(
           success(res){
               console.log(res)
           }
       )

       // Promise 化
       uni.connectSocket().then(res => {
               // 此处即为正常使用时 success 回调的 res
               // uni.connectSocket() 正常使用时是会返回 task 对象的，如果想获取 task ，则不要使用 Promise 化
               console.log(res)
       })

不进行 Promise 化 的 API：

• 同步的方法（即以 sync 结束）。例如：uni.getSystemInfoSync()
• 以 create 开头的方法。例如：uni.createMapContext()
• 以 manager 结束的方法。例如：uni.getBackgroundAudioManager()
  

Vue 2 和 Vue 3 的 API Promise 化

Vue 2 和 Vue 3 项目中 API Promise 化 返回格式不一致，以下为 不同点 和 返回格式互相转换

Vue 2

对部分 API 进行了 Promise 封装，返回数据的第一个参数是错误对象，第二个参数是返回数据。此时使用 catch 是拿不到报错信息的，因为内部对错误进行了拦截。

使用示例：
// 默认方式
uni.request({
    url: 'https://www.example.com/request',
    success: (res) => {
        console.log(res.data);
    },
    fail:(err) => {
        console.error(err)
    }
});

// Promise
uni.request({
        url: 'https://www.example.com/request'
    })
    .then(data => {
        // data为一个数组
        // 数组第一项为错误信息 即为 fail 回调
        // 第二项为返回数据
        var [err, res]  = data;
        console.log(res.data);
    })

// Await
async function request () {
    var [err, res] = await uni.request({
        url: 'https://www.example.com/request'
    });
    console.log(res.data);
}


Vue 3对部分 API 进行了 Promise 封装，调用成功会进入 then 方法 回调。调用失败会进入 catch 方法 回调
使用示例：

// 默认方式
uni.request({
    url: 'https://www.example.com/request',
    success: (res) => {
        console.log(res.data);
    },
    fail:(err) => {
        console.error(err)
    }
});

// 使用 Promise then/catch 方式调用
uni.request({
        url: 'https://www.example.com/request'
    })
    .then(res => {
        // 此处的 res 参数，与使用默认方式调用时 success 回调中的 res 参数一致
        console.log(res.data);
    })
    .catch(err => {
        // 此处的 err 参数，与使用默认方式调用时 fail 回调中的 err 参数一致
        console.error(err)
    })

// 使用 Await/Await 方式调用
async function request () {
    try{
        var res = await uni.request({
            url: 'https://www.example.com/request'
        });
        // 此处的 res 参数，与使用默认方式调用时 success 回调中的 res 参数一致
        console.log(res);
    } catch (err) {
        // 此处的 err 参数，与使用默认方式调用时 fail 回调中的 err 参数一致
        console.error(err)
    }
}



在 Vue 2 项目中， 使用 Vue 3 项目 API Promise 化 返回格式
// 在 main.js 中写入以下代码即可
function isPromise (obj) {
  return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function'
}

uni.addInterceptor({
  returnValue (res) {
    if (!isPromise(res)) {
      return res
    }
    return new Promise((resolve, reject) => {
      res.then(res => {
        if (res[0]) {
          reject(res[0])
        } else {
          resolve(res[1])
        }
      })
    })
  }
})
在 Vue 3 项目中， 使用 Vue 2 项目 API Promise 化 返回格式
// 在 main.js 中写入以下代码即可
function isPromise (obj) {
  return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function'
}

uni.addInterceptor({
    returnValue(res) {
        if (!isPromise(res)) {
            return res
        }
        const returnValue = [undefined, undefined]
        return res
            .then((res) => {
                returnValue[1] = res
            })
            .catch((err) => {
                returnValue[0] = err
            })
            .then(() => returnValue)
    }
})

灵猫作者

66666666666666666666666

田兵

666666666666666