Promise抛出错误，因为它无法访问此
我有一段代码，它使用promises API检查来自我的serviceProvider组件的缓冲函数是否已经完成。可以使用getBufferingStatus()对serviceProvider进行轮询。
在使用ensureBufferingHasFinished().then(....).catch(err => console.log(err))时，它显示无法从this.serviceProvider访问该条件
我以前使用过promises，但这是我第一次在这种特殊情况下使用promises。如何将this.绑定到promise？非常感谢大家的帮助！
ensureBufferingHasFinished() {
return new Promise(function (resolve, reject) {
(function waitForBufferingComplete(){
if (!this.serviceProvider.getBufferingStatus()) {
alert("RESOLVED");
return resolve();
}
setTimeout(waitForBufferingComplete, 250);
})();
});
}回答 5
Stack Overflow用户
发布于 2018-08-07 00:58:58
对于不熟悉JavaScript如何赋值的细微差别的人来说，this关键字是一个令人头疼的问题。this的值对应于执行上下文，而不是作用域。在这种情况下，waitForBufferingComplete的执行上下文与调用ensureBufferingHasFinished的上下文不同。
关于如何确保访问所需内容，您有几个选择。
将变量分配给外部作用域
在函数相互嵌套的情况下，分配this或其属性的古老技巧是快速可靠的：
function ensureBufferingHasFinished() {
var that = this,
sp = this.serviceProvider;
return new Promise(function (resolve, reject) {
(function waitForBufferingComplete() {
//you can use "that.serviceProvider", or "sp"
if (!sp.getBufferingStatus()) {
alert("RESOLVED");
return resolve();
}
setTimeout(waitForBufferingComplete, 250);
})();
});
}使用function.bind()
在函数上调用bind会强制它将显式提供的执行上下文作为其参数，如果您没有或不能在包含所需值的范围内进行回调，则会更有用：
function ensureBufferingHasFinished() {
return new Promise(function (resolve, reject) {
(function waitForBufferingComplete() {
if (!this.serviceProvider.getBufferingStatus()) {
alert("RESOLVED");
return resolve();
}
setTimeout(waitForBufferingComplete.bind(this), 250);
}.bind(this))();
}.bind(this));
}或
function ensureBufferingHasFinished() {
return new Promise(_resolveBufferingPromise.bind(this));
}
function _resolveBufferingPromise(resolve, reject) {
(function waitForBufferingComplete() {
if (!this.serviceProvider.getBufferingStatus()) {
alert("RESOLVED");
return resolve();
}
setTimeout(waitForBufferingComplete.bind(this), 250);
}.bind(this))();
}您也可以将serviceProvider传递给您在waitForBufferingComplete周围创建的IIFE，尽管对于您的代码结构，只有当您支持兼容ES5的浏览器时才应该这样做，因为在此之前setTimeout不支持传递额外的参数：
function ensureBufferingHasFinished() {
return new Promise(function (resolve, reject) {
(function waitForBufferingComplete(serviceProvider) {
if (!serviceProvider.getBufferingStatus()) {
alert("RESOLVED");
return resolve();
}
setTimeout(waitForBufferingComplete, 250, serviceProvider);
})(this.serviceProvider);
}.bind(this));
}使用箭头函数(ES2015或更高版本)
如果您正在为支持ES2015平台进行开发，那么该版本引入了arrow functions，它忽略了执行上下文，并保留了this的父级的词法范围：
function ensureBufferingHasFinished() {
return new Promise((resolve, reject) => {
var waitForBufferingComplete = () => {
if (!this.serviceProvider.getBufferingStatus()) {
alert("RESOLVED");
return resolve();
}
setTimeout(waitForBufferingComplete, 250);
}
});
}Stack Overflow用户
发布于 2018-08-07 00:37:45
您可以做的是在ensureBufferingHasFinished的参数中传递serviceProvider实例。
ensureBufferingHasFinished(serviceProvider) {
return new Promise(function (resolve, reject) {
(function waitForBufferingComplete(){
if (!serviceProvider.getBufferingStatus()) {
alert("RESOLVED");
return resolve();
}
setTimeout(waitForBufferingComplete, 250);
})();
});
}Stack Overflow用户
发布于 2018-08-07 00:42:43
将this绑定到Promise函数，并将serviceProvider作为参数传递给Life.将serviceProvider作为第三个参数传递给setTimeout
ensureBufferingHasFinished() {
return new Promise(function (resolve, reject) {
(function waitForBufferingComplete(serviceProvider){
if (!serviceProvider.getBufferingStatus()) {
alert("RESOLVED");
return resolve();
}
setTimeout(waitForBufferingComplete, 250, serviceProvider);
})(this.serviceProvider);
}.bind(this));
}https://stackoverflow.com/questions/51712030
复制相似问题
腾讯云开发者
