H5W3
当前位置:H5W3 > 其他技术问题 > 正文

记一个使用Fetch API 中有关promise和回调函数中this的问题

需求很简单,我要制作V组件(MVC中的V),V使用的HTML模板我想专业独立出来维护——单独成文件,所以渲染时动态从服务器 fetch 出来。

    HelloView.prototype.render = function(){
this.asynPromise = fetch('HelloView.txt');
this.asynPromise
.then(function(response) {
response.text().then(function(text) {console.log(text);})
.catch( error => console.error('error:', error) );
});
}
 

此基本代码没有调整拷贝即可用。最内里inline function可读出UI模板HTML数据;问题来了,

第一,inline function不能访问V类的成员

有了数据,我可以这样渲染UI了:

document.querySelector("#main").innerHTML = text;
 

这种方式最大问题是过于依赖父V的HTML结构,不利于维护;所以最好是V类有一个属性提供抽象间接性,例如this.el;

this.el.innerHTML= text;
 

但是这个回调 inline function的this不指向V类。想一想,代码看起来是 同步 且像是 本地 的,事实上,回调函数不可能是同步的(每一个promise都需要系统异步事件触发执行),解释器每读出一个inline funtion都应该(有待确证)在为其在自由堆开避新的空间,所以理论上说每个function都有自己的this。这就是为什么 inline function的this不指向V类的原因。

第二,inline function的this指向哪里?

inline function 是一种轻便的一次的计算任务,通常对外界依赖较小;所以它经常不需访问this。 inline function的父任务是随时可变……

第三,inline function可访问outline function的局部变量

上面的问题最简单直接的解决访问,通用本地变量传递V对象的this

	HelloView.prototype.render = function(){
that = this;
asynPromise = fetch(that.templatefile);
asynPromise
.then(function(response) {
response.text().then(function(text) {that.el.innerHTML= text;})
.catch( error => console.error('error:', error) );
});
}
 

第四,箭头函数自动修正inline function的this指向

当我将fetch拆分为几个私有方法(_fetchResponse _fetchText)后,发现箭头函数能自动修正inline function的this指向

HelloView.prototype.render1 = function(){
//self = this;
asynPromise = fetch(this.templatefile);
//asynPromise.then(function(response){self._fetchResponse(response)});
asynPromise.then(response => this._fetchResponse(response) );
}
HelloView.prototype._fetchResponse = function(response){
self = this;
response.text()
.then(function(text){self._fetchText(text)})
.catch( error => console.error('error:', error) );
}
HelloView.prototype._fetchText = function(text){
this.el.innerHTML= text;
}
 

了解 Fetch API
aotu.io/notes/2017/…

本文地址:H5W3 » 记一个使用Fetch API 中有关promise和回调函数中this的问题

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址