Qual é a diferença entre Axios e Fetch?

Estou ligando para o serviço da web usando a busca, mas o mesmo posso fazer com a ajuda do axios. Então agora estou confuso. Devo ir para axios ou buscar?

A busca e o Axios são muito semelhantes em funcionalidade, mas para obter mais compatibilidade com versões anteriores, o Axios parece funcionar melhor (a busca não funciona no IE 11, por exemplo, verifique esta publicação )

Além disso, se você trabalha com solicitações JSON, a seguir, apresentamos algumas diferenças.

Buscar solicitação de postagem JSON

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            mode: 'cors',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            body: JSON.stringify({
                property_one: value_one,
                property_two: value_two
            })
        };
let response = await fetch(url, options);
let responseOK = response && response.ok;
if (responseOK) {
    let data = await response.json();
    // do something with data
}

Solicitação de postagem JSON do Axios

let url = 'https://someurl.com';
let options = {
            method: 'POST',
            url: url,
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json;charset=UTF-8'
            },
            data: {
                property_one: value_one,
                property_two: value_two
            }
        };
let response = await axios(options);
let responseOK = response && response.status === 200 && response.statusText === 'OK';
if (responseOK) {
    let data = await response.data;
    // do something with data
}

Assim:

• Corpo da busca = dados do Axios
• O corpo de Fetch deve ser especificado , os dados do Axios contêm o objeto
• A busca não possui URL no objeto de solicitação, o Axios possui URL no objeto de solicitação
• A função de solicitação de busca inclui a URL como parâmetro , a função de solicitação do Axios não inclui a URL como parâmetro .
• A solicitação de busca está ok quando o objeto de resposta contém a propriedade ok , a solicitação do Axios está ok quando o status é 200 e statusText é 'OK'
• Para obter a resposta do objeto json: na busca, chame a função json () no objeto de resposta, no Axios obtenha a propriedade de dados do objeto de resposta.

Espero que isto ajude.

Eles são bibliotecas de solicitações HTTP ...

Acabo com a mesma dúvida, mas a tabela deste post me faz seguir em frente isomorphic-fetch. Que é fetchapenas funciona com o NodeJS.

http://andrewhfarmer.com/ajax-libraries/

O link acima está inativo A mesma tabela está aqui: https://www.javascriptstuff.com/ajax-libraries/

Ou aqui:

De acordo com mzabriskie no GitHub :

No geral, eles são muito semelhantes. Alguns benefícios dos axios:

• Transformadores: permitem realizar transformações nos dados antes de uma solicitação ser feita ou após o recebimento de uma resposta

• Interceptores: permitem alterar completamente a solicitação ou resposta (também os cabeçalhos). Além disso, execute operações assíncronas antes que uma solicitação seja feita ou antes que o Promise seja resolvido

• Built-in XSRF proteção

verifique o Axios de suporte ao navegador

Eu acho que você deveria usar axios.

Mais uma grande diferença entre a API de busca e a API de axios

• Ao usar o service worker, você precisará usar a API de busca apenas se desejar interceptar a solicitação HTTP
• Ex. Ao executar o cache no PWA usando o service worker, você não poderá armazenar em cache se estiver usando a API axios (funciona apenas com a API de busca)

O Axios é um pacote independente de terceiros que pode ser facilmente instalado em um projeto React usando o NPM.

A outra opção que você mencionou é a função de busca. Ao contrário do Axios, fetch()é incorporado aos navegadores mais modernos. Com a busca, você não precisa instalar um pacote de terceiros.

Portanto, cabe a você, você pode ir fetch()e potencialmente bagunçar se não souber o que está fazendo OU apenas usar o Axios, que é mais direto na minha opinião.

Além disso ... eu estava brincando com várias bibliotecas no meu teste e notei o tratamento diferente das solicitações 4xx. Nesse caso, meu teste retorna um objeto json com uma resposta de 400. É assim que três bibliotecas populares lidam com a resposta:

// request-promise-native
const body = request({ url: url, json: true })
const res = await t.throws(body);
console.log(res.error)


// node-fetch
const body = await fetch(url)
console.log(await body.json())


// Axios
const body = axios.get(url)
const res = await t.throws(body);
console.log(res.response.data)

De interesse é isso request-promise-nativee axiosjogar na resposta 4xx enquanto node-fetchnão. Também fetchusa uma promessa para a análise de json.

Benefícios dos axios:

• Transformadores: permitem realizar transformações nos dados antes que a solicitação seja feita ou após a resposta ser recebida
• Interceptores: permitem alterar completamente a solicitação ou resposta (também os cabeçalhos). Também execute operações assíncronas antes que a solicitação seja feita ou antes que o Promise seja resolvido
• Proteção XSRF integrada

Vantagens de axiosmais defetch