Custom fetch with promise fails

Question

I want to implement fetch method by myself with promises with builder pattern, the backend is fine. I tested it with postman and it works fine. I don't know what could be, I tried everything but I don't get any data.

I think the problem is that it doesn't properly transform my data to JSON or something.

Any help will be appreciated.

class Fetch {
    constructor(){
        this.url = null;
        this.result = null;
        this.method = null;
        this.header = null;
        this.body = null;
    }
    call(){
        return new Promise((resolve, reject) => {
            fetch(this.url, 
                  {method: this.method, header: this.header, body: this.body})
                .then(response => response.json())
                .then(data => {
                    this.result = data;
                    console.log(data);
                    resolve(data);
                })
        })
    }
}
class FetchBuilder {
    constructor(){
        this.customFetch = new Fetch();
    }
    request(url){
        this.flag = true;
        this.customFetch.url = url;
        return this;
    }
    method(method){
        this.customFetch.method = method;
        return this;
    }
    header(header){
        this.customFetch.header = header;
        return this;
    }
    body(body){
        if(!this.flag){
            this.customFetch.body = JSON.stringify(body);
        }
        return this;
    }
    query(obj){
    }
    send(){
        this.customFetch.call();
    }
}

const fetchObj = new FetchBuilder();
fetchObj.request('https://node-app-test-picsart.herokuapp.com/signin')
        .method('POST')
        .header({
            'Content-Type': 'application/json;charset=utf-8'
        })
        .body({
            email: 'bro@gmail.com',
            password: 'bro'
        })
        .send()

Header:

Body

@GuyIncognito I don't think so, I tried only with Content type header and it works fine in postman — Mike Ehrmantraut, Jul 18 '20 at 19:45
@DaveNewton the same body and headers, look at the bottom of my code — Mike Ehrmantraut, Jul 18 '20 at 19:50
See [Why doesn’t Postman get a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error when my JavaScript code does?](https://stackoverflow.com/questions/20035101/why-doesn-t-postman-get-a-no-access-control-allow-origin-header-is-present-on) — Guy Incognito, Jul 18 '20 at 19:53
Is it intended that `if(!this.flag){` is executed when `this.flag` is true? — trincot, Jul 18 '20 at 19:57
The problem could be that you don't have CORS headers set on the backend. — Guy Incognito, Jul 18 '20 at 19:57
Then what is the purpose of the `.body()` call here? It doesn't do anything... — trincot, Jul 18 '20 at 19:59
@trincot that's in case if the response is not good then I will get back my body — Mike Ehrmantraut, Jul 18 '20 at 20:00
@GuyIncognito thank you, I will ask a guy who is responsible for backend :) — Mike Ehrmantraut, Jul 18 '20 at 20:01
I don't see how that can work, as `.body()` is doing nothing to the state of your object. The literal you pass as argument is lost in oblivion. — trincot, Jul 18 '20 at 20:01
Avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! — Bergi, Jul 18 '20 at 21:32

score 1 · Accepted Answer · answered Jul 18 '20 at 20:24

Your issue lies in either the this.flag = true or if (!this.flag) { line what causes the body argument passed in the .body() method to be lost. So you're code is doing what you want but just not in the right way, as you are expecting a package to be sent to the endpoint.

So either change the boolean:

...
request(url) {
  this.flag = false;
  this.customFetch.url = url;
  return this;
}
...

Or the condition checking the boolean. The rest of your code works as expected.

...
body(body) {
  if (this.flag) {
    this.customFetch.body = JSON.stringify(body);   
  }
  return this;
}
...

Run the code below with the network tab in your developer tools opened to see that a request is made with the body you want to send.

class Fetch {
  constructor() {
    this.url = null;
    this.result = null;
    this.method = null;
    this.header = null;
    this.body = null;
  }
  call() {
    return fetch(this.url, {
        method: this.method,
        header: this.header,
        body: this.body
      })
      .then(response => response.json())
      .then(data => {
        this.result = data;
        console.log(data);
        return data;
      })
  }
}

class FetchBuilder {
  constructor() {
    this.customFetch = new Fetch();
  }
  request(url) {
    this.flag = true;
    this.customFetch.url = url;
    return this;
  }
  method(method) {
    this.customFetch.method = method;
    return this;
  }
  header(header) {
    this.customFetch.header = header;
    return this;
  }
  body(body) {
    if (this.flag) {
      this.customFetch.body = JSON.stringify(body);
    }
    return this;
  }
  query(obj) {}
  send() {
    this.customFetch.call();
  }
}

const fetchObj = new FetchBuilder();
fetchObj.request('https://node-app-test-picsart.herokuapp.com/signin')
  .method('POST')
  .header({
    'Content-Type': 'application/json;charset=utf-8'
  })
  .body({
    email: 'bro@gmail.com',
    password: 'bro'
  })
  .send()

In your Fetch().call() just return the fetch as it already returns a Promise, wrapping it like this would be an anti-pattern. You could also use the async / await syntax.

Custom fetch with promise fails

1 Answers1