Recuerda un paquete de búsqueda simple

Recuerda un paquete de búsqueda simple

No mucho después de ingresar a la empresa, Master asignó una tarea simple para crear el sitio web oficial de un producto, principalmente basado en páginas estáticas, y solo había alrededor de 5 o 6 interfaces involucradas. Antes de comenzar a hacerlo, aún consideraba los patrones de diseño y los estilos de código. Después de comenzar a escribir, temía no poder hacerlo antes de conectarme en línea, así que quería hacer uno primero. Por supuesto, puede ser que soy demasiado bueno y finalmente lo logré en línea. Pero un día, cuando el maestro revisó mi código, dijo que envié una solicitud de recuperación sin encapsulación, que es muy difícil de mantener en el futuro, así que tengo tiempo para refactorizarlo. Esta es mi tarea ...

Busqué muchos códigos de búsqueda empaquetados en Internet. Me refiero principalmente a los códigos anteriores de mi maestro.

1. El primero es encapsular el procesamiento de solicitud de recuperación:

//api/request.js
// Verifique el código de estado de devolución de solicitud y procese
const codeMessage = {
  200: "El servidor devolvió correctamente los datos solicitados",
  201: "Datos creados o modificados satisfactoriamente",
  202: "Una solicitud se ha puesto en cola en segundo plano (tarea asincrónica)",
  204: "Datos borrados con éxito",
  400: "Hubo un error en la solicitud enviada y el servidor no creó ni modificó los datos",
  401: "El usuario no tiene permiso (token, nombre de usuario, contraseña incorrecta)",
  403: "El usuario está autorizado, pero el acceso está prohibido",
  404: "La solicitud se envió para un registro inexistente, el servidor no funcionó",
  406: "El formato solicitado no está disponible",
  410: "El recurso solicitado se elimina permanentemente y no se volverá a obtener",
  422: "Al crear un objeto, se produjo un error de validación",
  500: "Se produjo un error en el servidor, verifique el servidor".
  502: "Error de puerta de enlace",
  503: "El servicio no está disponible, el servidor está temporalmente sobrecargado o mantenido",
  504: "Tiempo de espera agotado".
};
const checkStatus = respuesta => {
  // Si el código de estado es mayor o igual que 200 o menor que 300, demuestra que no hay ningún problema con la respuesta y los datos de la respuesta se pueden devolver directamente.
  if (response.status> = 200 && response.status <300) {
    respuesta de retorno;
  }
  // errortext: mensaje de error, si el código de estado es incorrecto, imprima el mensaje de error correspondiente de acuerdo con el código de estado y arroje
  const errortext = codeMessage [response.status] || response.statusText;
  console.error (`Solicitar error $ {response.status}: $ {response.url}`);
  error constante = nuevo error (errortexto);
  error.name = response.status;
  error.response = respuesta;
  error de lanzamiento;
};

1. Analice el resultado de la solicitud y use diferentes métodos de análisis cuando los tipos de datos devueltos sean diferentes.

   //api/request.js
   // analiza el resultado devuelto
   const parseResult = respuesta => {
     const contentType = response.headers.get ("Tipo de contenido");
     if (contentType! = null) {
       if (contentType.indexOf ("texto")> -1) {
         if (contentType.indexOf ("text / html")> -1) {
           return response.json ();
         } más {
           return response.test ();
         }
       }
       if (contentType.indexOf ("formulario")> -1) {
         return response.formData ();
       }
       if (contentType.indexOf ("video")> -1) {
         return response.blob ();
       }
       if (contentType.indexOf ("json")> -1) {
         return response.json ();
       }
     }
     return response.json ();
   };

1. Encapsular solicitud de búsqueda

//api/request.js
exportar solicitud de función predeterminada (url, opción) {
  const defaultOptions = {
    credenciales: "incluir"
  };
  const newOptions = {... defaultOptions, ... opción};
  newOptions.headers = {
    Aceptar: "aplicación / json",
    ... newOptions.headers
  };
  Si (
    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);
    } más {
      newOptions.body = qs.stringify (newOptions.body);
    }
  }
  return fetch (url, newOptions)
    .then (checkStatus)
    .then (respuesta => {
      console.log ("--- content-type ---", response.headers.get ("content-type"));
      console.log ("--- response.status ---", response.status);
      Si (
        newOptions.method === "DELETE" ||
        response.status === 204 ||
        newOptions.responseType === "texto"
      ) {
        respuesta de respuesta.text ();
      }
      return parseResult (respuesta);
    })
    .catch (e => {
      console.log ("Error de solicitud:", e);
    });
}

1. Solicitud de envío del paquete y obtener la solicitud.

//api/require.js
// solicitud de publicación
export const postRequest = (url, data = {}) => {
  solicitud de devolución (url, {
    método: "POST",
    dataType: "json",
    modo: "cors",
    cuerpo: {
      ...datos
    }
  });
};
// obtener solicitud
export const getRequest = url => {
  solicitud de devolución (url);
};

1. Para utilizar

importar {postRequest} desde 'api / require';
postRequest ("http: //www,abc.com") .then (res => {
    // Imprimir datos de devolución
    console.log (res)
})

De acuerdo, el paquete de búsqueda está aquí ~ Por supuesto, esta es solo una versión blanca simple. ¡Si tiene alguna pregunta, por favor indíquelo!

Referencia:

https://segmentfault.com/a/1190000014733098

Código completo:

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