Historial de desarrollo de solicitudes de front-end Ajax, jQuery Ajax, fetch, axios (uso + comparación + guía para evitar pits)

Introducción

Si es ambiguo acerca de la solicitud, o sabe qué bibliotecas de solicitudes están disponibles, pero solo domina una o dos de ellas, no las conoce todas. Vamos, este artículo es muy adecuado para ti.

Este artículo explica un cambio en la biblioteca de solicitudes en la historia del desarrollo front-end, desde el principio Ajax, hasta el último jQuery Ajax, y luego fetch, y luego axios. El autor presentará el uso de cada biblioteca de solicitud en detalle, así como las trampas. Finalmente, se resumen sus respectivas ventajas y desventajas. Creo que después de leer este artículo, ganarás algo. Los amigos también pueden dar me gusta y coleccionar, creo que lo usarán más tarde.

La interfaz de solicitud de todos los ejemplos de este artículo se encuentra al final del artículo, usando node + express para compilar

Antes de hablar sobre la biblioteca de solicitudes, primero recordemos el formulario.

forma

En la mayoría de los casos, los datos, las imágenes o los efectos multimedia que se muestran en la página web son datos estáticos, pero a veces el usuario necesita realizar una interacción dinámica de datos con el servidor a través de la página web, como inicio de sesión, registro y otras operaciones, y se necesita un formulario. en este momento.

El formulario en realidad se compone de elementos como cuadros de entrada, radios, casillas de verificación, etc. Cuando el usuario hace clic en el botón Enviar, el navegador enviará los datos a la URL establecida en el formulario. Después de que el servidor correspondiente a la URL reciba y procesa los datos, enviará los datos devueltos al navegador.

envío de formulario

En general, hay dos formas de enviar un formulario:

La primera es usar typeel submitbotón para enviar.

El segundo es obtener el formulario y luego llamar manualmente submit()al método para enviarlo.

botón enviar para enviar

<h3>form1 直接提交</h3>
<form action="http://localhost:3000/test" onsubmit="submit1()">
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="number" name="age" placeholder="请输入年龄" />
  <input type="submit" />
</form>

La página se representa de la siguiente manera, haga clic type="submit"en el botón Enviar para enviar nuestro formulario. Después del envío, el método correspondiente a nuestro onsubmitatributo se activará automáticamente, este es submit1el método que se activará.

Llame manualmente al método de envío para enviar

<h3>form2 手动提交</h3>
<form action="http://localhost:3000/test" id="form2" onsubmit="submit1()">
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="number" name="age" placeholder="请输入年龄" />
  <!-- 这个按钮可以放在表单内也可以放在表单外 -->
  <input type="button" id="submitBtn2" value="提交" onclick="handleSubmit()"/>
</form>

En jsél, también podemos obtener el formulario en el caso del botón y luego llamar submit()al método del formulario para enviar el formulario.

handleSubmit = function () {
    
    
  const form2 = document.getElementById("form2");
  form2.submit();
};

La representación de la página es la siguiente, haga clic en el botón Enviar y luego submit()envíe manualmente nuestro formulario a través del método. Tenga en cuenta que este método no activará onsubmitel método correspondiente al atributo.

Aquí estamos buttonvinculando directamente el evento de clic, por supuesto, también puede procesarlo obteniendo buttony vinculando el evento.button

// 方式1
const submitBtn2 = document.getElementById("submitBtn2");
submitBtn2.onclick = function () {
    
    
  const form2 = document.getElementById("form2");
  form2.submit();
};

// 方式2
const submitBtn2 = document.getElementById("submitBtn2");
submitBtn2.addEventListener("click", function () {
    
    
  const form2 = document.getElementById("form2");
  form2.submit();
});

Debido a que la página se actualiza cada vez que se envía el formulario , la experiencia no es muy buena, por lo que salió más tarde.Es una tecnología que puede actualizar algunas páginas web Ajaxsin Ajaxrecargar toda la página web. Para realizar la solicitud sin problemas más tarde Ajax, debemos evitar el comportamiento de salto de página de forma predeterminada después de enviar el formulario. Entonces, echemos un vistazo a las formas de evitar el envío de formularios.

evitar el envío de formularios

En general, hay tres formas de evitar el envío de formularios:

El primero es onsubmitvolver al método enlazado falsepara evitar el envío de formularios.

El segundo es devolver el botón de enviar falsepara evitar el envío de formularios.

El tercero es bloquear el comportamiento predeterminado del botón Enviar para evitar el envío de formularios.

onsubmit devuelve falso

Veamos el primero

<form action="http://localhost:3000/test" onsubmit="return submit1()">
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="number" name="age" placeholder="请输入年龄" />
  <input type="submit" id="submitBtn1" />
</form>

Volver en onsubmitel método correspondiente falsepuede impedir el envío del formulario

function submit1() {
    
    
  return false;
}

El botón Enviar devuelve falso

<form action="http://localhost:3000/test">
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="number" name="age" placeholder="请输入年龄" />
  <input type="submit" id="submitBtn2" onclick="return handleSubmit()" />
</form>

falseSimplemente regrese en el método correspondiente al botón de enviar . Similar al anterior.

function handleSubmit() {
    
    
  return false;
}

Por supuesto, también puede utilizar el método de vinculación de eventos

<form action="http://localhost:3000/test">
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="number" name="age" placeholder="请输入年龄" />
  <input type="submit" id="submitBtn2" />
</form>

falseTambién puede evitar que el formulario se envíe vinculando un evento al botón Enviar y regresando en el evento . Tenga en cuenta que no es válido addEventListenervolver de esta manera de vincular eventos .false

const submitBtn2 = document.getElementById("submitBtn2");
submitBtn2.onclick = function () {
    
    
  return false;
};

// 无效 无 效无效 无效
const submitBtn2 = document.getElementById("submitBtn2");
submitBtn2.addEventListener("click", function () {
    
    
  return false;
});

evitar el comportamiento predeterminado del botón Enviar

También podemos bloquear el evento predeterminado del botón Enviar para evitar el envío de formularios.

<form action="http://localhost:3000/test">
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="number" name="age" placeholder="请输入年龄" />
  <input type="submit" id="submitBtn2" onclick="handleSubmit()" />
</form>

preventDefaultUtilice el evento predeterminado de bloqueo en el método correspondiente al botón Enviar .

// 这种方式需要window.event来获取事件对象
function handleSubmit(e) {
    
    
  const event = e || window.event;
  event.preventDefault();
}

Por supuesto, también puede utilizar el método de vinculación de eventos

