Bagaimana cara saya menjanjikan XHR asli?

Saya ingin menggunakan janji (asli) di aplikasi frontend saya untuk melakukan permintaan XHR tetapi tanpa semua kesalahan kerangka kerja yang masif.

Saya ingin xhr saya untuk kembali janji tapi ini tidak berhasil (memberi saya: Uncaught TypeError: Promise resolver undefined is not a function)

function makeXHRRequest (method, url, done) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function() { return new Promise().resolve(); };
  xhr.onerror = function() { return new Promise().reject(); };
  xhr.send();
}

makeXHRRequest('GET', 'http://example.com')
.then(function (datums) {
  console.log(datums);
});

Saya berasumsi Anda tahu cara membuat permintaan XHR asli (Anda dapat memoles di sini dan di sini )

Karena browser apa pun yang mendukung janji asli juga akan mendukung xhr.onload, kami dapat melewati semua onReadyStateChangetindakan buruk tersebut. Mari kita mundur selangkah dan mulai dengan fungsi permintaan XHR dasar menggunakan callback:

function makeRequest (method, url, done) {
  var xhr = new XMLHttpRequest();
  xhr.open(method, url);
  xhr.onload = function () {
    done(null, xhr.response);
  };
  xhr.onerror = function () {
    done(xhr.response);
  };
  xhr.send();
}

// And we'd call it as such:

makeRequest('GET', 'http://example.com', function (err, datums) {
  if (err) { throw err; }
  console.log(datums);
});

Hore! Ini tidak melibatkan sesuatu yang sangat rumit (seperti header khusus atau data POST) tetapi cukup untuk membuat kita bergerak maju.

Konstruktor janji

Kita bisa membuat janji seperti ini:

new Promise(function (resolve, reject) {
  // Do some Async stuff
  // call resolve if it succeeded
  // reject if it failed
});

Konstruktor janji mengambil fungsi yang akan melewati dua argumen (sebut saja resolvedan reject). Anda dapat menganggap ini sebagai panggilan balik, satu untuk kesuksesan dan satu untuk kegagalan. Contohnya luar biasa, mari perbarui makeRequestdengan konstruktor ini:

function makeRequest (method, url) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    xhr.send();
  });
}

// Example:

