Breve introducción de axios y el uso de axios en vue (detallado)

Directorio de artículos

Si quieres aprender algo, ¡lo más importante es tener una comprensión profunda de ello! ! !
Axios es una especie de encapsulación de la tecnología ajax a través de la promesa, similar a la encapsulación de ajax de jQuery, pero usamos vue para desarrollar puramente usando ajax, pero es muy irrazonable introducir el JQuery completo (el esquema de empaque personalizado no puede disfrutar de CDN Servicio) no recomendado! ! !

Axios en breve

Axios es en realidad un ajax encapsulado, que es esencialmente una encapsulación de XHR nativo, excepto que es una versión de implementación de Promise y cumple con las últimas especificaciones de ES.
Características de axios:
1. Crear XMLHttpRequest desde el navegador
2. API Promise de soporte
3. Soporte de cliente para evitar CSRF
4. Proporcionar algunas interfaces de solicitud simultáneas (importante, conveniente para muchas operaciones)
5. Crear desde node.js Solicitud HTTP
6. Interceptar solicitud y respuesta
7. Convertir solicitud y datos de respuesta
8. Cancelar solicitud
9. Convertir automáticamente datos JSON
PS: Prevenir CSRF: En pocas palabras, deje que cada solicitud que haya traído una de la cookie Clave, de acuerdo con la misma política de origen del navegador, el sitio web falso no puede obtener la clave en su cookie. De esta manera, el fondo puede identificar fácilmente si la solicitud es una entrada engañosa del usuario en el sitio web falso y adoptar la estrategia correcta. Se pueden encontrar más detalles en este artículo.

axios contrasta con ajax

fragmento de código ajax:

$.ajax({
          url:'/frontMenu',
          type:'post',
          dataType:'json',//xml,html,script,jsonp,text类型
          data:{
                  menuName:this.menuName //按具体模块是否需要传参
              }, 
           success:function(response){
                          console.log(response)
                   }
           })

(ajax se da cuenta de la actualización de los datos parciales de la página web)
fragmento de código axios (la API de axios que uso aquí):

 axios({
       url:'/frontMenu',
       method:'post',
       responseType:'json',//默认为json，
       data:{
                  menuName:this.menuName //按具体模块是否需要传参
            } })
               .then(funtion(response){
                   console.log(response)
                })
                  .catch(function(error){
                        console.log(error)
                   })

Agregue el responseType de axios:

Valor (tipo de respuesta)	tipo de datos
''	DOMString
arraybuffer	Objeto ArrayBuffer (matriz con tipo)
gota	Objeto Blob (además de almacenar datos binarios, también puede establecer el tipo MINE de estos datos)
documento	Objeto de documento
json	Objeto JavaScript, analizado a partir de una cadena JSON devuelta por el servidor
texto	DOMString

Pros y contras

ajax:
1. Ajax está dirigido principalmente al modelo de programación MVC. Todavía falta en el framework MVVC de front-end actual.
2. Basado en el desarrollo nativo de XHR, la arquitectura de XMR en sí no está clara, aunque ya existe fetch (pero axios ha ayudado Nuestro empaque es lo suficientemente conveniente, ¿por qué tenemos que hacer un gran esfuerzo para aprender a buscar y buscar no es tan cómodo de usar, debe estar empaquetado?

axios es la característica mencionada anteriormente y proporciona encapsulación concurrente y tamaño pequeño.

ps: en cuanto a la recuperación, se utiliza el objeto de promesa en ES6, y está diseñado en función de la promesa Pero no es una encapsulación de ajax sino js nativos y no usa el objeto XMLHttpBequest.

Hablando de esto, ¿realmente quieres saber cómo usar axios en proyectos específicos? (๑￫‿ ฺ ￩๑)

Uso de axios

Vue originalmente tenía un complemento vue-resource recomendado oficialmente para ajax, pero desde que Vue se actualizó a 2.0, el funcionario ya no actualiza vue-resource. Todos los proyectos actuales de Vue eligen axios para completar las solicitudes de ajax

instalación axios

Introduzca axios en el directorio de archivos correspondiente npm install --save axios vue-axios
o
use cdn :
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Método uno (modificar la cadena del prototipo):
en el archivo mian

import axios from 'axios'

Vue.prototype.$axios = axios  //改变

Cuando se usa el componente

      that.$axios
        .post("/frontMenu",{
                  menuName:this.menuName //按具体模块是否需要传参
        })
        .then(response => {
          console.log(response)
        })
        .catch(function(error) {
          console.log(error)
        });

El método dos (combinado con vue-axios)
vue-axios está escrito en forma de complementos de vue. Luego, combinado con vue-axios, puede usar el método vue.use.
En el archivo principal

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios,axios);