<form action="http://localhost:3000/test">
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="number" name="age" placeholder="请输入年龄" />
  <input type="submit" id="submitBtn2" />
</form>

preventDefaultVinculando el evento al botón Enviar y luego usando el evento predeterminado de bloqueo en el evento .

// 方式1
const submitBtn2 = document.getElementById("submitBtn2");
submitBtn2.onclick = function (e) {
    
    
  e.preventDefault();
};

// 方式2
const submitBtn2 = document.getElementById("submitBtn2");
submitBtn2.addEventListener("click", function (e) {
    
    
  e.preventDefault();
});

Después de hablar sobre el envío del formulario, hablemos sobre otro punto de conocimiento muy importante del formulario.enctype

atributo enctype

enctypeSe utiliza para definir cómo codificar los datos cuando los datos del formulario se envían al servidor.Los valores opcionales son:

1. application/x-www-form-urlencoded;
2. multiparte/datos de formulario;
3. Texto sin formato

application/x-www-form-urlencoded

El método predeterminado es el primero application/x-www-form-urlencoded. Al enviar datos mediante el formulario, se convertirán en key=value&key=valuedatos en este formato de forma predeterminada.

Para la solicitud, dicho enlace getse generará a partir de los parámetros del formulario , y la solicitud se realizará después del enlace actual. Para la solicitud, los parámetros del formulario se generarán en dicho enlace y se colocarán en el cuerpo de la solicitud.?key=value&key=valueactionpostkey=value&key=value

Y se codificarán algunos caracteres (chinos, caracteres especiales, etc.) en los parámetros.

¿Por qué editar los datos enviados?

Cuando se utiliza el formulario para enviar datos, los datos deben codificarse, ya que los datos de la URL se transmiten al servidor ?key=value&key=value&a través de , que tiene algunos caracteres especiales como propiedades funcionales. Por ejemplo & ? =, si los datos contienen estos caracteres y no son codificado , lo que puede causar errores en los datos transmitidos. Por ejemplo, ?key=valuesi el valor 123&456es original, entonces el valor recibido por el servidor se convierte en 123, y hay uno más key=456. Este método de codificación se denomina codificación de porcentaje de URL y su estándar incluye In RFC3986.

multiparte/datos de formulario

Cuando se establece multipart/form-dataen , el navegador no codifica caracteres, lo que suele ser adecuado para cargar archivos .

Para multipart/form-datasolicitar datos en el formato, los datos se segmentarán mediante etiquetas especiales y luego se pasarán al cuerpo de la solicitud.

Texto sin formato

text/plainCuando se usa el tercer método , el navegador coloca el parámetro de solicitud bodyen una cadena y lo procesa. Este método se usa para transmitir el mensaje HTTP original y no aplica ningún procesamiento de formato.

Ajax

A continuación, echemos un vistazo al Ajax que cambió la historia . Debido a que la página se actualiza cada vez que se envía el formulario , la experiencia no es muy buena. AjaxEs una tecnología que puede actualizar algunas páginas web sin recargar toda la página web. Así que Ajaxla aparición, sin duda, cambió la historia. La experiencia del usuario ha mejorado mucho.

El nativo del que estamos hablando aquí Ajaxintroduce principalmente el XmlHttpRequestuso de XmlHttpRequestobjetos para enviar solicitudes asincrónicas al servidor y obtener datos del servidor.

proceso basico

Primero echemos un vistazo a los pasos necesarios para enviar el más simple Ajax.

crear objeto de solicitud

Primero, debe crear un objeto de solicitud y debe considerar la compatibilidad del navegador al crearlo.