makeRequest('GET', 'http://example.com')
.then(function (datums) {
  console.log(datums);
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

Sekarang kita dapat memanfaatkan kekuatan janji, merantai beberapa panggilan XHR (dan keinginan .catchakan memicu kesalahan pada salah satu panggilan):

makeRequest('GET', 'http://example.com')
.then(function (datums) {
  return makeRequest('GET', datums.url);
})
.then(function (moreDatums) {
  console.log(moreDatums);
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

Kami dapat meningkatkan ini lebih jauh, menambahkan params POST / PUT dan header kustom. Mari kita gunakan objek opsi alih-alih beberapa argumen, dengan tanda tangan:

{
  method: String,
  url: String,
  params: String | Object,
  headers: Object
}

makeRequest sekarang terlihat seperti ini:

function makeRequest (opts) {
  return new Promise(function (resolve, reject) {
    var xhr = new XMLHttpRequest();
    xhr.open(opts.method, opts.url);
    xhr.onload = function () {
      if (this.status >= 200 && this.status < 300) {
        resolve(xhr.response);
      } else {
        reject({
          status: this.status,
          statusText: xhr.statusText
        });
      }
    };
    xhr.onerror = function () {
      reject({
        status: this.status,
        statusText: xhr.statusText
      });
    };
    if (opts.headers) {
      Object.keys(opts.headers).forEach(function (key) {
        xhr.setRequestHeader(key, opts.headers[key]);
      });
    }
    var params = opts.params;
    // We'll need to stringify if we've been given an object
    // If we have a string, this is skipped.
    if (params && typeof params === 'object') {
      params = Object.keys(params).map(function (key) {
        return encodeURIComponent(key) + '=' + encodeURIComponent(params[key]);
      }).join('&');
    }
    xhr.send(params);
  });
}

// Headers and params are optional
makeRequest({
  method: 'GET',
  url: 'http://example.com'
})
.then(function (datums) {
  return makeRequest({
    method: 'POST',
    url: datums.url,
    params: {
      score: 9001
    },
    headers: {
      'X-Subliminal-Message': 'Upvote-this-answer'
    }
  });
})
.catch(function (err) {
  console.error('Augh, there was an error!', err.statusText);
});

Pendekatan yang lebih komprehensif dapat ditemukan di MDN .

Atau, Anda bisa menggunakan API pengambilan ( polyfill ).

Ini bisa sesederhana kode berikut.

Perlu diingat bahwa kode ini hanya akan memecat rejectpanggilan balik ketika onerrordipanggil ( hanya kesalahan jaringan ) dan bukan ketika kode status HTTP menandakan kesalahan. Ini juga akan mengecualikan semua pengecualian lainnya. Menangani itu harus terserah Anda, IMO.

Selain itu, disarankan untuk memanggil rejectcallback dengan contoh Errordan bukan acara itu sendiri, tetapi demi kesederhanaan, saya pergi apa adanya.

function request(method, url) {
    return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = resolve;
        xhr.onerror = reject;
        xhr.send();
    });
}

Dan memohon bisa jadi ini:

request('GET', 'http://google.com')
    .then(function (e) {
        console.log(e.target.response);
    }, function (e) {
        // handle errors
    });

Bagi siapa saja yang mencari ini sekarang, Anda dapat menggunakan fungsi ambil . Ini memiliki beberapa dukungan yang cukup bagus .

fetch('http://example.com/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));

Saya pertama kali menggunakan jawaban @ SomeKittens, tetapi kemudian menemukan fetchyang melakukannya untuk saya di luar kotak :)

Saya pikir kita bisa membuat jawaban atas jauh lebih fleksibel dan dapat digunakan kembali dengan tidak membuatnya membuat XMLHttpRequestobjek. Satu-satunya keuntungan dari melakukannya adalah bahwa kita tidak harus menulis sendiri 2 atau 3 baris kode untuk melakukannya, dan itu memiliki kelemahan besar dalam menghilangkan akses kita ke banyak fitur API, seperti mengatur header. Ini juga menyembunyikan properti objek asli dari kode yang seharusnya menangani respons (untuk keberhasilan dan kesalahan). Jadi kita dapat membuat fungsi yang lebih fleksibel, lebih luas diterapkan dengan hanya menerima XMLHttpRequestobjek sebagai input dan meneruskannya sebagai hasilnya .

Fungsi ini mengubah XMLHttpRequestobjek sewenang-wenang menjadi janji, memperlakukan kode status non-200 sebagai kesalahan secara default:

function promiseResponse(xhr, failNon2xx = true) {
    return new Promise(function (resolve, reject) {
        // Note that when we call reject, we pass an object
        // with the request as a property. This makes it easy for
        // catch blocks to distinguish errors arising here
        // from errors arising elsewhere. Suggestions on a 
        // cleaner way to allow that are welcome.
        xhr.onload = function () {
            if (failNon2xx && (xhr.status < 200 || xhr.status >= 300)) {
                reject({request: xhr});
            } else {
                resolve(xhr);
            }
        };
        xhr.onerror = function () {
            reject({request: xhr});
        };
        xhr.send();
    });
}

Fungsi ini sangat cocok dengan rantai Promises, tanpa mengorbankan fleksibilitas XMLHttpRequestAPI:

Promise.resolve()
.then(function() {
    // We make this a separate function to avoid
    // polluting the calling scope.
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://stackoverflow.com/');
    return xhr;
})
.then(promiseResponse)
.then(function(request) {
    console.log('Success');
    console.log(request.status + ' ' + request.statusText);
});

catchdihilangkan di atas untuk menjaga kode sampel tetap sederhana. Anda harus selalu memilikinya, dan tentu saja kami dapat:

Promise.resolve()
.then(function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://stackoverflow.com/doesnotexist');
    return xhr;
})
.then(promiseResponse)
.catch(function(err) {
    console.log('Error');
    if (err.hasOwnProperty('request')) {
        console.error(err.request.status + ' ' + err.request.statusText);
    }
    else {
        console.error(err);
    }
});

Dan menonaktifkan penanganan kode status HTTP tidak memerlukan banyak perubahan dalam kode:

Promise.resolve()
.then(function() {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://stackoverflow.com/doesnotexist');
    return xhr;
})
.then(function(xhr) { return promiseResponse(xhr, false); })
.then(function(request) {
    console.log('Done');
    console.log(request.status + ' ' + request.statusText);
});

Kode panggilan kami lebih panjang, tetapi secara konsep, masih sederhana untuk memahami apa yang terjadi. Dan kami tidak perlu membangun kembali seluruh API permintaan web hanya untuk mendukung fitur-fiturnya.

Kami dapat menambahkan beberapa fungsi kenyamanan untuk merapikan kode kami, juga:

function makeSimpleGet(url) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    return xhr;
}

