request(options)

Açıklama

XHR (AJAX olarak da bilinir) istekleri gönderir ve bir promise (söz) döndürür.

javascript

m.request({
  method: 'PUT',
  url: '/api/v1/users/:id',
  params: { id: 1 },
  body: { name: 'test' },
}).then(function (result) {
  console.log(result);
});

İmza

promise = m.request(options)

Argüman	Tür	Gerekli	Açıklama
`options`	`Object`	Evet	Gönderilecek istek seçenekleri.
`options.method`	`String`	Hayır	Kullanılacak HTTP metodu. Şu değerlerden biri olmalıdır: `GET`, `POST`, `PUT`, `PATCH`, `DELETE`, `HEAD` veya `OPTIONS`. Varsayılan HTTP metodu `GET`'dir.
`options.url`	`String`	Evet	İsteğin gönderileceği path name (yol adı). İsteğe bağlı olarak `options.params` içindeki değerlerle değiştirilebilir.
`options.params`	`Object`	Hayır	URL'ye yerleştirilecek ve/veya sorgu dizesine (query string) dönüştürülecek veri.
`options.body`	`Object`	Hayır	İstek gövdesine dönüştürülecek veri (diğer istek türleri için).
`options.async`	`Boolean`	Hayır	İsteğin eşzamansız (asenkron) olup olmayacağı. Varsayılan olarak `true`'dur.
`options.user`	`String`	Hayır	HTTP kimlik doğrulaması için bir kullanıcı adı. Varsayılan olarak `undefined`'dır.
`options.password`	`String`	Hayır	HTTP kimlik doğrulaması için bir parola. Varsayılan olarak `undefined`'dır. Bu seçenek `XMLHttpRequest` uyumluluğu için sağlanmıştır, ancak parola ağ üzerinden düz metin olarak gönderildiği için kullanılması önerilmez.
`options.withCredentials`	`Boolean`	Hayır	Çerezlerin üçüncü taraf alan adlarına gönderilip gönderilmeyeceği. Varsayılan olarak `false`'dur.
`options.timeout`	`Number`	Hayır	Bir isteğin otomatik olarak sonlandırılmadan önce geçebileceği milisaniye cinsinden süre. Varsayılan olarak `undefined`'dır.
`options.responseType`	`String`	Hayır	Beklenen yanıt türü. `extract` tanımlıysa varsayılan olarak `""`, tanımlı değilse `"json"`'dur. `responseType: "json"` ise, dahili olarak `JSON.parse(responseText)` fonksiyonunu çalıştırır.
`options.config`	`xhr = Function(xhr)`	Hayır	Altta yatan XMLHttpRequest nesnesine erişim sağlar; düşük seviyeli yapılandırma ve isteğe bağlı değiştirme (yeni bir XHR döndürerek) için kullanılır.
`options.headers`	`Object`	Hayır	İsteğe göndermeden önce eklenecek başlıklar (`options.config`'den hemen önce uygulanır).
`options.type`	`any = Function(any)`	Hayır	Yanıttaki her nesneye uygulanacak bir constructor (yapıcı). Varsayılan olarak identity fonksiyonudur.
`options.serialize`	`string = Function(any)`	Hayır	`body`'ye uygulanacak bir serileştirme (dizileştirme) yöntemi. Varsayılan olarak `JSON.stringify`'dir veya `options.body` bir `FormData` veya `URLSearchParams` örneği ise, varsayılan olarak identity fonksiyonudur (yani `function(value) {return value}`).
`options.deserialize`	`any = Function(any)`	Hayır	`xhr.response` veya normalleştirilmiş `xhr.responseText`'e uygulanacak bir deserileştirme (diziden çıkarma) yöntemi. Varsayılan olarak identity fonksiyonudur. `extract` tanımlıysa, `deserialize` atlanır.
`options.extract`	`any = Function(xhr, options)`	Hayır	XMLHttpRequest yanıtının nasıl okunacağını belirtmek için bir kanca (hook). Yanıt verilerini işlemek, başlıkları ve çerezleri okumak için kullanışlıdır. Varsayılan olarak `options.deserialize(parsedResponse)` döndüren bir fonksiyondur. Sunucu yanıt durum kodu bir hatayı gösterdiğinde veya yanıt sözdizimsel olarak geçersiz olduğunda bir istisna fırlatır. Özel bir geri çağırma (callback) sağlanırsa, `xhr` parametresi istek için kullanılan XMLHttpRequest örneğidir ve `options`, `m.request` çağrısına geçirilen nesnedir. Bu durumda `deserialize` atlanır ve extract geri çağırmasından dönen değer, promise çözümlendiğinde olduğu gibi kullanılır.
`options.background`	`Boolean`	Hayır	`false` ise, isteğin tamamlanması üzerine bağlı bileşenleri yeniden çizer. `true` ise, çizmez. Varsayılan olarak `false`'dur.
returns	`Promise`		`extract`, `deserialize` ve `type` yöntemlerinden geçirilerek elde edilen yanıt verileriyle çözümlenen bir promise.

promise = m.request(url, options)

Argüman	Tür	Gerekli	Açıklama
`url`	`String`	Evet	İsteğin gönderileceği path name (yol adı). `options.url` mevcut olduğunda bunu geçersiz kılar.
`options`	`Object`	Hayır	Gönderilecek istek seçenekleri.
returns	`Promise`		`extract`, `deserialize` ve `type` yöntemlerinden geçirilerek elde edilen yanıt verileriyle çözümlenen bir promise.

Bu ikinci form, çoğunlukla m.request(Object.assign({url: url}, options))'e eşdeğerdir, sadece dahili olarak ES6 global Object.assign'e bağlı değildir.

İmzalar nasıl okunur

Nasıl çalışır

m.request yardımcı programı, XMLHttpRequest etrafında basit bir arayüzdür ve bir veritabanından veri kaydetmek ve/veya almak için uzak sunuculara HTTP istekleri yapılmasına olanak tanır.

javascript

m.request({
  method: 'GET',
  url: '/api/v1/users',
}).then(function (users) {
  console.log(users);
});

m.request'e yapılan bir çağrı bir promise döndürür ve promise zincirinin tamamlanması üzerine bir yeniden çizim (redraw) tetikler.

Varsayılan olarak, m.request yanıtın JSON biçiminde olduğunu varsayar ve bunu bir JavaScript nesnesine (veya diziye) ayrıştırır.

Bir extract geri çağırması (callback) sağlamak, promise'in reddedilmesini engelleyecektir.

Tipik kullanım

İşte bir sunucudan bazı verileri almak için m.request'i kullanan bir bileşenin açıklayıcı bir örneği.

javascript

var Data = {
  todos: {
    list: [],
    fetch: function () {
      m.request({
        method: 'GET',
        url: '/api/v1/todos',
      }).then(function (items) {
        Data.todos.list = items;
      });
    },
  },
};

var Todos = {
  oninit: Data.todos.fetch,
  view: function (vnode) {
    return Data.todos.list.map(function (item) {
      return m('div', item.title);
    });
  },
};

m.route(document.body, '/', {
  '/': Todos,
});

/api/items sunucu URL'sine bir istek yapmanın JSON biçiminde bir nesne dizisi döndürdüğünü varsayalım.

Alttaki m.route fonksiyonu çağrıldığında, Todos bileşeni başlatılır. oninit çağrılır ve bu da m.request'i çağırır. Bu, sunucudan eşzamansız olarak bir nesne dizisi alır. "Eşzamansız" (Asynchronously) ifadesi, JavaScript'in sunucudan yanıt beklerken diğer kodları çalıştırmaya devam ettiği anlamına gelir. Bu durumda, fetch'in döndüğü ve bileşenin orijinal boş dizi Data.todos.list olarak kullanılarak işlendiği anlamına gelir. Sunucuya yapılan istek tamamlandıktan sonra, items nesne dizisi Data.todos.list'e atanır ve bileşen tekrar işlenir ve her todo'nun başlıklarını içeren bir <div> listesi elde edilir.

Hata işleme

file: olmayan bir istek 2xx veya 304 dışında herhangi bir durum koduyla döndüğünde, bir hatayla reddeder. Bu hata normal bir Error örneğidir, ancak birkaç özel özelliği vardır.

error.message ham yanıt metnine ayarlanır.
error.code durum kodunun kendisine ayarlanır.
error.response normal yanıtlarda olduğu gibi options.extract ve options.deserialize kullanılarak ayrıştırılmış yanıta ayarlanır.

Bu, hataların ele alınabilir durumlar olduğu birçok senaryoda faydalıdır. Bir oturumun süresinin dolup dolmadığını algılamak istiyorsanız - if (error.code === 401) return promptForAuth().then(retry) yapabilirsiniz. Bir API'nin kısma mekanizmasına çarptıysanız ve bir "timeout": 1000 ile bir hata döndürdüyse, bir setTimeout(retry, error.response.timeout) yapabilirsiniz.

Yükleme simgeleri ve hata mesajları

İşte yukarıdaki örneğin bir yükleme göstergesi ve bir hata mesajı uygulayan genişletilmiş bir sürümü:

javascript

var Data = {
  todos: {
    list: null,
    error: '',
    fetch: function () {
      m.request({
        method: 'GET',
        url: '/api/v1/todos',
      })
        .then(function (items) {
          Data.todos.list = items;
        })
        .catch(function (e) {
          Data.todos.error = e.message;
        });
    },
  },
};

var Todos = {
  oninit: Data.todos.fetch,
  view: function (vnode) {
    return Data.todos.error
      ? [m('.error', Data.todos.error)]
      : Data.todos.list
      ? [
          Data.todos.list.map(function (item) {
            return m('div', item.title);
          }),
        ]
      : m('.loading-icon');
  },
};

m.route(document.body, '/', {
  '/': Todos,
});

Bu örnek ile önceki örnek arasında birkaç fark bulunmaktadır. Burada, Data.todos.list başlangıçta null'dur. Ayrıca, bir hata mesajı tutmak için fazladan bir error alanı eklenmiş ve Todos bileşeninin görünümü, bir hata varsa hata mesajı göstermek veya Data.todos.list bir dizi değilse yükleme simgesi göstermek için değiştirilmiştir.

Dinamik URL'ler

İstek URL'leri enterpolasyon (değer atama) içerebilir:

javascript

m.request({
  method: 'GET',
  url: '/api/v1/users/:id',
  params: { id: 123 },
}).then(function (user) {
  console.log(user.id); // 123'ü kaydeder
});

Yukarıdaki kodda, :id, params nesnesindeki verilerle doldurulur ve istek GET /api/v1/users/123 olur.

Enterpolasyonlar, params özelliğinde eşleşen veri yoksa yoksayılır.

javascript

m.request({
  method: 'GET',
  url: '/api/v1/users/foo:bar',
  params: { id: 123 },
});

Yukarıdaki kodda, istek GET /api/v1/users/foo:bar?id=123 olur.

İstekleri durdurma

Bazen bir isteği durdurmak istenebilir. Örneğin, bir otomatik tamamlama/tür önceden tahmin widget'ında, yalnızca son isteğin tamamlandığından emin olmak istersiniz, çünkü tipik olarak otomatik tamamlayıcılar kullanıcı yazdıkça birkaç istek gönderir ve HTTP istekleri ağların öngörülemeyen doğası nedeniyle sıra dışı tamamlanabilir. Eğer başka bir istek, son gönderilen istekten sonra tamamlanırsa, widget son gönderilen isteğin tamamlanması durumunda göstereceği veriden daha az alakalı (veya potansiyel olarak yanlış) veri gösterebilir.

m.request(), temel XMLHttpRequest nesnesini options.config parametresi aracılığıyla kullanıma sunar ve bu, bu nesneye bir referans kaydetmenize ve gerektiğinde abort metodunu çağırmanıza olanak tanır:

javascript

var searchXHR = null;
function search() {
  abortPreviousSearch();

  m.request({
    method: 'GET',
    url: '/api/v1/users',
    params: { search: query },
    config: function (xhr) {
      searchXHR = xhr;
    },
  });
}
function abortPreviousSearch() {
  if (searchXHR !== null) searchXHR.abort();
  searchXHR = null;
}

Dosya yüklemeleri

Dosyaları yüklemek için öncelikle bir File nesnesine erişmeniz gerekir. Bunu yapmanın en kolay yolu <input type="file"> etiketini kullanmaktır.

javascript

m.render(document.body, [m('input[type=file]', { onchange: upload })]);

function upload(e) {
  var file = e.target.files[0];
}

Yukarıdaki kod parçacığı bir dosya yükleme alanı oluşturur. Bir kullanıcı bir dosya seçerse, onchange olayı tetiklenir ve bu da upload fonksiyonunu çağırır. e.target.files bir File nesneleri listesidir.

Ardından, istek gövdesinde dosya verilerini gönderebilen özel olarak biçimlendirilmiş bir HTTP isteği olan bir multipart request oluşturmak için bir FormData nesnesi oluşturmanız gerekir.

javascript

function upload(e) {
  var file = e.target.files[0];

  var body = new FormData();
  body.append('myfile', file);
}

Ardından, m.request'i çağırmanız ve options.method'u gövde kullanan bir HTTP metoduna (örneğin POST, PUT, PATCH) ayarlamanız ve FormData nesnesini options.body olarak kullanmanız gerekir.

javascript

function upload(e) {
  var file = e.target.files[0];

  var body = new FormData();
  body.append('myfile', file);

  m.request({
    method: 'POST',
    url: '/api/v1/upload',
    body: body,
  });
}

Sunucunun çok parçalı (multipart) istekleri kabul edecek şekilde yapılandırıldığını varsayarsak, dosya bilgileri myfile anahtarı ile ilişkilendirilecektir.

Çoklu dosya yüklemeleri

Tek bir istek ile birden fazla dosya yüklemek mümkündür. Bu işlem, toplu yüklemeyi atomik hale getirir. Yani, yükleme sırasında bir hata oluşursa hiçbir dosya işlenmez ve dosyaların sadece bir kısmının kaydedilmesi mümkün olmaz. Ağ hatası durumunda mümkün olduğunca çok dosya kaydetmek isterseniz, her dosyayı ayrı bir istek ile yüklemeyi düşünebilirsiniz.

Birden çok dosya yüklemek için, hepsini FormData nesnesine eklemeniz yeterlidir. Bir dosya girişi kullanırken, girişe multiple özniteliğini ekleyerek bir dosya listesi alabilirsiniz:

javascript

m.render(document.body, [
  m('input[type=file][multiple]', { onchange: upload }),
]);

function upload(e) {
  var files = e.target.files;

  var body = new FormData();
  for (var i = 0; i < files.length; i++) {
    body.append('file' + i, files[i]);
  }

  m.request({
    method: 'POST',
    url: '/api/v1/upload',
    body: body,
  });
}

İlerlemeyi izleme

Bazen, bir istek doğası gereği yavaşsa (örneğin, büyük bir dosya yüklemesi), uygulamanın hala çalıştığını belirtmek için kullanıcıya bir ilerleme göstergesi görüntülemek istenebilir.

m.request(), temel XMLHttpRequest nesnesini options.config parametresi aracılığıyla kullanıma sunar ve bu, XMLHttpRequest nesnesine olay dinleyicileri eklemenize olanak tanır:

javascript

var progress = 0;

m.mount(document.body, {
  view: function () {
    return [
      m('input[type=file]', { onchange: upload }),
      progress + '% completed',
    ];
  },
});

function upload(e) {
  var file = e.target.files[0];

  var body = new FormData();
  body.append('myfile', file);

  m.request({
    method: 'POST',
    url: '/api/v1/upload',
    body: body,
    config: function (xhr) {
      xhr.upload.addEventListener('progress', function (e) {
        progress = e.loaded / e.total;

        m.redraw(); // Mithril.js'ye verilerin değiştiğini ve yeniden oluşturmanın gerekli olduğunu söyleyin
      });
    },
  });
}

Yukarıdaki örnekte, bir dosya girişi oluşturulur. Kullanıcı bir dosya seçerse, bir yükleme başlatılır ve config geri çağırmasında (callback) bir progress olay işleyicisi kaydedilir. Bu olay işleyicisi, XMLHttpRequest'te bir ilerleme güncellemesi olduğunda tetiklenir. XMLHttpRequest'in ilerleme olayı doğrudan Mithril.js'nin sanal DOM motoru tarafından algılanmadığı için, Mithril.js'ye verilerin değiştiğini ve yeniden çizim yapılması gerektiğini bildirmek için m.redraw() fonksiyonu çağrılmalıdır.

Yanıtı bir türe dönüştürme

Genel uygulama mimarisine bağlı olarak, bir isteğin yanıt verilerini belirli bir sınıfa veya türe dönüştürmek (örneğin, tarih alanlarını tek tip olarak ayrıştırmak veya yardımcı metotlara sahip olmak için) istenebilir.

options.type parametresi olarak bir constructor (yapıcı) geçirebilirsiniz. Mithril.js, HTTP yanıtındaki her nesne için bu yapıcıyı kullanarak yeni nesneler oluşturacaktır.

javascript

function User(data) {
  this.name = data.firstName + ' ' + data.lastName;
}

m.request({
  method: 'GET',
  url: '/api/v1/users',
  type: User,
}).then(function (users) {
  console.log(users[0].name); // bir ad kaydeder
});

Yukarıdaki örnekte, /api/v1/users'ın bir nesne dizisi döndürdüğünü varsayarsak, User constructor'ı (yani new User(data) olarak çağrılır) dizideki her nesne için örneklendirilecektir. Yanıt tek bir nesne döndürürse, bu nesne body argümanı olarak kullanılacaktır.

JSON olmayan yanıtlar

Bazen bir sunucu uç noktası bir JSON yanıtı döndürmez: örneğin, bir HTML dosyası, bir SVG dosyası veya bir CSV dosyası istiyor olabilirsiniz. Varsayılan olarak Mithril.js, gelen yanıtı JSON formatında ayrıştırmaya çalışır. Bu davranışı geçersiz kılmak için özel bir options.deserialize fonksiyonu tanımlayın:

javascript

m.request({
  method: 'GET',
  url: '/files/icon.svg',
  deserialize: function (value) {
    return value;
  },
}).then(function (svg) {
  m.render(document.body, m.trust(svg));
});

Yukarıdaki örnekte, istek bir SVG dosyası alır, onu ayrıştırmak için hiçbir şey yapmaz (çünkü deserialize yalnızca değeri olduğu gibi döndürür) ve ardından SVG dizesini güvenilir HTML olarak işler.

Elbette, bir deserialize fonksiyonu daha ayrıntılı olabilir:

javascript

m.request({
  method: 'GET',
  url: '/files/data.csv',
  deserialize: parseCSV,
}).then(function (data) {
  console.log(data);
});

function parseCSV(data) {
  // örneği basit tutmak adına naif uygulama
  return data.split('\n').map(function (row) {
    return row.split(',');
  });
}

Yukarıdaki parseCSV fonksiyonunun, gerçek bir CSV ayrıştırıcısının ele alması gereken birçok durumu kapsamadığını varsayarsak, bu kod bir dizi dizisi oluşturacaktır.

Özel başlıklar da bu konuda yardımcı olabilir. Örneğin, bir SVG istiyorsanız, muhtemelen içerik türünü buna göre ayarlamak istersiniz. Varsayılan JSON istek türünü geçersiz kılmak için, options.headers'ı istek başlığı adlarına ve değerlerine karşılık gelen anahtar-değer çiftlerinden oluşan bir nesneye ayarlayın.

javascript

m.request({
  method: 'GET',
  url: '/files/image.svg',
  headers: {
    'Content-Type': 'image/svg+xml; charset=utf-8',
    Accept: 'image/svg, text/*',
  },
  deserialize: function (value) {
    return value;
  },
});

Yanıt ayrıntılarını alma

Varsayılan olarak Mithril.js, xhr.responseText'i JSON olarak ayrıştırmaya çalışır ve ayrıştırılmış nesneyi döndürür. Bir sunucu yanıtını daha ayrıntılı olarak incelemek ve manuel olarak işlemek yararlı olabilir. Bu, özel bir options.extract fonksiyonu geçirilerek gerçekleştirilebilir:

javascript

m.request({
  method: 'GET',
  url: '/api/v1/users',
  extract: function (xhr) {
    return { status: xhr.status, body: xhr.responseText };
  },
}).then(function (response) {
  console.log(response.status, response.body);
});

options.extract fonksiyonuna gönderilen parametre, işlem tamamlandıktan sonra (ancak promise zincirine aktarılmadan önce) XMLHttpRequest nesnesidir. Bu nedenle, eğer extract fonksiyonu bir hata fırlatırsa (istisna), promise reddedilmiş bir durumda sonuçlanabilir.

IP adreslerine getirme istekleri gönderme

URL'lerdeki parametrelerin basit algılanma yöntemi nedeniyle, IPv6 adres bölümleri yol parametreleri ile karıştırılabilir. Yol parametrelerinin doğru şekilde işlenebilmesi için ayrılması gerektiğinden, bu durum bir hataya yol açabilir.

javascript

// Bu işe yaramaz
m.request('http://[2001:db8::990a:cd27:4d9e:79]:8080/some/path', {
  // ...
});

Bunu aşmak için, IPv6 adresi + port çiftini bunun yerine bir parametre olarak geçirmelisiniz.

javascript

m.request('http://:host/some/path', {
  params: { host: '[2001:db8::990a:cd27:4d9e:79]:8080' },
  // ...
});

Bu, IPv4 adresleriyle ilgili bir sorun değildir ve bunları normal şekilde kullanabilirsiniz.

javascript

// Bu beklediğiniz gibi çalışacaktır
m.request('http://192.0.2.15:8080/some/path', {
  // ...
});

Neden HTML yerine JSON

Çoğu sunucu taraflı framework, HTML içeriğini göndermeden önce (sayfa yüklemesi veya AJAX istekleri aracılığıyla) veritabanı verilerini bir şablona yerleştiren bir görünüm motoru kullanır ve ardından kullanıcı etkileşimlerini yönetmek için jQuery'yi kullanır.

Buna karşılık, Mithril.js, tipik olarak şablonları ve verileri ayrı olarak indiren ve bunları JavaScript aracılığıyla tarayıcıda birleştiren kalın istemci uygulamaları için tasarlanmış bir framework'tür. Şablon oluşturma ağır işini tarayıcıda yapmak, sunucu kaynaklarını serbest bırakarak işletme maliyetlerini azaltmak gibi faydalar sağlayabilir. Şablonları verilerden ayırmak, şablon kodunun daha etkili bir şekilde önbelleğe alınmasına da olanak tanır ve farklı istemci türlerinde (örneğin, masaüstü, mobil) daha iyi kod yeniden kullanılabilirliği sağlar. Bir diğer fayda da, Mithril.js'nin karmaşık kullanıcı etkileşimlerinin geliştirilmesini ve bakımını büyük ölçüde basitleştiren bir retained mode UI geliştirme paradigmasını etkinleştirmesidir.

Varsayılan olarak, m.request yanıt verilerinin JSON biçiminde olmasını bekler. Tipik bir Mithril.js uygulamasında, bu JSON verileri daha sonra genellikle bir görünüm tarafından tüketilir.

Mithril ile sunucu tarafından oluşturulan dinamik HTML'yi işlemeye çalışmaktan kaçınmalısınız. Sunucu tarafı bir şablonlama sistemi kullanan mevcut bir uygulamanız varsa ve yeniden mimarilendirmek istiyorsanız, öncelikle çabanın baştan itibaren uygulanabilir olup olmadığına karar verin. Sunucu merkezli bir mimariden istemci merkezli bir mimariye geçiş genellikle büyük bir çaba gerektirir ve şablonlardaki mantığı alıp, mantıksal veri servislerine taşıma (ve beraberinde gelen testleri) işlemini içerir.

Veri hizmetleri, uygulamanın doğasına bağlı olarak birçok farklı şekilde düzenlenebilir. RESTful mimarileri API sağlayıcıları arasında popülerdir ve çok sayıda yüksek işlem hacimli iş akışı olduğunda service oriented architectures genellikle gereklidir.

Neden fetch yerine XHR

fetch(), sunuculardan kaynakları getirmek için XMLHttpRequest'e benzer daha yeni bir Web API'sidir.

Mithril.js'deki m.request fonksiyonu, çeşitli nedenlerden dolayı fetch() yerine XMLHttpRequest kullanır:

fetch henüz tam olarak standartlaştırılmamıştır ve spesifikasyon değişikliklerine tabi olabilir.
XMLHttpRequest çağrıları, çözümlenmeden önce durdurulabilir (örneğin, anında arama UI'lerinde yarış koşullarından kaçınmak için).
XMLHttpRequest, uzun süren istekler için ilerleme dinleyicileri için kancalar sağlar (örneğin, dosya yüklemeleri).
XMLHttpRequest tüm tarayıcılar tarafından desteklenir, oysa fetch() Internet Explorer ve eski Android (5.0 Lollipop'tan önce) tarafından desteklenmez.

Şu anda, tarayıcı desteği eksikliği nedeniyle, fetch() tipik olarak sıkıştırılmamış 11 kb'den fazla olan bir polyfill gerektirir - Mithril.js'nin XHR modülünden neredeyse üç kat daha büyüktür.

Mithril.js'nin XHR modülü çok daha küçük boyutlu olmasına rağmen, Mithril.js'nin otomatik yeniden çizim mekanizmasıyla sorunsuz bir şekilde entegre olmasının yanı sıra URL enterpolasyonu ve sorgu dizisi serileştirmesi gibi birçok önemli ve uygulaması karmaşık özelliği destekler. fetch polyfill'i bunların hiçbirini desteklemez ve aynı işlevsellik düzeyine ulaşmak için ekstra kitaplıklar ve boilerplate'ler gerektirir.

Ek olarak, Mithril.js'nin XHR modülü JSON tabanlı uç noktalar için optimize edilmiştir ve bu en yaygın durumu uygun şekilde kısa hale getirir - yani m.request(url) - oysa fetch, yanıt verilerini JSON olarak ayrıştırmak için ek bir açık adım gerektirir: fetch(url).then(function(response) {return response.json()})

fetch() API'sinin birkaç nadir durumda XMLHttpRequest'e göre birkaç teknik avantajı vardır:

çok büyük yanıtlar için daha iyi gecikme süresi ve bellek tüketimi sağlayan bir akış API'si sağlar (reaktif programlama anlamında değil, "video akışı" anlamında) (kod karmaşıklığı pahasına).
ağ isteklerinin nasıl ve ne zaman gerçekleştiği üzerinde ekstra bir kontrol katmanı sağlayan Service Worker API ile entegre olur. Bu API ayrıca push bildirimlerine ve arka plan senkronizasyon özelliklerine erişim sağlar.

Genel senaryolarda, akış tabanlı yaklaşım belirgin performans avantajları sunmaz, çünkü zaten megabaytlarca veriyi indirmek genellikle önerilen bir uygulama değildir. Ayrıca, küçük arabellekleri tekrar tekrar yeniden kullanmaktan elde edilen bellek kazanımları, aşırı tarayıcı yeniden çizimlerine neden olurlarsa dengelenebilir veya geçersiz kılınabilir. Bu nedenlerle, m.request yerine fetch() akışını seçmek yalnızca son derece kaynak yoğun uygulamalar için önerilir.

Anti-pattern'lerden kaçının

Promise'ler yanıt verileri değildir

m.request metodu, yanıt verilerinin kendisi değil, bir Promise döndürür. Bir HTTP isteğinin tamamlanması uzun sürebileceğinden (ağ gecikmesi nedeniyle) bu veriler doğrudan döndürülemez. Eğer JavaScript bu verileri beklerse, uygulama veriler gelene kadar donacaktır.

javascript

// KAÇININ
var users = m.request('/api/v1/users');
console.log('kullanıcı listesi:', users);
// `users` bir kullanıcı listesi DEĞİL, bir promise

// TERCİH EDİN
m.request('/api/v1/users').then(function (users) {
  console.log('kullanıcı listesi:', users);
});

request(options) ​

Açıklama ​

İmza ​

Nasıl çalışır ​

Tipik kullanım ​

Hata işleme ​

Yükleme simgeleri ve hata mesajları ​

Dinamik URL'ler ​

İstekleri durdurma ​

Dosya yüklemeleri ​

Çoklu dosya yüklemeleri ​

İlerlemeyi izleme ​

Yanıtı bir türe dönüştürme ​

JSON olmayan yanıtlar ​

Yanıt ayrıntılarını alma ​

IP adreslerine getirme istekleri gönderme ​

Neden HTML yerine JSON ​

Neden fetch yerine XHR ​

Anti-pattern'lerden kaçının ​

Promise'ler yanıt verileri değildir ​

request(options)

Açıklama

İmza

Nasıl çalışır

Tipik kullanım

Hata işleme

Yükleme simgeleri ve hata mesajları

Dinamik URL'ler

İstekleri durdurma

Dosya yüklemeleri

Çoklu dosya yüklemeleri

İlerlemeyi izleme

Yanıtı bir türe dönüştürme

JSON olmayan yanıtlar

Yanıt ayrıntılarını alma

IP adreslerine getirme istekleri gönderme

Neden HTML yerine JSON

Neden fetch yerine XHR

Anti-pattern'lerden kaçının

Promise'ler yanıt verileri değildir