Question

通过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
 }

然而，除了捕获普通值之外，我需要的是在命名空间中公开这个值，该值将用于其他函数。

Answer 1

内容：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');

将获取请求的值分配给Javascript对象属性将返回未定义的

1 个答案: