Este artículo guía a los principiantes de axios fuera del smog en la introducción detallada y el uso básico de axios (1)

Tabla de contenido

Uso básico de solicitudes get y post en axios

Introducción a los axios

Creo que, como jugador de front-end, es absolutamente necesario enviar solicitudes de red http. En este momento, utilizaremos una API proporcionada por el navegador, que es Ajax. Sin embargo, el uso de Ajax requiere que creemos una nueva instancia XML (minion) a través del constructor XMLHttpRequest cada vez, luego preparemos el cuerpo de la solicitud y enviemos la solicitud http, y finalmente monitoreemos el estado a través del onreadystatechange de XHR y obtengamos los .datos Si se usa Ajax en varios lugares, la cantidad de código es muy complicada y el mantenimiento también es muy difícil. Al igual que usamos JS nativo para el desarrollo, la escalabilidad y la capacidad de mantenimiento no están garantizadas, el trabajo en equipo es difícil y la eficiencia del desarrollo es baja. En este caso, nuestro JS nativo de front-end tiene un marco desarrollado para nosotros por nuestros predecesores, luego Ajax también tiene su propio marco: Axios.

Axios es una biblioteca de solicitud de red basada en promesas para navegadores y node.js. Debido a que las solicitudes de Ajax son asíncronas, su encapsulación se implementa en función de la promesa, una API especialmente diseñada para manejar el procesamiento asíncrono. Entonces, en la recepción de datos posterior, generalmente operamos en .then.

Axios tiene las siguientes características:

1. Cree XMLHttpRequests desde el navegador Axios ha creado un nuevo objeto de instancia para nosotros en el paquete para su uso posterior. No nos importa la creación de axios durante el uso.

2. Crear una solicitud http desde node.js nos permite usarla directamente en el entorno del nodo.

3. La API Promise es compatible , porque axios es una operación de encapsulación basada en promesa, por lo que no es necesario que nos preocupemos demasiado por la sincronización y la asincronía en el uso posterior.

4. Interceptar solicitudes y respuestas Axios nos proporciona una potente API de interceptación de solicitudes y respuestas, que nos permite definir nuestras propias operaciones lógicas antes de enviar solicitudes y devolver datos.

5. Para transformar los datos de solicitud y respuesta , a través de API como transformRequest y transformResponseapi proporcionadas por axios, el cuerpo de datos puede transformarse arbitrariamente durante el envío y la respuesta.

6. Cancele la solicitud , use la API cancelToken para cancelar la solicitud enviada la última vez, generalmente para lidiar con la situación en la que el usuario envía la solicitud frenéticamente, similar a la limitación, la próxima solicitud no se permitirá hasta que el servidor responda a los datos .

7. Convierta automáticamente los datos JSON Los datos devueltos por axios son directamente del tipo de objeto JS, por lo que no necesitamos usar el método de cadena a objeto de JSON.parse.

8. El cliente admite la defensa contra XSRF

Introducción de axios

Si usa axios con archivos html, puede introducirlos a través del siguiente código.

<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.1.3/axios.min.js"></script>

Si se usa en el proyecto, solo npm install axios para instalarlo.

Uso básico de solicitudes get y post en axios

Lo mismo es una solicitud get, que se puede implementar de dos formas en axios.

1. Realizado llamando a la función get, el parámetro aquí puede ser una cadena de caracteres empalmados detrás de la ruta de la URL, o se puede pasar un objeto de configuración {params:{parameter name: value}}

axios.get('http://localhost:3000/user?ID=12345')
  .then((response) => {
    // 处理成功情况
    console.log(response);
  })
  .catch((error) =>  {
    // 处理错误情况
    console.log(error);
  })

// 如果不写.get的话，默认是get请求
axios('/user,{params:{ID: 12345}}).then((response) => {})

2. Al llamar directamente a la implementación de axios, aquí se pasa un objeto de configuración.

axios({
	method: "GET",
	url: "http://localhost:3000/user?ID=12345",
    // 或者
    // url: "http://localhost:3000/user",
    // {params:{ID：12345}}
}).then((response) => {
    // 处理成功情况
    console.log(response);
  })
  .catch((error) =>  {
    // 处理错误情况
    console.log(error);
  })

Axios también admite la escritura asíncrona/en espera

async function getUser() {
  try {
    const response = await axios.get('/user?ID=12345');
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

Las solicitudes de publicación generalmente se usan para enviar datos al servidor, veamos cómo se escribe:

axios({ // 发送AJAX请求
	// 请求类型
	method: "POST",
	// 需要提交数据的URL路径
	url: "http://localhost:3000/posts",
	// 设置发送的数据体(新增内容)
	data: {
	    title: "已经步入深秋了，树叶渐渐的开始下落了！",
	    author: "不读诗意",
    }
}).then((response) => {
    console.log(response);
})
.catch((error) => {
    console.log(error);
})

También hay una serie de estudios en profundidad de axios en el tema, ¡espero que pueda ser útil!