¿Cuál es la diferencia entre Fetch y Axios?

        Axios es una encapsulación de XMLHttpRequest,

        Fetch es un nuevo método de interfaz para obtener recursos, no una encapsulación de XMLHttpRequest.

        La mayor diferencia es que Fetch es compatible de forma nativa con los navegadores, mientras que Axios necesita introducir la biblioteca Axios.

1.  Método de solicitud

      Axios pasa un objeto, que contiene la URL de solicitud y el método de solicitud, parámetros

      fetch pasa dos parámetros, el primero es la URL de la solicitud y el segundo son algunos parámetros de la solicitud

1. Axios请求示例：

const options = {
  url: "http://example.com/",
  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);
});


2. Fetch请求示例：

const url = "http://example.com/";
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) => {
  console.log(response.status);
});

2.  Tiempo de espera de respuesta

        Las solicitudes de Axios pueden establecer directamente el atributo de tiempo de espera para controlar el tiempo de espera de respuesta

        Las solicitudes de recuperación deben usar AbortControlleratributos, que no son tan convenientes como axios

axios({
  method: "post",
  url: "http://example.com/",
  timeout: 4000, // 请求4秒无响应则会超时
  data: {
    firstName: "David",
    lastName: "Pollock",
  },
})
  .then((response) => {
    /* 处理响应 */
  })
  .catch((error) => console.error("请求超时"));


const controller = new AbortController();

const options = {
  method: "POST",
  signal: controller.signal,
  body: JSON.stringify({
    firstName: "David",
    lastName: "Pollock",
  }),
};
const promise = fetch("http://example.com/", options);

// 如果4秒钟没有响应则超时
const timeoutId = setTimeout(() => controller.abort(), 4000);

promise
  .then((response) => {
    /* 处理响应 */
  })
  .catch((error) => console.error("请求超时"));

3.  Transformación de datos

        Otra cosa muy buena de Axios es que convertirá automáticamente los datos, pero Fetch es diferente, requiere que el usuario convierta manualmente.

// axios
axios.get("http://example.com/").then(
  (response) => {
    console.log(response.data);
  },
  (error) => {
    console.log(error);
  }
);

// fetch
fetch("http://example.com/")
  .then((response) => response.json()) // 需要对响应数据进行转换
  .then((data) => {
    console.log(data);
  })
  .catch((error) => console.error(error));

4.  Interceptor HTTP

        Axios proporciona solicitudes e interceptores correspondientes

        Fetch no tiene una función de interceptor, pero no es difícil implementar esta función, simplemente reescriba el método Fetch global directamente.

fetch = ((originalFetch) => {
  return (...arguments) => {
    const result = originalFetch.apply(this, arguments);
    return result.then(console.log("请求已发送"));
  };
})(fetch);

fetch("http://example.com/")
  .then((response) => response.json())
  .then((data) => {
    console.log(data);
  });

5.  Solicitudes simultáneas

        Axios:

axios
  .all([
    axios.get("https://api.github.com/users/iliakan"),
    axios.get("https://api.github.com/users/taylorotwell"),
  ])
  .then(
    axios.spread((obj1, obj2) => {
      ...
    })
  );

        Buscar:

Promise.all([
  fetch("https://api.github.com/users/iliakan"),
  fetch("https://api.github.com/users/taylorotwell"),
])
  .then(async ([res1, res2]) => {
    const a = await res1.json();
    const b = await res2.json();
  })
  .catch((error) => {
    console.log(error);
  });

6.  Soporte nativo del navegador

        Lo único que Fetch supera a Axios es el soporte nativo en los navegadores modernos.

        Abra la consola de Chrome en la página web actual y use Fetch para realizar solicitudes directamente sin ninguna configuración.

Resumen personal:       

        1. Si se utiliza en el proyecto, sigue siendo conveniente utilizar Axios

        2. Si está probando en la consola del navegador o desea realizar una solicitud rápidamente, puede usar Fetch, ya que no necesita importarse y es compatible con el navegador.