通过Fetch API获取数据,我需要将响应分配给变量,该变量将在许多实例中使用,如全局值。
最合适的方法是创建一个对象并将fetch响应分配给其中一个属性。
var number = 0;
fetch(url, numberValue); // fetch data from API, returns a string like "5489721"
function numberValue(response) {// invoked by fetch, it's parameter is the fetch response.
this.number = response:
// console,log('number='+this.number): // 43090
}
console.log("number value outside function value="+ new numberValue().number): // prints undefined.
但是我发现在创建对象的函数内部,赋值的效果很好,但是如果我在构造函数之外调用对象,我会得到一个“未定义”的值。
但是,如果我分配一个固定值,我会得到正确的值,这使我认为问题出在json响应上,但它在构造函数中完美运行。
获取功能是:
function fetchGet(url, functionName) {
fetch(url, {
method: 'GET'
}).then(function(response) {
return response.json();
}).then(function(json) {
functionName(json); // here I invoke other function to process response.
}).catch(function(err) {
}
在页面加载时调用它,如下所示:
var url =""; // API endpoint, gives a plain "525554"
fetchGet(url, value);
function value (response) {
console.log('response='+response); //52554
}
然而,除了捕获普通值之外,我需要的是在命名空间中公开这个值,该值将用于其他函数。
答案 0 :(得分:0)
内容:data / example-fetch-1.json
{
"foo": "Hello",
"bar": "World"
}
内容:data / example-fetch-1.json
{
"foo": "Be",
"bar": "Yah"
}
类定义,用法:
'use strict';
class jsonData {
constructor(url) {
let thisObject = this;
thisObject.dataJson = null;
thisObject.dataUrl = url;
thisObject.fetchData = function (url) {
if (!!url) {
thisObject.dataUrl = url;
}
fetch(thisObject.dataUrl, {
method: 'GET'
}).then(function (fetchResponse) {
return fetchResponse.json();
}).then(function (fetchResponseJson) {
thisObject.postProcess(fetchResponseJson);
}).catch(function (doh) {
throw new Error(doh);
});
}
thisObject.message = function () {
let bar = 'DOH';
let foo = 'doh';
let jsonDataExists = !!thisObject.dataJson;
if (jsonDataExists) {
let incomingData = thisObject.dataJson;
bar = incomingData.bar || bar;
foo = incomingData.foo || foo;
}
return foo+' '+bar+'!';
}
thisObject.postProcess = function (responseJson) {
thisObject.dataJson = responseJson;
console.log('jsonData.message() = ', thisObject.message());
}
}
}
var jsonDataGetter = new jsonData('data/example-fetch-1.json');
jsonDataGetter.fetchData();
jsonDataGetter.fetchData('data/example-fetch-2.json');