網站建設公司行業(yè)9 1短視頻安裝
一、異步的方法,如果不傳入 success、fail、complete 等 callback 參數,將以 Promise 返回數據異步的方法,且有返回對象,如果希望獲取返回對象,必須至少傳入一項 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)})
二、Vue 2 和 Vue 3 的 API Promise 化
PS:
- Vue2 對部分 API 進行了 Promise 封裝,返回數據的第一個參數是錯誤對象,第二個參數是返回數據。此時使用
catch
是拿不到報錯信息的,因為內部對錯誤進行了攔截。 - Vue3 對部分 API 進行了 Promise 封裝,調用成功會進入
then 方法
回調。調用失敗會進入catch 方法
回調
Vue2:
// 默認方式
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:
// 默認方式
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
// 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:
// 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);},
});