Lembre-se de um pacote de busca simples

Lembre-se de um pacote de busca simples

Pouco tempo depois de entrar na empresa, a Master designou uma tarefa simples para criar o site oficial de um produto, principalmente com base em páginas estáticas, e havia apenas 5 ou 6 interfaces envolvidas. Antes de começar a fazê-lo, eu ainda considerava os padrões de design e os estilos de código.Depois que comecei a escrever, tive medo de não conseguir fazê-lo antes de entrar na Internet, então queria criar um primeiro. Claro, pode ser que eu seja bom demais e finalmente o tenha feito online. Mas um dia, quando o mestre revisou meu código, ele disse que enviei uma solicitação de busca sem encapsulamento, o que é muito difícil de manter no futuro, portanto, tenho tempo para refatorá-lo. Esta é a minha lição de casa ...

Pesquisei muitos códigos de busca compactados na Internet. Refiro-me principalmente aos códigos anteriores do meu mestre.

1. O primeiro é encapsular o processamento da solicitação de busca:

//api/request.js 
// Verifique o código de status de retorno da solicitação e processe-o 
const codeMessage = { 
  200: "O servidor retornou com êxito os dados solicitados.", 
  201: "Dados novos ou modificados foram bem-sucedidos.", 
  202: "Uma solicitação foi feita Digite a fila de segundo plano (tarefa assíncrona). ", 
  204:" Dados excluídos com êxito. ", 
  400:" A solicitação foi enviada com um erro e o servidor não criou ou modificou dados. ", 
  401:" O usuário não tem permissão (token, token, O nome de usuário e a senha estão incorretos). ", 
  403:" O usuário está autorizado, mas o acesso é proibido. ", 
  404:" A solicitação solicitada é para um registro inexistente e o servidor não operou. ", 
  406:" Solicitação O formato não está disponível. ", 
  410:" O recurso solicitado é excluído permanentemente e não será obtido novamente. ", 
  422:" Ao criar um objeto, ocorreu um erro de verificação. ", 
  500:" Ocorreu um erro no servidor, por favor Verifique o servidor. ", 
  502:" Erro no gateway. ", 
  503:" Serviço indisponível, servidor sobrecarregado ou mantido temporariamente. ", 
  504:" O tempo limite do gateway expirou. " 
}; 
Const checkStatus = response =>{ 
  // Se o código de status for maior ou igual a 200 ou menor que 300, isso prova que não há problema com a resposta e os dados da resposta podem ser retornados diretamente.
  if (response.status> = 200 && response.status <300) { 
    retorna resposta;
  } 
  // errortext: mensagem de erro, se o código de status estiver incorreto, imprima a mensagem de erro correspondente de acordo com o código de status e 
  execute const errortext = codeMessage [response.status] || response.statusText; 
  console.error (`Request request $ {response .status}: $ {response.url} `); 
  const error = new Error (errortext); 
  error.name = response.status; 
  error.response = response; 
  throw error; 
};

1. Analise o resultado da solicitação e use métodos de análise diferentes quando os tipos de dados retornados forem diferentes.

   //api/request.js 
   // 
   const parseResult = response => { 
     const contentType = response.headers.get ("Tipo de conteúdo"); 
     if (contentType! = null) { 
       if (contentType.indexOf ("text")> -1) { 
         if (contentType.indexOf ("text / html")> -1) { 
           retornar response.json (); 
         } else { 
           retornar response.test (); 
         } 
       } 
       if (contentType.indexOf ("form")> -1) { 
         return response.formData (); 
       } 
       if (contentType.indexOf ("video")> -1) { 
         retorna response.blob (); 
       } 
       if (contentType.indexOf ("json")> 
         -1) { return response.json (); 
       }
     }
     retornar response.json (); 
   };

1. Encapsular solicitação de busca

//api/request.js 
exportar solicitação de função padrão (url, opção) { 
  const defaultOptions = { 
    credentials: "include" 
  }; 
  const newOptions = {... defaultOptions, ... option}; 
  newOptions.headers = { 
    Aceitar: "application / json", 
    ... newOptions.headers 
  }; 
  if ( 
    newOptions.method === "POST" || 
    newOptions.method === "PUT" || 
    newOptions.method === "DELETE" 
  ) { 
    if (newOptions.dataType === "json") { 
      newOptions. headers ["Content-Type"] = "application / json; charset = utf-8"; 
      newOptions.body = JSON.stringify (newOptions.body);
    } else if (newOptions.dataType === "formEncoded") { 
      newOptions.headers ["Content-Type"] = "application / x-www-form-urlencoded"; 
      newOptions.body = qs.stringify (newOptions.body); 
    } else { 
      newOptions.body = qs.stringify (newOptions.body); 
    } 
  } 
  retornar busca (url, newOptions) .then 
    (checkStatus) .then 
    (response => { 
      console.log ("--- tipo de conteúdo ---", response.headers.get ("tipo de conteúdo"))) ; 
      console.log ("--- response.status ---", response.status); 
      if ( 
        newOptions.method === "DELETE" || 
        response.status === 204 || 
        newOptions. 
        retorna response.text ();
      retornar parseResult (response); 
    }) 
    .catch (e => { 
      console.log ("Erro de solicitação:", e); 
    }); 
}

1. Solicitação de postagem do pacote e solicitação de obtenção.

//api/require.js 
// postar 请求
export const postRequest = (url, data = {}) => { 
  solicitação de retorno (url, { 
    método: "POST", 
    dataType: "json", 
    mode: "cors", 
    body: { 
      ... data 
    } 
  }); 
}; 
// get 请求
export const getRequest = url => { 
  solicitação de retorno (url); 
};

1. Usar

importar {postRequest} de 'api / require'; 
postRequest ("http: //www,abc.com") .then (res => { 
    // imprimir dados de retorno 
    console.log (res) 
})

Ok, o pacote de busca está aqui ~ Claro, esta é apenas uma versão em branco simples.Se você tiver alguma dúvida, por favor, indique!

Referência:

https://segmentfault.com/a/1190000014733098

Código completo:

https://github.com/CassielLee/tool-library-js-cl/blob/master/src/api/request.js