let xhr;
if (window.XMLHttpRequest) {
    
    
  //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
  xhr = new XMLHttpRequest();
} else {
    
    
  // IE6, IE5 浏览器执行代码
  xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

escuchar solicitud

Antes de enviar una solicitud, es mejor que primero escuchemos la solicitud y readystatechangeel evento se ejecutará en cada etapa de la solicitud.

En general, solo debemos prestar atención al estado de 4.

// 设置状态监听函数
xhr.onreadystatechange = function () {
    
    
  // 4成功
  if (this.readyState !== 4) return;

  // xhr对象，在这里获取响应结果
  console.log(this);
};

Cuando una XMLHttpRequestsolicitud es abort()cancelada por el método, su readystatechangeevento no será disparado.

solicitud de inicialización

El método XMLHttpRequest.open(method, url, async) inicializa una solicitud recién creada o reinicializa una solicitud.

• método: el tipo de solicitud; GET o POST
• url: dirección de solicitud
• async: verdadero (asincrónico) o falso (sincrónico), el valor predeterminado es verdadero

xhr.open(
  "get",
  `http://localhost:3000/testGet?name=randy&age=27` // 接口在文章末尾，使用node + express搭建
);

Establecer el tipo de valor de retorno

Después de crear la solicitud, también debemos establecer el tipo de datos de respuesta, si no se establece, se utilizará el valor predeterminado text.

Los formatos de valor de retorno comúnmente utilizados son los siguientes

1. "" es lo mismo que texto
2. texto
3. json
4. gota
5. documento
6. búfer de matriz

Aquí respondemos a sí json, por lo que debemos configurarlo en josn.

xhr.responseType = "json";

Enviar petición

XMLHttpRequest.send()método para enviar solicitudes HTTP. Si es una solicitud asíncrona (el valor predeterminado es solicitud asíncrona), este método regresará inmediatamente después de que se envíe la solicitud; si es una solicitud síncrona, este método no regresará hasta que llegue la respuesta (es decir, evitará que el código posterior ejecución).

XMLHttpRequest.send()El método acepta un parámetro opcional, que es el cuerpo de la solicitud; si el método de solicitud es GET o HEAD, el cuerpo de la solicitud debe establecerse en nulo.

Aquí porque estamos getsolicitando, podemos enviar un nulo.

xhr.send(null)

send()Los formatos de datos admitidos por el método son los siguientes, que postse utilizarán al realizar la solicitud.

XMLHttpRequest.send();
XMLHttpRequest.send(String); // 传递js对象需要转成json字符串
XMLHttpRequest.send(URLSearchParams data);
XMLHttpRequest.send(FormData data);
XMLHttpRequest.send(ArrayBuffer data);
XMLHttpRequest.send(ArrayBufferView data);
XMLHttpRequest.send(Blob data);
XMLHttpRequest.send(Document data);
XMLHttpRequest.send(DOMString? data);

¡Estos formatos de datos de solicitud deben ser bien conocidos, de lo contrario, pasar formatos de datos no admitidos provocará errores de solicitud!

Obtener el resultado de la respuesta

La respuesta está en realidad en nuestro onreadystatechangeevento de escucha, echemos un vistazo a cómo xhrse ve el objeto exitoso.

Aquí nos centramos en response、status、statusText、readyStateestos valores.

responseLa propiedad devuelve el cuerpo de la respuesta. El tipo devuelto es uno de ArrayBuffer, Blob, Documento cadena. JavaScript ObjectEsto depende del responseTypeatributo . Si no se especifica, el resultado predeterminado es texttipo.

statuses el código de estado http.

statusTextEs la información de estado de http.

readyStatees el estado del objeto de solicitud actual.

en profundidad

Anteriormente dimos un ejemplo de la getsolicitud más simple, echemos un vistazo más de cerca a continuación. Tales como solicitud de publicación, asíncrona, solicitud de cancelación, manejo de errores, etc.

enviar solicitud de publicación

Los parámetros de postla solicitud deben colocarse send()en el método y se admiten múltiples formatos de datos. A continuación, el autor utiliza los tres formatos de datos más utilizados para explicar.

Primero creemos un formulario, aquí ya no usamos el formulario para enviar datos, sino que usamos el archivo Ajax. Entonces, este formulario es solo para que obtengamos los datos ingresados ​​​​por el usuario. (Por supuesto, tampoco puede utilizar el formulario).

<h3>form1</h3>
<form id="form1">
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="number" name="age" placeholder="请输入年龄" />
  <input type="button" id="submitBtn1" onclick="request1()" value="提交" />
</form>

<h3>结果</h3>
<div id="result"></div>

Luego request1creamos un xhrobjeto en el método de solicitud, inicializamos la solicitud y monitoreamos la solicitud.

function request1() {
    
    
  // 创建xhr
  let xhr;
  if (window.XMLHttpRequest) {
    
    
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xhr = new XMLHttpRequest();
  } else {
    
    
    // IE6, IE5 浏览器执行代码
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }

  // 设置状态监听函数
  xhr.onreadystatechange = function () {
    
    
    // 4成功
    if (this.readyState !== 4) return;

    // xhr对象
    console.log(this);
    // 将响应结果放到div显示
    const resultDiv = document.getElementById("result");
    resultDiv.innerText = this.response;
  };

  // 初始化请求
  xhr.open("post", `http://localhost:3000/testPost`);
}

El formato de datos predeterminado del cuerpo de la solicitud es text/plainque no usamos comúnmente este tipo de datos en el desarrollo y generalmente usamos los siguientes tres formatos de datos, entonces, ¿cómo modificar el formato de datos que solicitamos? Luego tenemos que usar setRequestHeaderel método, que consiste en establecer nuestro encabezado de solicitud.

El formato de los datos de la solicitud es application/x-www-form-urlencoded

// 设置我们请求数据的格式
// 对于 发送数据方式2，这个设置请求数据可以免去，因为它会自动设置
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");

// 获取表单数据
const formData = new FormData(document.getElementById("form1"));
const name = formData.get("name");
const age = formData.get("age");

// 发送数据1
xhr.send(`name=${
      
      name}&age=${
      
      age}`);

// 发送数据方式2 直接借助 URLSearchParams 免去手动拼接参数
// const urlSearchParams = new URLSearchParams(formData);
// xhr.send(urlSearchParams);

Echemos un vistazo al postefecto de la solicitud y el resultado se devuelve correctamente.

El formato de los datos de la solicitud es application/josn

// 设置请求数据类型
xhr.setRequestHeader("Content-type","application/json");

// 获取表单数据
const formData = new FormData(document.getElementById("form1"));
const name = formData.get("name");
const age = formData.get("age");

// 发送json数据 需要转成字符串
xhr.send(JSON.stringify({
    
     name, age }));

Echemos un vistazo al postefecto de la solicitud y el resultado se devuelve correctamente.

El formato de los datos de la solicitud es multipart/form-data

Por lo general, usamos este formato de datos para cargar archivos y no se usa directamente para enviar datos de formularios simples.

// 可以不设置 因为new FormData会自动将请求头设置为这种格式
xhr.setRequestHeader("Content-type","multipart/form-data");

// 获取表单数据
const formData = new FormData(document.getElementById("form1"));

// 初始化请求 使用第二个接口 使用multer特殊处理
xhr.open("post", `http://localhost:3000/testPost2`);

// 发送json数据 需要转成字符串
xhr.send(formData);

Echemos un vistazo al postefecto de la solicitud y el resultado se devuelve correctamente.

asincrónico

AjaxEl valor predeterminado es asincrónico. Cuando openel tercer parámetro de nuestro método se establece en false, nuestra solicitud se establecerá en sincrónica. Muchos amigos piensan que la sincronización significa que el resultado de la respuesta es sendel valor de retorno del método, pero no es así. Lo síncrono y asíncrono aquí solo significa bloquear y no bloquear la ejecución de códigos posteriores. Los resultados de la respuesta deben obtenerse readystatechangeen el evento de escucha.

Veamos dos ejemplos

Primer vistazo a asincrónico

xhr.open(
  "get",
  `http://localhost:3000/testGet?name=${
      
      name}&age=${
      
      age}`,
  true
);

const result = xhr.send(null);
console.log(result);
console.log("后续代码");

Echemos un vistazo a la salida. Una solicitud asincrónica no bloqueará la ejecución de código posterior después de la solicitud, y sendel método no devolverá un resultado.

Veamos de nuevo la sincronización.

xhr.open(
  "get",
  `http://localhost:3000/testGet?name=${
      
      name}&age=${
      
      age}`,
  false
);

// 阻塞后续代码运行
const result = xhr.send(null);
console.log(result);
console.log("后续代码");

Echemos un vistazo a la salida. La solicitud síncrona bloqueará la ejecución del código subsiguiente. El código subsiguiente no se ejecutará hasta que la solicitud tenga un resultado, y el método no senddevolverá el resultado.

cancelar petición

Si la solicitud ya se emitió, el método XMLHttpRequest.abort() finalizará la solicitud. Cuando finaliza una solicitud, readyStatese establece en 0 y la solicitud statusse establece en 0.

xhr.abort();

manejo de errores

El evento se dispara cuando una solicitud encuentra un error error. Sin embargo, debe tenerse en cuenta que los errores devueltos por el backend no desencadenarán onerroreventos, como los devueltos por el backend 500 400. El evento solo se activará cuando la red se interrumpa o entre dominios onerror.

// 设置请求失败时的监听函数
// 当网络中断或者跨域时会触发onerror事件
xhr.onerror = function () {
    
    
  console.error(this);
};

AjaxResumen

1. Todo el proceso de solicitud es bastante engorroso desde la creación, el seguimiento, la inicialización de la solicitud y el envío de la solicitud, y la eficiencia de desarrollo y uso definitivamente no es alta.
2. El método de solicitud es relativamente limitado, solo se admiten solicitudes de obtención y publicación.
3. Promise no es compatible, y el resultado de la solicitud debe obtenerse a través de la función de monitoreo, y es fácil de anidar para solicitudes con dependencias .
4. El formato de datos transmitido por la solicitud es relativamente limitado y no es compatible con los objetos js nativos convencionales actuales (es necesario convertirlos en cadenas json).
5. Debe configurar manualmente el tipo de valor de retorno de respuesta; de lo contrario, los datos de tipo de texto se devolverán de forma predeterminada
6. Solicitud de cancelación de soporte

jQuery Ajax

jQuery AjaxAjaxNo es algo nuevo, sino una encapsulación del original , lo que lo hace más fácil de usar y más rápido de desarrollar.

$.ajax()

Antes de usar ajaxpara enviar una solicitud, debe realizar una serie de pasos, como crear, monitorear, inicializar la solicitud y enviar la solicitud, lo cual es muy problemático. En jQuery, un método puede hacerlo.

Veamos un ejemplo.

Primero importa la páginajQuery

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

Luego crea un formulario.

<h3>form1</h3>
<form id="form1">
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="number" name="age" placeholder="请输入年龄" />
  <input type="button" id="submitBtn1" onclick="request2()" value="提交" />
</form>
<h3>结果</h3>
<div id="result"></div>

Cuando se hace clic en el botón Enviar, enviamos una getsolicitud al servidor backend.

function request2() {
    
    
  $.ajax({
    
    
    url: "http://localhost:3000/testGet", // 规定发送请求的 URL。默认是当前页面。
    data: $("#form1").serialize(), // 规定要发送到服务器的数据。
    success(result) {
    
    
      console.log(result);
      $("#result").text(JSON.stringify(result));
    },
  });
}

Veamos el efecto. Los datos normalmente se obtienen y se devuelven

Tomemos postla solicitud como ejemplo para explicar $.ajax()el método en detalle.

function request2() {
    
    
  const formData = new FormData(document.getElementById("form1"));
  const name = formData.get("name");
  const age = formData.get("age");

  $.ajax({
    
    
    type: "POST", // 规定请求的类型（GET 或 POST） 默认GET
    url: "http://localhost:3000/testPost2", // 规定发送请求的 URL。默认是当前页面。
    // data: formData, // 上传文件需要用到，传送formData会自动设置contentType: "multipart/form-data"，我们需要设置contentType: false、processData: false
    // data: urlSearchParams, // 直接传递 URLSearchParams 对象 我们需要设置processData: false
    data: `name=${
      
      name}&age=${
      
      age}`, // 规定要发送到服务器的数据。支持这种search字符串类型。可以使用$("#form1").serialize()直接序列化出来
    // data: $("#form1").serialize(), // 把表单序列化成search字符串
    // data: $.param({ name, age }), // 把对象序列化成search字符串
    // data: { name, age }, // 支持对象类型
    // data: JSON.stringify({ name, age }), // 支持对象字符串类型。使用这种方式需要设置 contentType: "application/json"
    // contentType: "application/x-www-form-urlencoded", // 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
    // contentType: "application/json", // 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。
    // contentType: false, // 不设置，当data是FormData是需要设置。
    dataType: "", // 预期的服务器响应的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断。可以设置json、text、xml、html等
    // processData: false, // 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。
    beforeSend(xhr) {
    
    
      // 发送请求前运行的函数
      console.log(xhr);
    },
    success(result) {
    
    
      // 请求成功运行的函数
      console.log(result);
      $("#result").text(JSON.stringify(result));
    },
    error(xhr, status, error) {
    
    
      // 如果请求失败要运行的函数
      // 后端返回错误码也会进入该方法 比如 400/401/500
      console.log(error);
    },
    complete(xhr, status) {
    
    
      // 请求完成时运行的函数，不管成功或者失败
      console.log(status);
    },
  });
}

Aquí nos enfocamos en data, contentType, processData.

dataSolo admite URLSearchParams, FormDataesta name=${name}&age=${age}cadena de búsqueda, objeto, cadena de objeto de cinco formas. Y necesidad y contentTypecorrespondiente.

contentType: "application/json"En ese momento, solo se puede pasar datala forma de cadena de objeto .

contentType: "application/x-www-form-urlencoded"En ese momento, datapuede ser una cadena de búsqueda o un objeto, porque el objeto se convertirá automáticamente en un carácter de búsqueda.

Podemos deletrear manualmente la cadena de búsqueda y, por supuesto, hay un método más conveniente, que es $.serialize()和$.param()el método de uso.

data: $("#form1").serialize() // 表单序列化
data: $.param({
    
     name, age }) // 对象序列化

Cuando el parámetro que pasamos dataes URLSearchParamsel formato, debe configurarse processDatapara falsedesactivar la conversión automática. De lo contrario, se informará un error.

Cuando el parámetro que pasamos dataes FormDataun formato (generalmente al cargar un archivo), debe configurarse processDatapara falsedesactivar la conversión automática. y también debe contentTypeestablecerse en false. De lo contrario, se informará un error.

Por supuesto, si cree que el $.ajax()método anterior es demasiado problemático, también podemos usar los métodos convenientes correspondientes a la solicitud $.get(), $.post(), $.getJSON().

$.get()

$.get(URL,data,function(data,status,xhr),dataType)El método carga datos del servidor mediante una solicitud HTTP GET. Tiene cuatro parámetros.

1. Se requiere URL. Especifica la URL que necesita solicitar.

2. los datos son opcionales Especifica los datos enviados al servidor con la solicitud. Solo se admiten cadenas de consulta y tipos de objetos .

3. La función es opcional. Especifica una función para ejecutar cuando la solicitud se realiza correctamente.

4. tipo de datos es opcional. Especifica el tipo de datos esperado de la respuesta del servidor. Por defecto, jQuery juzgará inteligentemente

Aquí simplemente intentamos

$.get(
  "http://localhost:3000/testGet",
  $("#form1").serialize(),
  function success(data, status, xhr) {
    
    
    console.log(data);
    $("#result").text(JSON.stringify(data));
  },
  "json"
);

puede obtener el resultado correctamente

$.post()

$.post(URL,data,function(data,status,xhr),dataType)El método carga datos del servidor mediante una solicitud HTTP POST. Tiene cuatro parámetros.

1. Se requiere URL. Especifica la URL que necesita solicitar.

2. los datos son opcionales Especifica los datos enviados al servidor con la solicitud. Solo se admiten cadenas de consulta y tipos de objetos .

3. La función es opcional. Especifica una función para ejecutar cuando la solicitud se realiza correctamente.

4. tipo de datos es opcional. Especifica el tipo de datos esperado de la respuesta del servidor. Por defecto, jQuery juzgará inteligentemente

Aquí simplemente intentamos

$.post(
  "http://localhost:3000/testPost",
  $("#form1").serialize(),
  function success(data, status, xhr) {
    
    
    console.log(data);
    $("#result").text(JSON.stringify(data));
  },
  "json"
);

puede obtener el resultado correctamente

$.getJSON()

$.getJSON(url,data,function(data,status,xhr))El método obtiene datos JSON mediante una solicitud AJAX HTTP GET. Tiene tres parámetros.

1. Se requiere URL. Especifica la URL que necesita solicitar.

2. los datos son opcionales Especifica los datos enviados al servidor con la solicitud. Solo se admiten cadenas de consulta y tipos de objetos .

3. La función es opcional. Especifica una función para ejecutar cuando la solicitud se realiza correctamente.

Aquí simplemente intentamos

$.getJSON(
  "http://localhost:3000/testGet",
  $("#form1").serialize(),
  function success(data, status, xhr) {
    
    
    console.log(data);
    $("#result").text(JSON.stringify(data));
  }
);

puede obtener el resultado correctamente

Se puede encontrar que aunque el método de conveniencia es más conveniente de usar, todavía existen muchas restricciones, especialmente el formato de transferencia de datos, que solo admite dos tipos de cadenas de consulta y objetos . Y no hay función de devolución de llamada para errores de solicitud, solo funciones de devolución de llamada exitosas.

jQuery AjaxResumen

1. En comparación con Ajax nativo, encapsula una serie de métodos, que es mucho más conveniente de usar.
2. En comparación con Ajax nativo, el formato de datos de solicitud se ha mejorado y se admiten objetos js nativos. Automáticamente convertirá el objeto nativo en una cadena de búsqueda y lo pasará.
3. Promise no es compatible, el resultado de la solicitud debe obtenerse a través de una función de devolución de llamada y el anidamiento es fácil de realizar para solicitudes con dependencias.
4. No es obligatorio establecer manualmente el tipo de valor de retorno de respuesta, jQuery Ajaxse establecerá automáticamente de acuerdo con el resultado devuelto.
5. No parece admitir solicitudes de cancelación

buscar

fetch(url, config)El método se utiliza para iniciar una solicitud para obtener un recurso. Devuelve un promise, que promisese devolverá al objetoresolve después de que se responda a la solicitud.Response

fetch()No es una Ajaxencapsulación nativa, sino una biblioteca de solicitudes compatible de forma nativa con los navegadores.

Veamos un ejemplo sencillo

fetch(`http://localhost:3000/testGet?name=randy&age=27`, {
    
    })
  .then((response) => {
    
    
    console.log(response);
    return response.json();
  })
  .then((res) => {
    
    
    console.log(res);
  });

salida responseyres

Se puede encontrar que fetch()después de completar la solicitud, el resultado no se devuelve directamente, sino un objeto de respuesta . Corresponde a la respuesta HTTP del servidor. Nos centraremos en este objeto más adelante. responsees un Streamobjeto , necesitamos llamar a algunos de sus métodos para obtener los datos que queremos. Por ejemplo, lo llamamos arriba response.json()La función de este método es convertir los datos en jsondatos formateados.

objeto de respuesta

OK

Response.okEl atributo devuelve un valor booleano que indica si la solicitud es exitosa, truecorrespondiente a los códigos de estado 200 a 299 de la solicitud HTTP y falsecorrespondiente a otros códigos de estado.

estado

Response.statusLa propiedad devuelve un número que representa el código de estado de la respuesta HTTP (por ejemplo, 200 para una solicitud exitosa).

estadoTexto

Response.statusTextLa propiedad devuelve una cadena que indica la información de estado de la respuesta HTTP (por ejemplo, el servidor devolvió "OK" después de que la solicitud se realizó correctamente).

URL

Response.urlpropiedad devuelve la URL solicitada. Si hay un salto en la URL, esta propiedad devuelve la URL final.

tipo

Response.typeLa propiedad devuelve el tipo solicitado. Los posibles valores son los siguientes:

• basic: Solicitudes ordinarias, es decir, solicitudes del mismo origen.
• cors: solicitud de origen cruzado.
• error: Errores de red, principalmente para Service Workers.
• opaque: si el atributo fetch()solicitado typese establece en no-cors, se devolverá este valor.
• opaqueredirect: si el atributo fetch()solicitado redirectse establece en manual, se devolverá este valor.

redirigido

Response.redirectedLa propiedad devuelve un valor booleano que indica si la solicitud se ha redirigido.

encabezados

ResponseEl objeto también tiene una Response.headerspropiedad que apunta a un objeto Headers , correspondiente a todos los encabezados de la respuesta HTTP.

HeadersEl objeto proporciona los siguientes métodos para manipular encabezados.

• Headers.get(): De acuerdo con el nombre de la clave especificada, devuelve el valor de la clave.
• Headers.has(): Devuelve un valor booleano que indica si se incluye un encabezado.
• Headers.set(): establece el nombre de clave especificado como un nuevo valor de clave, si el nombre de clave no existe, se agregará.
• Headers.append(): Agregar encabezados.
• Headers.delete(): Eliminar encabezado.
• Headers.keys(): Devuelve un recorrido que puede recorrer todos los nombres de clave a la vez.
• Headers.values(): Devuelve un corredor que puede recorrer todos los valores clave a su vez.
• Headers.entries(): Devuelve un recorrido que puede recorrer todos los pares clave-valor ( [key, value]) en secuencia.
• Headers.forEach(): Los encabezados se recorren a su vez, y la función de parámetro se ejecutará una vez para cada encabezado.

Por ejemplo, para obtener la respuestaContent-Type

response.headers.get('Content-Type'); // application/json; charset=utf-8

método de lectura de contenido

Como dijimos anteriormente, el contenido de la respuesta está response.bodyarriba, pero bodyes un ReadableStreamobjeto y necesitamos una mayor conversión para obtener el valor que queremos.

¿Cuáles son los métodos de conversión? Podemos llamar a diferentes métodos de lectura según los diferentes tipos de datos devueltos por el servidor.

• response.text(): obtener la cadena de texto.
• response.json(): obtener objeto JSON.
• response.blob(): Obtenga un objeto Blob binario.
• response.formData(): Obtenga el objeto de formulario FormData.
• response.arrayBuffer(): Obtenga un objeto ArrayBuffer binario.

parámetro de configuración

fetch(url, config)Hay dos parámetros, urlque son la dirección de solicitud, así que no diré más sobre esto, centrémonos en eso config.

Aquí presentaré varios configparámetros importantes.

método

método: el método de solicitud HTTP, GET, POST, DELETE, PUTestán todos establecidos en esta propiedad.

encabezados

headers: un objeto que se utiliza para personalizar los encabezados HTTP. Como los de uso común content-type.

cuerpo

cuerpo: el cuerpo de datos de la solicitud POST. Las solicitudes Get y Head no pueden establecer este parámetro .

Echemos un vistazo a qué tipos de datos de solicitud obtienen soporte. Veamos un ejemplo de la prueba del autor.

fetch(`http://localhost:3000/testPost`, {
    
    
  method: "POST",
  // body: "纯文本",
  // body: formData, // 会自动设置 content-type 为 multipart/form-data
  // body: urlSearchParams, // 会自动设置 application/x-www-form-urlencoded
  // body: `name=${name}&age=${age}`, // 需要手动设置 "content-type": "application/x-www-form-urlencoded"
  body: JSON.stringify({
    
     name, age }), // 需要手动设置 "content-type": "application/json"
  // 还支持  Blob 或 arrayBuffer，使用的比较少 这个笔者就不举例了
  headers: {
    
    
    // "content-type": "application/x-www-form-urlencoded",
    "content-type": "application/json",
  },
})
  .then((response) => {
    
    
    console.log(response);
    // 转成字符串文本
    return response.text();
  })
  .then((res) => {
    
    
    const resultDiv = document.getElementById("result");
    resultDiv.innerText = res;
  });

fetchtext、FormData、URLSearchParams、search字符串、json字符串、Blob、arrayBufferEl tipo de datos de la solicitud en el formato es compatible y, bodyde forma predeterminada, 'text/plain;charset=UTF-8enviará los datos de la solicitud en el formato.

Cuando el formato de datos FormDataes , se establecerá automáticamente content-typecomo el encabezado de solicitud multipart/form-datade .

Cuando el formato de datos URLSearchParamses , se establecerá automáticamente content-typecomo el encabezado de solicitud multipart/x-www-form-urlencodedde .

Los datos del formato de transferencia jsondeben convertirse en jsonuna cadena y también debe "content-type": "application/json"configurarse .

modo

modo: especifica el modo de la solicitud. Hay tres valores posibles: cors, mismo origen, no-cors

• cors: El valor predeterminado, que permite solicitudes de origen cruzado.
• same-origin: Solo se permiten solicitudes del mismo origen.
• no-cors: el método de solicitud está limitado a GET, POST y HEAD, y solo se pueden usar algunos encabezados simples, y no se pueden agregar encabezados complejos entre dominios, lo que equivale a la solicitud simple que se puede enviar al enviar un formulario.

cache

cacheLos atributos especifican cómo manejar el almacenamiento en caché. Los posibles valores son los siguientes:

• default: el valor predeterminado, primero busque solicitudes coincidentes en el caché.
• no-store: Solicite el servidor remoto directamente sin actualizar el caché.
• reload: solicite directamente el servidor remoto y actualice el caché.
• no-cache: compare el recurso del servidor con el caché local, use el recurso del servidor solo si hay una nueva versión; de lo contrario, use el caché.
• force-cache: Prioridad de caché, solo cuando no hay caché, se solicita el servidor remoto.
• only-if-cached: solo verifique el caché, si no existe en el caché, se devolverá un error 504.

cartas credenciales

credentialsLa propiedad especifica si enviar cookies. Los posibles valores son los siguientes:

• same-origin: el valor predeterminado, las cookies se envían para solicitudes del mismo origen y no se envían para solicitudes de origen cruzado.
• include: Las cookies siempre se envían independientemente de las solicitudes del mismo origen o de dominios cruzados.
• omit: Nunca enviar.

Cómo juzgar si la solicitud tiene éxito

fetch()Después de enviar la solicitud, hay un punto muy importante a tener en cuenta: solo cuando haya un error de red o cuando no se pueda realizar la conexión, se fetch()informará un error, en otros casos, no se informará ningún error, pero se considerará la solicitud. exitoso. Es decir, aunque el código de estado devuelto por el servidor sea 4xx o 5xx, fetch()no se reportará ningún error (es decir, la Promesa no cambiará a rejectedestado ).

Entonces, ¿cómo juzgar si la solicitud es exitosa?

El primer método es Response.statusobtener el código de estado real de la respuesta HTTP a través de atributos para determinar si la solicitud es exitosa. Eso es para juzgar si el estado está entre 200-300.

async function fetchTest() {
    
    
  let response = await fetch(`http://localhost:3000/testGet?name=randy&age=27`);
  if (response.status >= 200 && response.status < 300) {
    
    
    // 请求成功
    return await response.json();
  } else {
    
    
    // 请求失败
    throw new Error(response.statusText);
  }
}

Otra forma es juzgar response.oksi lo es true. Porque el valor cuando statusestá en 200-300el medio es .oktrue

if (response.ok) {
    
    
 // 请求成功
} else {
    
    
 // 请求失败
}

cancelar petición

fetch()Después de enviar la solicitud, si desea cancelarla a la mitad, también es compatible y debe usar AbortControllerel objeto.

vamos a demostrar

let controller = new AbortController();
let signal = controller.signal;

fetch(`http://localhost:3000/testGet?name=${
      
      name}`, {
    
    
  signal: controller.signal, // 需要传递signal参数
});

// 监听取消
// 也可以通过`controller.signal.aborted`属性判断取消信号是否已经发出。
signal.addEventListener("abort", () => console.log("signal abort!"));

// 取消
controller.abort();

Cabe señalar aquí que existe una correspondencia uno a uno controller、signalcon fetchlos parámetros de solicitud signal. Cualquiera que llame controller.abort()cancelará la solicitud correspondiente. Por supuesto, también puede usar el mismo controllerpara varias solicitudes, por lo que puede cancelar varias solicitudes a la vez.

buscarResumen

1. Soporte promise, más conveniente, rápido y eficiente de usar.
2. La respuesta obtenida debe transformarse aún más para obtener el resultado que queremos.
3. El error del código de estado http debe ser juzgado por nosotros mismos , ya que los códigos de error devueltos por el backend, como 400 y 500, se resolverán en el lado de búsqueda y se tratarán como exitosos.
4. El formato de datos que pasa la solicitud es limitado y no admite objetos js nativos.
5. El método de solicitud también se ha ampliado, no solo admite obtener, publicar, sino que también admite poner, eliminar y otros métodos de solicitud
6. Las solicitudes get y head no admiten el paso de parámetros del cuerpo de la solicitud, y los parámetros solo se pueden concatenar después de la ruta de la solicitud.
7. Solicitud de cancelación de soporte

Echemos un vistazo a los más utilizados.axios

axios

axiosNo es algo nuevo, sino una biblioteca HTTP basada en promesas que encapsula Ajax nativo, que se puede usar en navegadores y node.js.

Así que tenemos que introducirlo antes de usarlo.

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Veamos un ejemplo sencillo

<h3>axios form</h3>
<form id="form1">
  <input type="text" name="name" placeholder="请输入名字" />
  <input type="number" name="age" placeholder="请输入年龄" />
  <input type="button" id="submitBtn1" onclick="request4()" value="提交" />
</form>
<h3>结果</h3>
<div id="result"></div>

Usamos axios(config)para enviar una solicitud.

function request4() {
    
    
  const formData = new FormData(document.getElementById("form1"));
  const name = formData.get("name");
  const age = formData.get("age");
  const urlSearchParams = new URLSearchParams(formData);

  axios({
    
    
    url: "http://localhost:3000/testGet",
    params: urlSearchParams,
  }).then((res) => {
    
    
    // 响应数据在data中
    console.log(res.data);
    const resultDiv = document.getElementById("result");
    resultDiv.innerText = JSON.stringify(res.data);
  });
}

Veamos el efecto

Para axiosel enfoque configy los resultados de la respuesta response, analicémoslos uno por uno.

configuración

Aquí presento varios configparámetros importantes.

URL

urles la URL del servidor para la solicitud

método

Los métodos de solicitud HTTP, GET, POST, están DELETEtodos PUTestablecidos en esta propiedad.

baseURL

baseURLse urlantepondrá a menos que urlsea una URL absoluta. Nuestra configuración baseURLse puede simplificar configurando .url

encabezados

Establecer encabezados de solicitud, como los comunes content-type. No diremos mucho sobre esto.

parámetros

paramsson los parámetros de URL que se enviarán con la solicitud. Debe ser un objeto simple o un objeto URLSearchParams.

paramsEl parámetro axios establecido en él se convertirá automáticamente en una cadena de búsqueda y se empalmará en la parte posterior de la dirección de solicitud.

datos

datason los datos enviados como cuerpo de la solicitud. Se aplica solo a los métodos de solicitud 'PUT', 'POST' y 'PATCH'.

transformRequestCuando no se establece , debe ser uno de los siguientes tipos:

• cadena, objeto simple, ArrayBuffer, ArrayBufferView, URLSearchParams
• Específico del navegador: FormData, File, Blob
• Exclusivo de Node: Streams

Cuando el formato de datos FormDataes axios, se establecerá automáticamente en el encabezado de solicitud decontent-type .multipart/form-data

Cuando el formato de datos URLSearchParamses axios, se establecerá automáticamente en el encabezado de solicitud decontent-type .application/x-www-form-urlencoded

Cuando el formato de datos plain objectes axios, se establecerá automáticamente en el encabezado de solicitud decontent-type .application/json

Cuando desea application/x-www-form-urlencodedtransferir datos en formato, generalmente hay tres métodos.

1. Puede pasar URLSearchParamsparámetros. axios se configurará automáticamente content-typecomo application/x-www-form-urlencodedel encabezado de solicitud de .
2. Pass plain object, pero debe configurar content-typemanualmente application/x-www-form-urlencodedel encabezado de la solicitud.
3. qsLa cadena de búsqueda es generada por la biblioteca para pasar. Porque cuando el formato de datos stringes axios, se establecerá automáticamente encontent-type el encabezado de la solicitud.application/x-www-form-urlencoded

Cuando desee enviar una cadena simple, debe configurar manualmente el encabezado de la solicitud content-typeen text/plain.

tipo de respuesta

responseTypeIndica el tipo de datos de la respuesta del servidor, que puede ser 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'. Después de la configuración, axiosnuestros resultados de respuesta se convertirán automáticamente.

se acabó el tiempo

timeoutEspecifique el número de milisegundos para el tiempo de espera de la solicitud (0 significa que no hay tiempo de espera). La solicitud será abortada si toma más timeoutde

con Credenciales

withCredentialsIndica si debe llevarse en solicitudes entre dominios cookie. El valor predeterminado es false.

maxContentLength

maxContentLengthDefine el tamaño máximo permitido para el contenido de la respuesta

Después de entender la configuración, veamos la respuesta.response

respuesta

datos

dataLa respuesta proporcionada por el servidor. Nuestros datos de respuesta se obtienen en esta propiedad.

estado

statusEl estado HTTP de la respuesta del servidor. Por ejemplo, el éxito devolverá 200.

estadoTexto

statusTextInformación de estado HTTP de la respuesta del servidor. Por ejemplo, el éxito volverá "OK".

encabezados

headersencabezado de respuesta del servidor

configuración

Información de configuración solicitada.

pedido

El objeto de solicitud, debido a que axioses el XMLHttpRequestpaquete correcto, es un XMLHttpRequestobjeto.

crear instancia

Por lo general, no lo usamos directamente axios, sino que creamos axiosuna instancia. axiosAdmite la creación de una nueva axiosinstancia .

const instance = axios.create({
    
    
  baseURL: '/api',
  timeout: 1000,
  headers: {
    
    'content-type': 'application/json'}
});

// ...

Crear una instancia tiene dos beneficios

En primer lugar, podemos configurar la misma configuración al crear una instancia, por lo que no es necesario repetir la configuración en cada solicitud posterior.

En segundo lugar, podemos tener varias instancias de solicitud en un sistema y cada instancia puede tener su propia configuración única.

método de instancia

Cada axiosinstancia puede tener su propio requestmétodo de solicitud y también hay métodos de conveniencia.

Los que se encuentran aquí configse fusionarán con los que se usaron para crear la instancia anterior configy se sobrescribirá la misma configuración.

instancia.solicitud(config)

Este método es similar axios(config).

instancia.get(url, config)

Enviar una solicitud de obtención directamente

instancia.eliminar (url, configuración)

Enviar una solicitud de eliminación directamente

instancia.head(url, config)

Enviar una solicitud de cabeza directamente

instancia.opciones(url, config)

Enviar una solicitud de opciones directamente

instancia.post(url, datos, configuración)

Envíe una solicitud de publicación directamente, el segundo parámetro son los datos de la solicitud.

instancia.put(url, datos, configuración)

Envíe una solicitud de venta directamente y el segundo parámetro son los datos de la solicitud.

instancia.patch(url, datos, configuración)

Envíe una solicitud de parche directamente, el segundo parámetro son los datos de la solicitud.

método concurrente

axiosTambién se admiten solicitudes simultáneas.

Por ejemplo, envíe dos solicitudes a la vez.

axios
  .all([
    axios.get("http://localhost:3000/testGet", {
    
    
      params: {
    
     name: "jack" },
    }),
    axios.get("http://localhost:3000/testGet", {
    
    
      params: {
    
     name: "tom" },
    }),
  ])
  .then(
    axios.spread((res1, res2) => {
    
    
      console.log(res1);
      console.log(res2);
    })
  )
  .catch((err) => {
    
    
    console.log(err);
  });

Enviando axios.all([请求1， 请求2...])solicitudes en lotes, axios.spread((请求1结果，请求2结果...) => {})obteniendo resultados de solicitudes. Tenga en cuenta que cuando falla una de las solicitudes y falla toda la solicitud , catchse devolverá la incorrecta promise.

manejo de errores

axiosAutomáticamente analizará el http statuscódigo , si statusestá entre 200 y 300, resloveserá exitoso, y los demás serán rechazados reject.

Por supuesto, si desea personalizar el statusrango de éxito, puede configurar el validateStatusmétodo de parámetro de solicitud

validateStatus: function (status) {
    
    
    return status >= 200 && status < 300; // 默认是200-300
  },

Para el manejo de errores, generalmente hay dos formas

// 通过 promise 的 catch
axios("http://localhost:3000/testGet", {
    
    
  params: urlSearchParams,
})
  .then((res) => {
    
    
    console.log(res);
  })
  .catch((err) => {
    
    
    console.log(err);
  });

// 通过 try catch
try {
    
    
  const res = await axios("http://localhost:3000/testGet", {
    
    
    params: urlSearchParams,
  });
  console.log(res);
} catch (err) {
    
    
  console.log(err);
}

cancelar petición

axios()Después de enviar la solicitud, si desea cancelarla a la mitad, también es compatible y debe usar CancelTokenel objeto. En términos generales, fetchla configuración de y es muy similar.

vamos a demostrar

const CancelToken = axios.CancelToken;
const source = CancelToken.source();

axios("http://localhost:3000/testGet", {
    
    
  cancelToken: source.token, // 需要传递cancelToken
});

// 取消请求（message 参数是可选的）
source.cancel("Operation canceled by the user.");

Cabe señalar aquí que existe una correspondencia uno a uno CancelTokencon axioslos parámetros de solicitud cancelToken. Cualquiera que llame source.cancel()cancelará la solicitud correspondiente. Por supuesto, también puede usar el mismo cancelTokenpara varias solicitudes, por lo que puede cancelar varias solicitudes a la vez.

axiosTambién es compatible con la segunda forma de cancelar la solicitud.

const CancelToken = axios.CancelToken;
let cancel;

axios("http://localhost:3000/testGet", {
    
    
  cancelToken: new CancelToken(function executor(c) {
    
    
    // executor 函数接收一个 cancel 函数作为参数
    cancel = c;
  }),
});

// 取消请求（message 参数是可选的）
cancel("Operation canceled by the user.");

axiosParece fetchque no hay función de escucha de cancelación.

axiosResumen

1. Soporte promise, más conveniente, rápido y eficiente de usar.
2. A través de la configuración responseType, nuestra respuesta se puede convertir automáticamente al formato correspondiente, básicamente no se requiere procesamiento manual.
3. El error del código de estado http no necesita ser juzgado por nosotros mismos . De manera predeterminada, solo el estado entre 200 y 300 se considerará exitoso.
4. El parámetro de datos del cuerpo de la solicitud admite muchos formatos de datos y establece automáticamente el content-typevalor solicitado de acuerdo con el formato de los datos que pasamos, lo cual es muy inteligente.
5. El método de solicitud también se ha ampliado, no solo admite obtener, publicar, sino que también admite poner, eliminar y otros métodos de solicitud. Y proporcione un método conveniente correspondiente.
6. Los parámetros de la ruta no son obligatorios para empalmarse manualmente después de la ruta, pero se pueden configurar a través de params y axios los manejará automáticamente.
7. Proporciona intercepción de solicitudes e intercepción de respuestas, que pueden procesar solicitudes y respuestas de manera unificada, y la eficiencia del desarrollo será mayor.
8. Se admiten solicitudes de cancelación.

Si está interesado en la aplicación en , puede echar un vistazo al axiospaquete TS Axios escrito por el autor antes.TypeScrit

Código de interfaz de back-end

La interfaz es muy simple, se usa node + expresspara construir

const express = require("express");
const app = express();
var cors = require("cors");

// 允许跨域
app.use(cors());

// 解析表单中 application/x-www-form-urlencoded 格式的数据
app.use(express.urlencoded({
    
     extended: false }));

// 解析表单中application/json格式的数据
app.use(express.json());

// 解析表单中multipart/form-data格式的数据
const multer = require("multer");
const upload = multer();

app.get("/testGet", function (req, res, next) {
    
    
  res.json(req.query);
});

app.post("/testPost", function (req, res, next) {
    
    
  // 将请求体数据直接返回
  res.send(req.body);
});

// 特殊处理multipart/form-data格式的数据
app.post("/testPost2", upload.none(), function (req, res, next) {
    
    
  // 将请求体数据直接返回
  res.send(req.body);
});

app.listen(3000, () => {
    
    
  console.log("serve running on 3000");
});

posdata

Gracias amigos por mirar pacientemente. Este artículo son notas de estudio personal del autor. Si hay alguna falacia, háganmelo saber. ¡Muchas gracias! Si este artículo es útil para usted, síganos y haga clic en Me gusta ~, ¡su apoyo es la motivación para que el autor siga actualizando!