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

时间:2017-02-24 17:14:21

标签: javascript oop object fetch-api

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

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

1 个答案:

答案 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');