Web Components 是一种组件化开发模式，能够更好地进行模块化开发，提高代码复用率，同时也能够更好地维护和管理代码。不过对于很多 Web Components 开发者来说，经常会遇到处理异步数据渲染的问题。本文将会介绍一些优雅的处理异步数据渲染的方法，帮助大家更好地处理这一类问题。
问题描述
在 Web Components 开发过程中，经常需要进行异步数据请求和渲染。但是异步请求需要时间，此时如果直接进行渲染，那么很可能数据还没有返回，导致出现空白或错误信息。那么如何才能在异步数据返回后再进行渲染呢？
我们可以先看一下一个简单的示例。假如我们有一个自定义组件 my-list，这个组件需要根据传入的数据渲染一个列表。同时我们还有一个异步请求数据的方法 fetchData(url)，它会返回一个 Promise 对象。
<template id="my-list-template">
<h1>My List Component</h1>
<ul></ul>
</template>
<script>
class MyList extends HTMLElement{
static get observedAttributes(){
return ['data-url'];
}
constructor(){
super();
this._root = this.attachShadow({mode: 'open'});
this._root.appendChild(document.importNode(
document.querySelector('#my-list-template').content,true
));
this._ul = this._root.querySelector('ul');
this._data = [];
}
connectedCallback(){
this.render();
}
async fetchData(url){
const response = await fetch(url);
const data = await response.json();
this._data = data;
this.render();
}
attributeChangedCallback(attrName, oldValue, newValue){
if(attrName === 'data-url' && oldValue !== newValue){
this.fetchData(newValue);
}
}
render(){
this._ul.innerHTML = '';
this._data.forEach(item=>{
const li = document.createElement('li');
li.textContent = item.name;
this._ul.appendChild(li);
});
}
}
customElements.define('my-list', MyList);
</script>在上面的代码中，我们通过 fetchData 方法请求异步数据。我们需要在数据请求完成后再进行渲染操作。如果我们简单地在 fetchData 中调用 render 方法，那么很可能发生渲染数据为空的错误。
解决方案
使用 Promise
在 Web Components 中，我们可以使用 Promise 来处理异步数据请求和渲染的问题。
在下面的代码中，我们修改了 fetchData 方法，使之返回一个 Promise 对象。在 Promise 对象中，我们通过 resolve 传递请求数据，而不是直接调用 render 方法。
<template id="my-list-template">
<h1>My List Component</h1>
<ul></ul>
</template>
<script>
class MyList extends HTMLElement{
static get observedAttributes(){
return ['data-url'];
}
constructor(){
super();
this._root = this.attachShadow({mode: 'open'});
this._root.appendChild(document.importNode(
document.querySelector('#my-list-template').content,true
));
this._ul = this._root.querySelector('ul');
this._data = [];
}
connectedCallback(){
this.render();
}
fetchData(url){
return new Promise((resolve,reject)=>{
fetch(url).then(response=>{
return response.json();
}).then(data=>{
this._data = data;
resolve(data);
}).catch(error=>{
reject(error);
});
});
}
attributeChangedCallback(attrName, oldValue, newValue){
if(attrName === 'data-url' && oldValue !== newValue){
this.fetchData(newValue).then(()=>{
this.render();
});
}
}
render(){
this._ul.innerHTML = '';
this._data.forEach(item=>{
const li = document.createElement('li');
li.textContent = item.name;
this._ul.appendChild(li);
});
}
}
customElements.define('my-list', MyList);
</script>在上面的代码中，我们使用了 Promise 来处理异步数据请求，将渲染操作放在了 fetchData 方法返回的 Promise 对象的 then 中。在 attributeChangedCallback 中，我们使用了 then 来处理数据的返回。
使用 async/await
另外，我们还可以使用 async/await 来处理异步请求和渲染问题。修改后的代码如下：
<template id="my-list-template">
<h1>My List Component</h1>
<ul></ul>
</template>
<script>
class MyList extends HTMLElement{
static get observedAttributes(){
return ['data-url'];
}
constructor(){
super();
this._root = this.attachShadow({mode: 'open'});
this._root.appendChild(document.importNode(
document.querySelector('#my-list-template').content,true
));
this._ul = this._root.querySelector('ul');
this._data = [];
}
connectedCallback(){
this.render();
}
async fetchData(url){
const response = await fetch(url);
const data = await response.json();
this._data = data;
return data;
}
async attributeChangedCallback(attrName, oldValue, newValue){
if(attrName === 'data-url' && oldValue !== newValue){
await this.fetchData(newValue);
this.render();
}
}
render(){
this._ul.innerHTML = '';
this._data.forEach(item=>{
const li = document.createElement('li');
li.textContent = item.name;
this._ul.appendChild(li);
});
}
}
customElements.define('my-list', MyList);
</script>在上述代码中，我们使用了 async/await 来处理异步请求和渲染问题。我们将 fetchData 方法定义为一个异步函数，使用 await 和 Promise 对象来获取请求数据。在 attributeChangedCallback 中，我们使用了 async 和 await 来处理数据的返回。
总结
在 Web Components 中，处理异步数据渲染的问题是比较常见的。本文中，我们介绍了两种优雅的处理异步数据渲染的方法：使用 Promise 和 async/await。通过这两种方法，我们可以更好地处理异步数据请求和渲染，避免了空白和错误信息的产生，提高了组件的性能和稳定性。
参考链接
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6594b28deb4cecbf2d8fd070