Utilizado en componentes

      this.axios.post('/frontMenu',{
                  menuName:this.menuName //按具体模块是否需要传参
      })
      .then((response)=>{
          console.log(response)
      }).catch((response)=>{
        console.log(error)
      });

Uso de axios

Uso regular

      this.axios.post('/frontMenu',{
                  menuName:this.menuName //按具体模块是否需要传参
      })
      .then((response)=>{
          console.log(response)
      }).catch((response)=>{
        console.log(error);
      })

ps: método get, simplemente reemplace post con get, no se enumerará por separado aquí

API de axios

Puede crear una solicitud pasando la configuración relevante a axios.

this.axios({
               method:'post',
               url:'/frontMenu',
               data:{
                  menuName:this.menuName //按具体模块是否需要传参
                 },
                 //修改请求头
                headers: {
                  "Content-Type": "application/x-www-form-urlencoded"
                        }
                })  
                  .catch(function(error) {
                         console.log(error)
                   });

Solicitar uso del encabezado

1.Content-Type: application/json
这种是axios默认的请求数据类型，我们只需将参数序列化json字符串进行传递即可，
无需多余的配置
2.Content-Type: multipart/form-data
<input>元素的type属性必须为file
3.Content-Type:application/x-www-form-urlencoded
请求体中的数据会以普通表单形式（键值对）发送到后端

Concurrencia de axios (axios.all, axios.spread)

   let axiosList=[
   axios.get('url1',{params:xxx,dateType:'JSON'}),
   axios.get('url2',{params:xxx,dateType:'TEXT'}),
]
axios.all(axiosList).then(axios.spread(function(res1,res2){
  console.log(res1,res2)//分别是两个请求的返回值
})

Solicitar alias del método

axios.request (config)
axios.get (url [, config])
axios.delete (url [, config])
axios.head (url [, config])
axios.post (url [, data [, config]])
axios.put (url [, data [, config]])
axios.patch (url [, data [, config]])
ps: Cuando se utiliza el método de alias, no es necesario especificar la url, el método y los datos en la configuración.

Problemas comunes con la transferencia de valores

1. Es un par clave-valor cuando se pasa el primer plano y el fondo es difícil de recibir.
Solución: Utilice la biblioteca qs que viene con axios para serializar los parámetros
. Primero introduzca
import Qs from "qs";
los parámetros a los componentes que deben usarse .

let data= Qs.stringify({
userName:this.userName,
passWord:this.passWord
})
this.axios({
               method:'post',
               url:'/frontMenu',
               data:data
                })       
                .then((response)=>{
          console.log(response)
                 }) 
                .catch(function(error) {
                         console.log(error)
                   });

console.log (datos)
resultado: userName = jajajaja && passWord = 1234567
resuelve el problema perfectamente (ฅ ´ω` ฅ)
Agregar:

qs.parse () analiza la URL en forma de objeto

Cuando necesitamos pasar una matriz, podemos manejarla de la siguiente manera:
Por defecto, dan un índice claro, como en el siguiente código:
qs.stringify ({a: ['b', 'c', 'd' ]});
// 'a [0] = b & a [1] = c & a [2] = d'
también se puede reescribir. El método predeterminado es falso
qs.stringify ({a: ['b', 'c' , 'd']}, {indices: false});
// 'a = b & a = c & a = d'
Por supuesto, también puede formatear la salida a través de la opción arrayFormat, como se muestra en el siguiente código:
qs.stringify ({a: [ 'b', 'c']}, {arrayFormat: 'índices'})
// 'a [0] = b & a [1] = c'
qs.stringify ({a: ['b', 'c']} , {arrayFormat: 'brackets'})
// 'a [] = b & a [] = c'
qs.stringify ({a: ['b', 'c']}, {arrayFormat: 'repeat'})
// 'a = b & a = c'

2. Cargue imágenes.
Solución: debe cambiar el encabezado de la solicitud y enviarla con el formulario

  uploadFile(file) {
      this.formDate.append("file", file.file);
    },

 submitUpload() {
 this.formDate = new FormData();
 let config = {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        };
that.axios
          .post("/api/pictureUpload", this.formDate, config)
          .then(response => {
            console.log(response);          
          })
          .catch(response => {
            console.log(response);
          });
          }

ps: uso el control de carga de imágenes en element-ui

para resumir

La elección de axios está en línea con la tendencia actual de desarrollo de front-end, y es pequeña y fácil de usar. En cuanto a más introducción sobre la configuración de axios, déjela más tarde (๑˘ ˘๑). Este artículo explica el uso básico de axios y axios, y el uso de la encapsulación axios + vuex saldrá en el futuro. ! !

Este artículo está un poco hinchado. Gracias por ver ꒰๑´ • .̫ • `๑꒱