Olá a todos, sou Liu Ming, um veterano empreendedor de dez anos e entusiasta da tecnologia de código aberto.
Alguns sapatos infantis me perguntaram, como integrar o Axios no Nuxt3? Minha resposta é, não integre o Axios no Nuxt3 .
Embora o Axios seja muito fácil de usar e a maioria dos alunos já esteja familiarizada com o uso do Axios. Mas a equipe oficial do Nuxt3 não recomendou o uso do Axios. Este artigo apresentará a você os sapatos infantis:

Por que o Axios não é oficialmente recomendado
Como encapsular funções semelhantes ao Axios no Nuxt3.

O passado e o presente de Axios

Nascimento de Axios

Antigamente, o objeto XMLHttpRequest era necessário para iniciar uma solicitação de rede no navegador, e o módulo http era necessário para iniciar uma solicitação de rede no ambiente de back-end do nó. Os dois são escritos de forma diferente e são mais complicados de usar. Assim, o Axios criou um pacote para os dois, unificando os métodos de escrita front-end e back-end.
Para desenvolvedores, desde que o Axios seja usado, não há necessidade de distinguir se é um ambiente de nó ou de navegador, de qualquer forma, os dois são escritos da mesma maneira. Além disso, o Axios também possui recursos avançados, como interceptação de solicitação e interceptação de resposta. Então, o Axios rapidamente se tornou popular. O Nuxt2 também possui um módulo Axios integrado, e o oficial também o recomendou fortemente.

Axios desatualizados

Com Nuxt3, os tempos mudaram.
O primeiro é o ambiente do navegador. Os navegadores oferecem suporte nativo à busca e tendem a substituir XMLHttpRequest.
Em seguida veio o Node. Em fevereiro de 2022, o Node v17.5 foi lançado, introduzindo suporte nativo para busca.
Até agora, a busca foi unificada nas extremidades frontal e traseira.
Olhando para trás, o encapsulamento de front-end Axios de XMLHttpRequest encapsulamento de back-end de http é completamente desnecessário.

O que pensar sobre Axios

Embora as extremidades frontal e traseira do fetch sejam unificadas, ainda existem muitos calçados infantis que gostam de usar o Axios. Isso é normal. Afinal, o Axios é realmente fácil de usar e muitos projetos antigos ainda precisam ser mantidos.
Então, vi alguns artigos na internet, e ao comparar Axios e Fetch, concluí que Axios é melhor que fetch. Na verdade, esta é uma comparação muito errada. Axios é um projeto empacotado e fetch é apenas uma API nativa. Se você precisar comparar, você deve comparar o objeto XMLHttpRequest com fetch ou o módulo http com fetch.
Com o passar do tempo, mais e mais novos projetos recomendarão o uso de fetch.Nuxt3 é um novo projeto nascido em 2022, abandonando completamente o uso de Axios.

A prática oficial do Nuxt3

Compare Axios com Fetch e conclua que Axios é melhor, embora seja uma comparação errada. Mas pelo menos um ponto, se o fetch for verdadeiramente reconhecido, ele deve ter um pacote muito útil. Levando isso em consideração, a equipe oficial do Nuxt3 encapsulou ainda mais o fetch, desenvolveu um novo projeto chamado ofetch e integrou o ofetch ao Nuxt3. Existe um objeto global $fetch que pode ser usado em qualquer lugar no Nuxt3, que é o ofetch.Eu
li todos os códigos do ofetch.Comparado com o Axios, a quantidade de código é menor e o ofetch basicamente tem as funções do Axios. Ofetch está oficialmente integrado ao Nuxt3 por padrão, e ofetch já é uma parte indispensável do projeto Nuxt3. Então, naturalmente, eles não recomendam mais o Axios.

Como encapsular funções semelhantes ao Axios no Nuxt3

