It is available as a global function called fetch. When called with arguments, this function returns a promise that resolves to a response. With the fetch function, you can make all sorts of HTTP requests.
Advantages of Fetch API Over Other Methods
It has a simpler and more intuitive interface that is easy to learn and use. As a result, your code becomes cleaner when you use the Fetch API. XMLHttpRequest is more complicated, and your code is not as clean as when you use the Fetch API.
Using the Fetch API
A Simple GET Request
First, we are going to learn to make a simple get request. The code for doing so follows this structure:
The function call will return a promise, resolving the API response or an error if one has been encountered. Therefore, to access the response, we will use the await keyword. But we can only use the await keyword in an asynchronous function.
If you run the code above, you should get the following output in your output.
Luckily, the Response object has a handy method called json(). This method reads the response’s body and tries to parse the string as JSON. It returns a promise that resolves to an object parsed from the JSON.
However, this method will raise an error if the body is not a valid JSON string. Therefore, we should only parse the JSON if the response has a 200 status code.
Running the above code will yield the following results:
This is an array of a hundred posts.
Using Request Headers
So, our previous example would now look like this:
In our options object, we have specified the request method we want to use and the body as properties. For both properties, we provided string arguments. We provided the string ‘POST’ for the request method since we want to make a POST request. We also provided a JSON string for the body property. This JSON string is formed by stringifying an object with the needed properties.
Running this code in the browser yields the following output:
The output is an object that contains the ID we just received from the server. Here is a great resource for the full list of options you can pass in.
#1. Network Errors
When making network requests, it is common to encounter errors. The fetch function returns a promise that resolves to the result or rejects when a network error has been encountered. Therefore, we must wrap our code in a try/catch block. To handle network errors gracefully.
#2. Other Errors
In addition to network errors, you may also encounter other errors, such as 404s, 403s, and 500s. The fetch function does not throw an error when such errors are encountered. Therefore, you need to check for them by checking the response status code. For example, in the previous examples, we have only attempted to parse the response body when the status code was 200.
#3. CORS Errors
Other common errors you will encounter are CORS errors. CORS stands for Cross-Origin Resource Sharing. An Origin is the unique combination of a server’s protocol, host, and port. For example, my website could be running on localhost, the host, on port 5500, the port, and served over HTTP, the protocol. Therefore, the origin of that website would be http://localhost:5500.
The same website will make an API request to the https://jsonplaceholder.typicode.com API, a different origin. Therefore, these two origins, localhost, and JSONPlaceholder, are sharing resources. That is Cross-Origin Resource Sharing. However, the API server needs to enable CORS this to work. This is not always the case. The solution to handling such errors would be to make requests through a CORS-enabled proxy server.
The fetch API is a fairly modern feature. According to CanIUse.com, about 95% of global users have browsers that support it.
When a user opens a website, one of the first things they notice is the header. A website header is the top section of a webpage, which contains elements such as a site’s logo, navigation menu, and functionalities such as searching and logging in.
Financial charting libraries help you to add stock market and digital asset market movement charts in any app. You will find both HTML5 charting libraries and JS libraries for app development projects.