Recibo un error cuando uso fetch pasado al constructor en una clase de javascript:
import { browser } from '$app/env'; class Api { constructor(fetch) { this.req = fetch; } async api(path, body = {}, opts = {}) { path = import.meta.env.VITE_API_ENDPOINT + path; body = JSON.stringify(body); const method = opts.method || 'GET'; const headers = {}; if (browser) { const token = localStorage.getItem('token'); headers.Authorization = token ? 'Bearer ' + token : ''; } const res = await this.req(path, { method: opts.method || 'GET', body: method === 'GET' ? null : body, headers }); if (res.ok) { return await (opts.raw ? res.text() : res.json()); } throw res; } } export default Api; import Api from './create-api'; class Jobs extends Api { constructor(fetch) { super(fetch); } async getAll() { return await this.api('/jobs'); } } export default Jobs; Utilizándolo en un kit esbelto con await new Jobs(fetch).getAll()
Nunca he visto este error específico, pero esto es lo que creo que está sucediendo:
Cuando invoca un método en un objeto en javascript, el alcance dentro de ese método (a lo this apunta) está vinculado al objeto.
Debido a que está invocando fetch como método en su instancia de Api , es probable que this apunte a la instancia en lugar de a la window .
Algo en la implementación de fetch espera this sea una instancia de Window, de ahí el error.
Creo que podrías resolver esto ya sea:
this.req = (...args) => fetch(...args) o 2) vincular explícitamente fetch a window (o global o lo que sea):
await new Jobs(fetch.bind(window)).getAll()