Na seção DataFeching do documento oficial do Nuxt3 , é apresentado o uso simples de useFetch e $fetch.Se você está apenas começando com o Nuxt3, é altamente recomendável ler esta seção com atenção.
No entanto, muitos projetos ainda precisam definir baseURL, solicitar interceptação e interceptação correspondente. Nenhuma dessas funções fornece exemplos de código na documentação oficial.
É muito simples de implementar, basta escrever uma função de combinação de useRequest. No Nuxt3, a função de composição é importada automaticamente, para que possa ser usada depois de escrevê-la.

//文件位置：/composables/useRequest.ts
type Response = {
  url: string;
  body:any,
  status: number;
  type:string,
  statusText?: string;
  _data?: any;
  headers?:object,
  ok?:boolean,
  redirected?:boolean,
  bodyUsed?:boolean,
};
type ResponseData={
  code:number,
  msg:string,
  data:object|object[]
}

export const useRequest = async (url: string,options:object) => {
  const router = useRouter();
  //此处是引入了pinia进行状态管理，大家可以根据自己需求进行重写
  //const store = useMainStore();
  const host = window.location.hostname;
  const headers = {
    Authorization:'Bearer '+localStorage.getItem('token')||null,
  };
  const defaultOptions:object = {
    //baseURL也可以在nuxt.config.ts中定义然后此处引入
    baseURL: "http://example.com",
    headers: headers,
    //响应拦截
    onResponse({ response }: { response: Response }) {
      console.log("response", response);
      const res = response._data;
      //后端返回code=0时弹出错误信息，此处采用了element-plus
      if (res.code == 0) {
        ElMessage.error(res.msg);
      }
    },
    //响应错误拦截
    onResponseError({ response }: { response: Response }) {
      console.log("response-error", response);
      const res = response._data;
      //后端返回401时导航到登录界面
      if (response.status == 401) {
        router.replace("/login");
        //store.logout()
      }
    },
  };
  const newOptions:object={...defaultOptions,...options};
  //采用element-plus进行请求时的加载
  //const loadingInstance = ElLoading.service({fullscreen:false});
  const { data, pending,refresh } = await useFetch(url, newOptions);
  if (!pending.value) {
    //loadingInstance.close();
  }
  return {data,refresh};
};

O código do pacote acima é escrito em TypeScript. Se você não está acostumado com TypeScript, pode me enviar uma mensagem privada para obter o método de escrita javascript .
Neste pacote, as seguintes funções são realizadas principalmente:

Adicionado um baseURL global,
Um cabeçalho global é adicionado à solicitação, que contém token para autenticação de back-end
Adicionado interceptação de resposta, prompts unificados para mensagens de erro e transferidos automaticamente para a interface de login para erros 401
O componente de carregamento do elemeng-plus é adicionado à solicitação de rede para lidar automaticamente com a abertura e o fechamento do carregamento

Esse encapsulamento é, na verdade, um processamento adicional do useFetch oficial. Após o encapsulamento, os dados e a atualização de useFetch ainda são retornados. O método de uso é basicamente o mesmo do useFetch.
Se você não estiver familiarizado com o uso de useFetch, verifique a documentação oficial diretamente.
documentação useFetch

O código acima é apenas um exemplo, os sapatos infantis podem ser reescritos de acordo com suas próprias necessidades. Por exemplo, escreva outra função de combinação useGet ou usePost para evitar a necessidade de selecionar um método para cada solicitação. Ou adicione alguma interceptação de solicitação complexa.
O ponto é que você deve entender o uso de ofetch. Só assim você pode modificar o código à vontade de acordo com suas próprias necessidades.

Sou Ming Liu, um veterano empreendedor de dez anos e entusiasta da tecnologia de código aberto. Se você está se comunicando e aprendendo, ou tem necessidades de desenvolvimento, entre em contato conosco por mensagem privada.
Se você tiver alguma dúvida, entre em contato com Lao Liu

[Artigos da série Nuxt] Um artigo para entender as solicitações de rede Nuxt3