類似于我的最后一個問題，但足夠不同，我不知所措。我在 AngularJs 中有以下函式，我需要在 VueJs 中重新創建。我有兩種類似的方法嘗試在 VueJs 中撰寫它，但是它們在兩種方式下都會導致大量站點例外。
AngularJS
var foo = function(obj, config) {
if (config.skip) {
return $q.reject("Skipping");
}
var deferred = $q.defer();
obj.promise = deferred.promise;
if (obj.hasValue()) {
deferred.resolve(obj);
} else {
"/api/callToApi".$promise.then(function(res) {
if (res) {
deferred.resolve(res);
else {
deferred.reject(res);
}
});
}
return deferred.promise;
}
VueJs - 取 1。我很確定這個缺少實際的承諾鏈，不知道如何正確設定它。
var foo = function(obj, config) {
let returnEarly = false;
let promise = new Promise((resolve, reject) => {
returnEarly = true;
reject("Skipping"):
}
if (returnEarly) {
return promise;
}
obj.promise = promise;
return new Promise((resolve, reject) => {
if (obj.hasValue()) {
resolve(obj);
} else {
axios.get("/api/callToApi").then(function(res) {
if (res) {
resolve(res);
} else {
reject(res);
}
}
}
}
}
take 1 的控制臺錯誤
Uncaught (in promise) Error: Request failed with status code 404
at XMLHttpRequest.__capture__.onreadystatechange
VueJs - 取 2。我認為這種方式會回傳正確的鏈接，但Timeout - Async callback was not invoked within the 5000ms timeout在運行 jest 測驗時出現錯誤。
var foo = function(obj, config) {
let returnEarly = false;
let promise = new Promise((resolve, reject) => {
returnEarly = true;
reject("Skipping"):
}
if (returnEarly) {
return promise;
}
obj.promise = promise;
return promise.then(() => {
return new Promise((resolve, reject) => {
if (obj.hasValue()) {
resolve(obj);
} else {
axios.get("/api/callToApi").then(function(res) {
if (res) {
resolve(res);
} else {
reject(res);
}
}
}
}
}
}
uj5u.com熱心網友回復：
這是純 JavaScript，并非特定于 Vue。
通常沒有必要為其分配承諾，obj.promise因為它是從函式回傳的。
過度使用new Promise被稱為承諾建構式反模式。如果已經有一個承諾（Axios 回傳一個），則不需要創建一個新的承諾，這會導致冗余和容易出錯的代碼（這可能是Async callback was not invoked...出錯的原因）。如果需要創建新的 promise，有一些快捷Promise方法。
應該是這樣的：
function(obj, config) {
if (config.skip) {
return Promise.reject("Skipping");
}
if (obj.hasValue()) {
return Promise.resolve(obj);
} else {
return axios("/api/callToApi").then(function(res) {
if (res)
return res;
else
throw res;
}
});
}
}
一般來說，除了Error物件之外的任何錯誤都是一種不好的做法。
另請注意，Axios 回應物件始終為真，可能需要為res.data.
寫成async..await.
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/354520.html
標籤：javascript angularjs Vue.js 承诺 es6-promise