avoid nesting code inside a fetch then eh use data in a previous layer

If I'm not mistaken, it could be simplified a little more as follows (in addition to adding a catch in case there are errors):

class meta {
    obj = null;
    test = () => {
         return fetch('https://reqres.in/api/products/3')
                .then(response => response.json())
                .then(data => this.obj = data)
                .catch(e => console.log(e))
                
    }
}

let mt = new meta();

mt.test().then(()=>{
    console.log(mt.obj); // en este punto siempre tendra un valor la variable y puede ser usada en esta instancia.
})

As I explain in this answer , you cannot "out" the result of a Promise to a previous instance . But beyond this fact, the error made by the OP in this question is quite difficult to understand when you are learning the language and its way of working, for which the answer fits.

ISSUE

You have a Class (which is nothing more than syntactic sugar of Javascript's prototype inheritance system) with asynchronous methods , in this case calls to the Fetch API .

The OP's idea is to use the result of these calls as the response of the methods of the instances of said Class, that is, objects .

However, due to the asynchronous nature of Fetch API calls, the results of these methods are not available synchronously (immediately on call) but will be available at an uncertain future time. Therefore, it is not possible to assign these results to a variable, but methods must be used thensince the Fetch API returns Promises.

The OP wonders if this is correct:

mt.test().then(()=>{
    console.log(mt.obj);
});

But the result of this call is as follows:

{
  "type": "cors",
  "url": "https://reqres.in/api/products/3",
  "redirected": false,
  "status": 200,
  "ok": true,
  "statusText": "",
  "headers": {
    "append": function append() { [native code] },
    "delete": function delete() { [native code] },
    "get": function get() { [native code] },
    "has": function has() { [native code] },
    "set": function set() { [native code] },
    "entries": function entries() { [native code] },
    "forEach": function forEach() { [native code] },
    "keys": function keys() { [native code] },
    "values": function values() { [native code] }
  },
  "body": {
    "locked": false,
    "cancel": function cancel() { [native code] },
    "getReader": function getReader() { [native code] },
    "pipeThrough": function pipeThrough() { [native code] },
    "pipeTo": function pipeTo() { [native code] },
    "tee": function tee() { [native code] }
  },
  "bodyUsed": false,
  "arrayBuffer": function arrayBuffer() { [native code] },
  "blob": function blob() { [native code] },
  "clone": function clone() { [native code] },
  "formData": function formData() { [native code] },
  "json": function json() { [native code] },
  "text": function text() { [native code] }
}

Viewing testthe Class method:

test = () => {
  return new Promise((resolve) => {
    fetch('https://reqres.in/api/products/3')
    .then((response) => {
      this.obj = response;
      resolve(true);
    });
  })
}

It is observed that there is indeed an assignment of a value to the property obj, but the value of said assignment is the result of the call to fetchwhich is a called object Response.

Another problem with this implementation is the unnecessary use of a Promise, because fetchit already returns a Promise, and I don't need to wrap it in another one for it to work.

Therefore, the property objof mt, when executing the method thenin the call to mt.test(), contains the object Response.

SOLUTION

Perhaps the OP has not fully documented the use of the Fecth API, in any case, the immediate result of a call to said API is an object, as I have already mentioned, that contains the entirety of the response received, including headers, body and so on.

This object has several methods, among which are text()and json(). The first parses ( parse ) the request body and returns a Promise containing the body in text ( String) format. The second method does the same thing but expects the request body to be formatted jsonand returns a Javascript Object constructed from the jsonbody string.

Assuming that we don't know in advance the type of result returned by the calling server, we can use the method getof the object headersincluded in the object Responsethat allows us to inspect the headers and in particular get the header Content-Type. For example:

fetch('https://reqres.in/api/products/3')
.then(response => {
  let contentType = response.headers.get('Content-Type');
  console.log(contentType);
});

.as-console-wrapper {
  min-height: 100%;
  top: 0;
}

In view of the result obtained, we can use the method jsonto parse the body of the request and obtain it as a Javascript object:

fetch('https://reqres.in/api/products/3')
.then(response => {
  return response.json();
})
.then(json => {
  console.log(json);
})

What the OP wants is to assign the result of the call (the body) already parsed to the property objof our Class instance Meta. (Using uppercase Class names is good practice.) Therefore we can write the following:

fetch('https://reqres.in/api/products/3')
.then(response => {
  return response.json();
})
.then(json => {
  this.obj = json
});

With this we have completed the call to the method fetchand we can use it in our Class in the following way:

class Meta {
  obj = null;
  test = () => {
    return fetch('https://reqres.in/api/products/3')
    .then(response => response.json())  // <- ejecuto la función que devuelve una Promesa
    .then(data => {
      this.obj = data;  // asigno el objeto a la propiedad obj de la Clase
    })
    .catch(console.log)  // un poquito de programación funcional :)            
  }
}

let mt = new Meta();

mt.test().then(() =>{
  console.log(mt.obj); // <- ahora si obj contiene lo que me interesa
});

Now the code runs correctly.

In any case, for the question raised by the OP: Is this correct or is there a better way to do it? , having corrected the code, the answer is: Yes, it is correct to do it this way, that is, to access the property of the instance once the inherent asynchronous processes have been executed. However I can't tell you that there is a better way to do it because it will depend on what you need in your implementation.

A different way of doing it, which involves simply visual enhancement of the code, is by using environments of type async.

For example, if you wrapped all your logic in a asyncself-called function, you could make use of awaitthus avoiding the use of then. Note that the method test()of your Class must be declared of type asyncin order to use it awaitwith the Fetch API.

For example:

// función async autollamada (nótese los paréntesis en la última línea)
(async function() {
  // usar nombres en mayúscula para las Clases es un plus
  class Meta {
    obj = null;
    test = async () => {
      // siempre que se trabaja con Promesas y
      // async / await, debemos usar bloques
      // try catch
      try {
        let res = await fetch('https://reqres.in/api/products/3');
        let json = await res.json();
        this.obj = json;            
      }
      catch(e) {
        console.error(e.message);
      }
    }
  }
  
  let mt = new Meta();
  await mt.test();
  console.log(mt.obj); // <- ahora sí, obj contiene lo que me interesa
})()

Extra

Classes (introduced in ES6) are syntactic sugar for classic Javascript functions and their prototype inheritance system.

Therefore, to say that OOP works in Javascript is not, in the end, strictly true.

The introduction of the Classes, perhaps part of the fact of making the language a little more friendly with those programmers accustomed to OOP.

There is no type Classin Javascript, just like in other languages, so in the end a Class is just a different syntactic way of writing a function.

Let's see:

// función típica de JS

function soy_una_funcion(mensaje) {
  this.msg = mensaje;
  this.showMessage = function() {
    console.log(this.msg);
  }
  return this;
}

const f = soy_una_funcion("Hola función");
f.showMessage();

console.log(typeof soy_una_funcion);
console.log(typeof f);  // <- objeto con herencia de prototipos

// Clase de ES6
class Soy_Una_Clase {
  constructor(mensaje) {
    this.msg = mensaje;
  }
  showMessage() {
    console.log(this.msg);
  }
}

const o = new Soy_Una_Clase("Hola Clase");
o.showMessage();

console.log(typeof Soy_Una_Clase);
console.log(typeof o);  // <- objeto con herencia de prototipos

.as-console-wrapper {
  min-height: 100%;
  top: 0;
}

As you can see, the Class is just a different way of declaring a function in Javascript.

A recommended read would be: Object Prototypes in Javascript.