Axios vs Fetch

Portuguese version

Axios and Fetch are popular tools for making HTTP requests in JavaScript, but they have some key differences. Here's a summary:

Axios

• Built-in Features: Axios comes with many built-in features, such as automatic JSON transformation, request and response interceptors, and request cancellation.
• Browser Compatibility: Supports older browsers, including Internet Explorer.
• Error Handling: Axios automatically rejects promises for HTTP error statuses (such as 404 or 500), making error handling easier.
• Request/Response Interceptors: Allows you to modify requests or responses globally in a simple way.
• Request Cancellation: Axios offers an easy way to cancel requests.

Fetch

• Native API: Fetch is a native web API, meaning there is no need to install additional libraries.
• Promise-Based: Uses Promises, but you need to manually check the response status for errors.
• Stream Handling: Fetch supports streaming, which can be useful for handling large responses.
• More Control: Provides more control over requests, but requires more additional code for features such as setting patterns or intercepting requests.
• No Built-in Support for JSON: You need to call .json() on the response object to parse JSON data.

Use Cases

• Use Axios if you need a rich set of out-of-the-box features, especially for complex applications.
• Use Fetch for simpler use cases or when you want to avoid external dependencies.

Usage Example

Axios:

axios.get('/api/data')
  .then(response => console.log(response.data))
  .catch(error => console.error(error));

const options = {
  url: 'http://localhost/test.htm',
  method: 'POST',
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json;charset=UTF-8'
  },
  data: {
    a: 10,
    b: 20
  }
};
axios(options)
  .then(response => {
    console.log(response.status);
  });

Fetch:

fetch('/api/data')
  .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(error));

const url = "https://jsonplaceholder.typicode.com/todos";
const options = {
  method: "POST",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json;charset=UTF-8",
  },
  body: JSON.stringify({
    a: 10,
    b: 20,
  }),
};
fetch(url, options)
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

Notes:

• To send data, fetch() uses the body property for a POST request, while Axios uses the data property.
• The data in fetch() is transformed into a string using the JSON.stringify method.
• Axios automatically transforms the data returned from the server, but with fetch(), you need to call the response.json() method to parse the data into a JavaScript object.
• With Axios, the data response provided by the server can be accessed within the data object, while in the fetch() method, the final data can be named with any variable.

Conclusion

Both have their strengths, and the choice often depends on your specific needs and preferences. If you're building a larger application with lots of API interactions, Axios can make some tasks easier, while Fetch is great for straightforward tasks.

Axios offers a user-friendly API that simplifies most HTTP communication tasks. However, if you prefer to use native browser features, you can definitely implement similar functionality yourself with the Fetch API.

As we've explored, it's entirely feasible to replicate Axios' core features using the fetch() method available in browsers. The decision to include a client HTTP library ultimately depends on your comfort with native APIs and your project's specific requirements.

For more information: https://medium.com/trainingcenter/axios-ou-fetch-765e5db9dd59

The above is the detailed content of Axios vs Fetch. For more information, please follow other related articles on the PHP Chinese website!