Fetch for requests, retries, retryDelay available?

1

I saw that fetch will be used instead of request for latest version of framework7 and I wonder if fetch will include retries and retryDelay properties as well like in this npm package, for my case retries and retryDelay are useful because it helps when having network issues when doing a request!

This is the npm package I found useful!

I hope it can be considered in the latest framework7 updates with fetch!
thanks

2

maybe i’ve said it wrong.
so i’ll try again:
on V8 there will be no app.request at all.
if you want to make a request then you will have to do it by yourself.
so feel free to add this pkg to your app

f7 itself will use fetch internally only in:
load-module.js => (src/core/components/app/load-module.js)
form.js => (src/core/components/form/form.js)
router-class.js => (src/core/modules/router/router-class.js)

1 Like
3

Thanks, so I think it will be useful the use of fetch from now on!
thanks a lot!

4

or you can do something like this (for back-comptability)
i actually do it a little bit different (but that’s another story)
it just to give you some idea.

Framework7.use({
  create() {
    this.utils.extend(this, {
      //customize it for your needs
      request: ({ url, body, method }) =>
        fetch(url, {
          body,
          method,
          headers: {
            'Content-Type': 'application/json',
            '.some-other.': '......stuff......'
          }
        }).then(r => r.json())
    });
  }
});

const app = new Framework7({...});

const url = 'https://jsonplaceholder.typicode.com/posts';

// GET
app.request({ url: url })
  .then(d => console.log(d))
  .catch(e => console.log(e));

// POST
app.request({ url: url, method: 'POST', body: '{"k":"v"}' })
  .then(d => console.log(d))
  .catch(e => console.log(e));
5 
Framework7.use({
  create() {
    this.utils.extend(this, {
      requests: (a) => Promise.all(a.map(i => this.request(i))),
      request: ({ url, method, headers, body }) => fetch(url, {
        body,
        method,
        headers: Object.assign({
          'Content-Type': 'application/json'
        },headers)
      }).then(r => r.json())
    });
  }
});

const app = new Framework7({...});

const url = 'https://jsonplaceholder.typicode.com/posts';

// GET
app.request({ url: url })
  .then(d => console.log(d))
  .catch(e => console.log(e));

// POST
// add Authorization
app.request({
  url: url,
  method: 'POST',
  body: '{"key":"value"}',
  headers: { 'Authorization': 'Bearer:{token}' }
}).then(d => console.log(d)).catch(e => console.log(e));

// add Authorization
// and override default ContentType (from 'application/json' to 'dummy')
app.request({
  url: url,
  method: 'POST',
  body: '{"key":"value"}',
  headers: { 'Authorization': 'Bearer:{token}', 'Content-Type': 'dummy' }
}).then(d => console.log(d)).catch(e => console.log(e));

.# multi-request “app.requests” (using Promise.all)

app.requests([
  {
    url: url
  },
  {
    url: url,
    method: 'POST',
    body: '{"key":"value1"}'
  },
  {
    url: url,
    method: 'POST',
    body: '{"key":"value2"}',
    headers: { 'Authorization': 'Bearer:{token}' }
  }
]).then(a => console.log(a)).catch(e => console.log(e));
6

lot of things to test thanks I will make tests soon!