我遇到了一个问题,我并不完全理解。我觉得可能有一些概念我没有掌握,代码可能需要优化,还可能有一些 bug 造成了影响。
为了大大简化整个流程:
- 发出对外部 API 的请求
- 解析返回的 JSON 对象并扫描其中的链接引用
- 如果找到任何链接引用,则进行额外的请求以填充/替换链接引用为实际的 JSON 数据
- 一旦所有链接引用都被替换,原始请求将返回并用于构建内容
这里是原始请求 (#1):
await Store.get(Constants.Contentful.ENTRY, Contentful[page.file])
Store.get 的表示方式为:
async get(type, id) {
return await this._get(type, id);
}
哪些调用:
_get(type, id) {
return new Promise(async (resolve, reject) => {
var data = _json[id] = _json[id] || await this._api(type, id);
console.log(data)
if(isAsset(data)) {
resolve(data);
} else if(isEntry(data)) {
await this._scan(data);
resolve(data);
} else {
const error = 'Response is not entry/asset.';
console.log(error);
reject(error);
}
});
}
API调用为:
_api(type, id) {
return new Promise((resolve, reject) => {
Request('http://cdn.contentful.com/spaces/' + Constants.Contentful.SPACE + '/' + (!type || type === Constants.Contentful.ENTRY ? 'entries' : 'assets') + '/' + id + '?access_token=' + Constants.Contentful.PRODUCTION_TOKEN, (error, response, data) => {
if(error) {
console.log(error);
reject(error);
} else {
data = JSON.parse(data);
if(data.sys.type === Constants.Contentful.ERROR) {
console.log(data);
reject(data);
} else {
resolve(data);
}
}
});
});
}
当返回一个条目时,它会被扫描:
_scan(data) {
return new Promise((resolve, reject) => {
if(data && data.fields) {
const keys = Object.keys(data.fields);
keys.forEach(async (key, i) => {
var val = data.fields[key];
if(isLink(val)) {
var child = await this._get(val.sys.linkType.toUpperCase(), val.sys.id);
this._inject(data.fields, key, undefined, child);
} else if(isLinkArray(val)) {
var children = await* val.map(async (link) => await this._get(link.sys.linkType.toUpperCase(), link.sys.id));
children.forEach((child, index) => {
this._inject(data.fields, key, index, child);
});
} else {
await new Promise((resolve) => setTimeout(resolve, 0));
}
if(i === keys.length - 1) {
resolve();
}
});
} else {
const error = 'Required data is unavailable.';
console.log(error);
reject(error);
}
});
}
如果发现链接引用,会发出额外的请求,然后将生成的JSON插入到原始JSON中以替换引用的位置。_inject(fields, key, index, data) {
if(isNaN(index)) {
fields[key] = data;
} else {
fields[key][index] = data;
}
}
注意,我正在使用async
、await
和Promise
,相信它们的预期用法。实际发生的情况:所引用数据的调用(获取_scan的结果)最终发生在原始请求返回之后。这最终会向内容模板提供不完整的数据。
关于我的构建设置的其他信息:
- npm@2.14.2
- node@4.0.0
- webpack@1.12.2
- babel@5.8.34
- babel-loader@5.4.0
return new Promise(async (resolve, reject) => { ... }
?难道不应该是async _get(type, id) { ... }
而且没有 Promise 吗? - Shanoor