Shulou(Shulou.com)06/03 Report--

This article introduces the knowledge of "what are the most common API requests". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Why use Fetch API?

Today, we are spoiled by all the services that provide beautiful SDK, these SDK abstract the actual API request, we only need to use the typical language structure to request data, regardless of the actual data exchange.

But what if the platform you choose doesn't have SDK? Or what if you build both the server and the client? In these cases, you need to handle the request yourself, which is the way to use Fetch API.

Send a simple GET request

Fetch ('{url}') .then (response = > console.log (response))

Send a simple POST request

Fetch ('{url}', {method: 'post'}) .then (response = > console.log (response))

Using authorization tokens for GET

Fetch ('{url}', {headers: {'Authorization':' Basic {token}'}) .then (response = > console.log (response))

Using query string data for GET

Fetch ('{url}? var1=value1&var2=value2') .then (response = > console.log (response))

Using CORS for GET

Fetch ('{url}', {mode: 'cors'}) .then (response = > console.log (response))

POST using authorization token and query string data

Fetch ('{url}? var1=value1&var2=value2', {method: 'post', headers: {' Authorization': 'Bearer {token}'}) .then (response = > console.log (response))

Using form data for POST

Let formData = new FormData (); formData.append ('field1',' value1'); formData.append ('field2',' value2'); fetch ('{url}', {method: 'post', body: formData}). Then (response = > console.log (response))

Using JSON data for POST

Fetch ('{url}', {method: 'post', headers: {' Content-Type': 'application/json'}, body: JSON.stringify ({' field1': 'value1',' field2': 'value2'})}) .then (response = > console.log (response))

Using JSON data and CORS for POST

Fetch ('{url}', {method: 'post', mode:' cors', headers: {'Content-Type':' application/json'}, body: JSON.stringify ({'field1':' value1', 'field2':' value2'})}) .then (response = > console.log (response))

How to handle the results of Fetch API requests

Fetch API returns a Promise. That's why I always use .then () and callback functions to handle responses:

Fetch (...) .then (response = > {/ / process the response})

However, if you are in an asynchronous function, you can also wait for the result:

Async function getData () {let data = await fetch (...); / / process the response}

Now let's take a look at how to extract data from the response:

How to check the status code of a Fetch API response

When sending POST,PATCH and PUT requests, we are usually interested in returning a status code:

Fetch (...) .then (response = > {if (response.status = = 200) {/ / all OK} else {console.log (response.statusText);}})

How to get the simple value of Fetch API response

Some API endpoints may send back identifiers for new database records created with your data:

Var userId; fetch (...) .then (response = > response.text ()) .then (id = > {userId = id; console.log (userId)})

How to convert JSON data of Fetch API response

In most cases, however, you will receive JSON data in the response body:

Var dataObj; fetch (...) .then (response = > response.json ()) .then (data = > {dataObj = data; console.log (dataObj)})

Keep in mind that you can't access the data until both Promises are resolved. This can be a little confusing at times, so I always like to use the async method and wait for the result.

Async function getData () {var dataObj; const response = await fetch (...); const data = await response.json (); dataObj = data; console.log (dataObj);} that's all for what are the most common API requests. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.