✅Quelle est la différence entre fetch et XMLHTTPRequest ?

Bonjour à tous ! En travaillant sur un projet intéressant, j'ai eu l'idée de parler de la différence entre fetch et XMLHTTPRequest. En fait, la question semble assez intéressante si vous connaissez l'histoire de sa création, dans le sens où elle est un peu incorrecte, mais il faut quand même la connaître, car, disons, pour moi en tant que développeur, quand je m'occupe avec toutes sortes d'API au quotidien, il est utile de le savoir pour ne pas créer de code inutile.

Qu'est-ce que XMLHTTPRequest et un bref historique de sa création

En javascript, les objets XMLHttpRequest sont utilisés pour interagir avec les serveurs. Vous pouvez récupérer des données à partir d'une URL sans avoir à actualiser la page entière. Cela permet à une page Web de mettre à jour seulement une partie d'une page sans perturber ce que fait l'utilisateur. Mais de manière générale, pour parler franchement, il s’agit d’une API. Et quand on entend cela, on se souvient immédiatement des notions de boucle d'événements, asynchrone (lorsque l'exécution du code sera terminée après un certain temps), etc. Par exemple, le code utilisant XMLHTTPRequest ressemble à ceci :

const xhr = new XMLHttpRequest();
// method, URL, [isAsync, user, password]
xhr.open("GET", "/api/getPage");
// body
xhr.send()

L'histoire de la création de XMLHTTPRequest elle-même nous ramène aux années lointaines où les dinosaures marchaient... D'accord, je plaisante. En fait, cette API a été développée pour la première fois par Microsoft et a été introduite dans le composant Outlook sur le Web du produit Microsoft Exchange Server 2000.

À l'époque, il s'appelait différemment - IXMLHTTPRequest et était un peu, si l'on peut le dire dans les premières versions de l'interface, différent de ce qu'il est aujourd'hui. Autrement dit, la base est évidemment restée, mais il est évident que des ajustements ont été effectués sur 25 ans. Plus tard, il a été ajouté à MSXML 2.0, et même plus tard, à Internet Explorer 5 en mars 1999.

Ensuite, les programmeurs de Mozilla ont développé leur propre version de l'API basée sur IXMLHTTPRequest, alors appelée nsIXMLHttpRequest, et l'ont rendue accessible via notre bien-aimé XMLHttpRequest. Tout cela a été ajouté à la version 0.6 de Gecko en décembre 2000 (Gecko est un moteur de navigateur utilisé dans FireFox et bien d'autres endroits). À cette époque, FireFox n'existait pas, car sa première version est sortie en septembre 2002 et s'appelait Phoenix, puis FireBird et seulement en 2004 FireFox. Puis, avant tout cela, il y avait Netscape Navigator, mais la confrontation avec Internet Explorer et c'est tout - c'est une autre histoire, qu'il ne sert à rien d'écrire dans cet article. Plus tard, la prise en charge a été ajoutée à Safari, Opera et d'autres navigateurs. Alors quand les gens vous disent que cet objet est utilisé pour la compatibilité avec les anciens navigateurs, alors bien sûr ils ont raison, car cela nous ramène à la fin des années 90, lorsque le développement web en était encore à ses débuts. On se souvient même de l'époque de la bulle Internet, mais, certes, c'était un peu plus tôt, ou à cette époque (si on prend Internet Explorer), mais enfin c'était à cette époque-là.

So what's the difference?

So, returning to the question about the difference, the most important difference is already hidden in history, because XMLHTTPRequest is just an old, but supported API, and fetch is just a new API, which kind of replaces it. As of today, XMLHTTPRequest 2.0 was released in January 2012, but the latest edition of 1.0 standard was released in December of the same year. This is the current standard for this object. But now imagine the faces of the developers who wrote this all the time:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/getData', true);

xhr.onload = function () {
    if (xhr.status >= 200 && xhr.status < 300) {
        var data = JSON.parse(xhr.responseText);
        console.log(data);
    } else {
        console.error('Request failed with status:', xhr.status);
    }
};

xhr.onerror = function () {
    console.error('There was a network error.');
};

xhr.send();

instead of this

fetch('/api/getData')
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('There was a problem with the fetch operation:', error);
    });

a few years ago. That's the only thing that comes to mind right away.

But seriously, here is a short list of differences:

1. Promise-oriented: The Fetch API uses promises, which makes it easier to work with asynchronous code and allows you to use convenient constructs like .then() and async and await.

2. Simplified interface: The Fetch API has a simpler and more intuitive syntax. For example, to make requests, you don’t need to create an object and set its properties, as is the case with XHR.

3. Support for new features: The Fetch API supports new features such as Request and Response objects, which provide convenient methods for working with requests, responses, and their transformations.

4. Support for streams: The Fetch API supports streaming data, which allows you to work with large amounts of data as it is received.

5. Canceling requests: Although the Fetch API does not have built-in support for canceling requests, you can use the abort controller to do so, which makes managing requests more flexible.

6. Improved customization: The Fetch API provides more options for configuring requests, such as setting headers, caching modes, and other parameters.

7. cors support: The Fetch API provides more flexibility in working with CORS (Cross-Origin Resource Sharing), which allows for more flexible configuration of requests to resources from other domains.

8. Better error handling: When working with the Fetch API, you can better handle response statuses, since a request error (e.g. network unavailable) will reject the promise, while a successful response with a 4xx or 5xx code will not reject it, and you will need to check the status code yourself.

This is of course not me, but it's just a cool picture

물론 더 많은 차이점이 있지만 지금 나열하는 것은 의미가 없습니다. 왜냐하면 모든 매개변수로 볼 때 이것은 단순히 최신 브라우저 요구 사항에 대한 이전 표준의 향상된 버전일 뿐이라는 것이 분명하기 때문입니다.

후문

처음에는 가져오기가 새로운 표준인 한 줄을 작성하려고 생각했지만 실제로는 말할 수 있는 멋진 내용이 많이 있는데 너무 단순하고 유익하지 않을 것입니다. 가져오기에 관한 전체 기사를 작성할 수 있지만 이 기사에는 특별한 요점이 없습니다. 하지만 제 생각에는 전반적으로 모든 것이 괜찮아 보입니다.

글을 읽어주셔서 진심으로 감사드립니다!

추신

그런데 이번 프로젝트는 HMPL이었습니다. 서버에서 클라이언트로 UI를 표시하기 위한 작은 템플릿 언어입니다. 이 프로젝트를 별점으로 평가해 주시면 좋을 것 같습니다. 감사합니다!

스타HMPL

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!