uniapp(API-Promise 化)

一、异步的方法,如果不传入 success、fail、complete 等 callback 参数,将以 Promise 返回数据异步的方法,且有返回对象,如果希望获取返回对象,必须至少传入一项 success、fail、complete 等 callback 参数,列如:

javascript 复制代码
 // 正常使用
 const task = uni.connectSocket({
  success(res){
   console.log(res)
  }
 })

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

二、Vue 2 和 Vue 3 的 API Promise 化

PS:

  • Vue2 对部分 API 进行了 Promise 封装,返回数据的第一个参数是错误对象,第二个参数是返回数据。此时使用 catch 是拿不到报错信息的,因为内部对错误进行了拦截。
  • Vue3 对部分 API 进行了 Promise 封装,调用成功会进入 then 方法 回调。调用失败会进入 catch 方法 回调

Vue2:

javascript 复制代码
// 默认方式
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);
}

Vue3:

javascript 复制代码
// 默认方式
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);
  });

// 使用 Async/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);
  }
}

返回格式互相转换

Vue2

javascript 复制代码
// Vue 2 转 Vue 3, 在 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) {
          resolve(res);
          return;
        }
        if (res[0]) {
          reject(res[0]);
        } else {
          resolve(res[1]);
        }
      });
    });
  },
});

Vue3:

javascript 复制代码
// Vue 3 转 Vue 2, 在 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);
  },
});
相关推荐
编码小袁4 分钟前
探索JavaScript的强大功能:从基础到高级应用
开发语言·javascript·ecmascript
我不当帕鲁谁当帕鲁7 分钟前
arcgis for js实现FeatureLayer图层弹窗展示所有field字段方式二
前端·javascript·arcgis
a482242512 分钟前
前端交互展示:裂缝与凹痕分割
前端·交互
此星光明33 分钟前
GEE 数据集——美国gNATSGO(网格化国家土壤调查地理数据库)完整覆盖了美国所有地区和岛屿领土的最佳可用土壤信息
javascript·数据库·数据集·美国·数据·gee·土壤
每天进步一大步39 分钟前
基于表格滚动截屏(表格全部展开,没有滚动条)
开发语言·前端·javascript
Dreams°12340 分钟前
【ECMAScript标准规范】
前端·vscode·前端框架·ecmascript
咔咔库奇1 小时前
react动态路由
前端·react.js·前端框架
执键行天涯1 小时前
【Vue】Vue3.0(二十)Vue 3.0 中mitt的使用示例
前端·javascript·vue.js
猛男敲代码2 小时前
SSE与WebSocket与MQTT
前端·javascript·websocket
yqcoder2 小时前
react 中 FC 模块作用
前端·react.js·前端框架