function promiseResponseAnyCode(xhr) {
    return promiseResponse(xhr, false);
}

Kemudian kode kita menjadi:

Promise.resolve(makeSimpleGet('https://stackoverflow.com/doesnotexist'))
.then(promiseResponseAnyCode)
.then(function(request) {
    console.log('Done');
    console.log(request.status + ' ' + request.statusText);
});

Jawaban jpmc26 cukup dekat dengan sempurna menurut saya. Ini memiliki beberapa kelemahan, meskipun:

1. Itu memperlihatkan permintaan xhr hanya sampai saat terakhir. Ini tidak mengizinkan POST-requests untuk mengatur badan permintaan.
2. Lebih sulit untuk dibaca karena sendpanggilan- krusial tersembunyi di dalam suatu fungsi.
3. Ini memperkenalkan sedikit boilerplate ketika benar-benar membuat permintaan.

Monyet menambal objek xhr menangani masalah ini:

function promisify(xhr, failNon2xx=true) {
    const oldSend = xhr.send;
    xhr.send = function() {
        const xhrArguments = arguments;
        return new Promise(function (resolve, reject) {
            // Note that when we call reject, we pass an object
            // with the request as a property. This makes it easy for
            // catch blocks to distinguish errors arising here
            // from errors arising elsewhere. Suggestions on a 
            // cleaner way to allow that are welcome.
            xhr.onload = function () {
                if (failNon2xx && (xhr.status < 200 || xhr.status >= 300)) {
                    reject({request: xhr});
                } else {
                    resolve(xhr);
                }
            };
            xhr.onerror = function () {
                reject({request: xhr});
            };
            oldSend.apply(xhr, xhrArguments);
        });
    }
}

Sekarang penggunaannya sesederhana:

let xhr = new XMLHttpRequest()
promisify(xhr);
xhr.open('POST', 'url')
xhr.setRequestHeader('Some-Header', 'Some-Value')

xhr.send(resource).
    then(() => alert('All done.'),
         () => alert('An error occured.'));

Tentu saja, ini memperkenalkan kelemahan yang berbeda: Penambalan monyet tidak merusak kinerja. Namun ini seharusnya tidak menjadi masalah dengan asumsi bahwa pengguna menunggu terutama untuk hasil xhr, bahwa permintaan itu sendiri membutuhkan pesanan lebih besar daripada mengatur panggilan dan permintaan xhr tidak sering dikirim.

PS: Dan tentu saja jika menargetkan browser modern, gunakan fetch!

PPS: Telah ditunjukkan dalam komentar bahwa metode ini mengubah API standar yang dapat membingungkan. Untuk kejelasan yang lebih baik, seseorang dapat menambal metode yang berbeda ke objek xhr sendAndGetPromise().