[Vue] Explicación detallada de Axios

1 Introducción a Axios

1.1 ¿Qué es Axios?

Axios es una biblioteca de solicitudes de red basada en promesasnode.js que funciona en navegadores. Es isomorfo (es decir, el mismo conjunto de código puede ejecutarse tanto en el navegador como en node.js). En el lado del servidor usa módulos nativos de node.js http, y en el lado del cliente (navegador) usa XMLHttpRequests.

1.2 Características de Axios

• Crear XMLHttpRequests desde el navegador

• Crear solicitud http desde node.js

• Compatibilidad con la API de promesa

• Interceptar solicitudes y respuestas

• Transformar datos de solicitud y respuesta

• cancelar la solicitud

• Convierte automáticamente datos JSON

• Soporte al cliente para la defensa XSRF

2 Uso de Axios

2.1 Instalación de Axios

npm install axios

Ingrese npm install axios en la consola: presione Enter, cuando vea que hay axios en los paquetes de package-lock.json, significa que la importación se realizó correctamente

2.2 Creación de Axios

2.2.1 Proxy de configuración de proxy

Portal oficial de documentos https://cli.vuejs.org/zh/config/#devserver-proxy

2.2.1.1 Código básico

const {
    
     defineConfig } = require("@vue/cli-service")

module.exports = defineConfig({
    
    
  lintOnSave: false,
  transpileDependencies: true,
  devServer: {
    
    
    proxy: {
    
    
      '/api': {
    
    
        target: "http://localhost:9000", //需要跨域的目标地址
        pathRewrite: {
    
     '^/api': '' },//将带有api的路径重写为''
        ws: true,//用于支持WebSocket
        changeOrigin: true,//用于控制请求头的Host
      },
    }
  }

}
)

2.2.1.2 Código Explicación

'/api' : cuando hay esta cadena en el prefijo de la dirección de solicitud, se realizará la operación entre dominios; de lo contrario, se solicitará localmente.

El prefijo es como localhost:8080/api/student, donde api es el prefijo.

localhost:8080/student/api, la API aquí no es el prefijo, estudiante es su prefijo

target : la dirección que se cruzará entre dominios, que es localhsot:5001 en la imagen de arriba

pathRewrite : reescritura de ruta

Problema de error 404:

Cuando el servidor local solicita el servidor con la ruta de /api/student, el servidor proxy detecta que 'api' debe ser multidominio y luego lo reenvía de manera veraz. Entonces, cuando llegue al puerto 5001, irá a api/Student para encontrar los recursos que desea, pero el puerto 5001 solo tiene Student, por lo que aparecerá un error 404

Usando pathRewrite , el prefijo en la dirección de acceso se reemplazará con: el siguiente carácter, aquí es '', por lo que cuando llegue a 5001, accederá correctamente al Estudiante para encontrar el recurso que desea.

changeOrigin : host utilizado para controlar el encabezado de la solicitud

El valor es falso, cuando en el puerto 5001, cuando se le pregunta de dónde proviene la solicitud, la solicitud responderá con sinceridad: 8080.

El valor es verdadero, cuando en el puerto 5001, cuando se le pregunte de dónde provino la solicitud, la solicitud será: 5001, ¿dónde está usted? y mi respuesta es dónde .

2.2.1.3 Múltiples dominios cruzados

Si necesita múltiples dominios cruzados, simplemente continúe escribiendo.

2.2.2 Embalaje secundario de Axios

2.2.2.1 ¿Por qué un embalaje secundario?

Interceptor de solicitudes, interceptor de respuestas: el interceptor de solicitudes puede manejar algunos negocios antes de enviar la solicitud

Cuando se devuelven los datos, el interceptor de respuesta puede manejar algunos negocios

2.2.2.2 Instanciación de Axios

Puedes ver directamente 2.2.2.2.6

2.2.2.2.1 Introducción

Cree un nuevo archivo api y cree request.js para introducir axios

2.2.2.2.2 Crear axios

const requests = axios.create({
    
    
    baseURL: '/api',
    timeout: 50000,
 });

• baseURL: Agregue un prefijo. Por ejemplo, la dirección a la que necesita acceder es localhost: 9000/api/song/SongSheet. Al acceder, solo necesita escribir 'localhost: 9000/song/SongSheet'
• timeout: tiempo de espera de acceso en ms, exceder este tiempo es la falla de acceso

2.2.2.2.3 Configurar interceptor de solicitudes

// 添加请求拦截器
requests.interceptors.request.use(function (config) {
    
    
    // 在发送请求之前做些什么，例如加入token
    return config;
  }, function (error) {
    
    
    // 对请求错误做些什么
    return Promise.reject(error);
  });

Esto también resuelve una pregunta que me ha confundido durante mucho tiempo: por qué los datos devueltos antes no tienen código, sino solo un dato.

En un momento pensé que iba a escribir en el backend.

Si se devuelve config aquí, habrá data , status , statusText , headers , etc. Si solo devuelve config.data, solo verá data data.

2.2.2.2.4 Configuración de interceptores de respuesta

requests.interceptors.response.use(function (response) {
    
    
    // 在接收响应时做些什么，例如跳转到登录页
    return response;
  }, function (error) {
    
    
    // 对响应错误做点什么
    return Promise.reject(error);
  });

2.2.2.2.5 Exposición

No se puede usar si no está expuesto.

export default requests;

2.2.2.2.6 Ejemplos

import axios from "axios";
const requests = axios.create({
    
    
    baseURL: '/api',
    timeout: 50000,
  });
// 添加请求拦截器
requests.interceptors.request.use(function (config) {
    
    
    // 在发送请求之前做些什么，例如加入token
    return config;
  }, function (error) {
    
    
    // 对请求错误做些什么
    return Promise.reject(error);
  });
// 添加响应拦截器
requests.interceptors.response.use(function (response) {
    
    
    // 在接收响应时做些什么，例如跳转到登录页
    return response;
  }, function (error) {
    
    
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  
export default requests;

2.3 Uso directo de Axios

Las solicitudes aquí son el valor devuelto por axios.create() en 2.2, y las solicitudes deben introducirse antes de su uso

2.3.1 obtener solicitud

2.3.1.1 Sin parámetro

requests.get('url');

Ejemplo: Por ejemplo, a lo que quiero acceder es localhost:9000/api/song/SongAllSheet

La API está configurada en baseURL, así que solo necesito escribir

 requests.get('/song/SongAllSheet');

2.3.1.2 Con parámetros

/Opera/getPersonalOpera es la URL, el valor es el nombre de su parámetro

requests.get(`/Opera/getPersonalOpera/${
      
      value}`);

2.3.2 Publicar solicitud

axios.post("url",{
    
    
		params:{
    
    
				 name:'jok',
				 age:'18'
			   }
})

2.3.3 General (uso común)

2.3.3.1 Sin parámetro

obtener métodos de solicitud: get es seguido por get, post es post

requests({
    
    url:'/Opera/getPersonalOpera',methods:'get'})

2.3.3.2 Con parámetros

`` se usa aquí, en inglés, la tecla arriba de Tab

requests({
    
    url:`/Opera/getPersonalOpera/${
      
      value}`,methods:'get'})

2.3.4 Ejemplos

<template>
  <div class="hello">
  </div>
</template>

<script>
import requests from "@/api/request"
export default {
  name: 'HelloWorld',
  data() {
    return{
      Song: [],
      secondSong:[],
      thirdSong:[],
    }
  }, methods: {
    async getAllSongs() {
      let result = await requests.get('/song/SongAllSheet');
      if(result.status == 200)
      {
        this.Song =  result.data;
      }
      
    },
    async getSongById(value)
    {
       let result = await requests({url:`/Opera/getPersonalOpera/${value}`,methods:'get'})
        if(result.status == 200)
        {
            this.secondSong = result.data;
        }
       
    }
  },
  mounted() {
 
      this.getAllSongs();
      this.getSongById(1);
  },
  
}
</script>

 

Se puede ver que los datos se obtuvieron con éxito.

Resolver el caso donde los datos devueltos son una Promesa

Entonces solo necesita asignar el valor directamente en el método.

2.4 Gestión unificada de interfaces

2.4.1 Razones para la gestión unificada de interfaces

Para proyectos más pequeños, no está de más usarlo mientras se escribe.

Para algunos proyectos relativamente grandes, escriba la interfaz a voluntad. Si la interfaz de back-end cambia ligeramente, será muy difícil de mantener.

Así que junte todas las interfaces y abstráigalas en un método, de modo que no necesite escribir repetidamente, y sea más conveniente cambiar

2.4.2 Gestión de la interfaz

2.4.2.1 Cree un nuevo archivo index.js para colocar la interfaz e introducir axios

import requests from "./request";

2.4.2.2 Métodos de interfaz de escritura

original

export const reqGetAllSongById = (value)=>{
    
    
    return requests({
    
    url:`/Opera/getPersonalOpera/${
      
      value}`,methods:'get'});
}
export const reqGetAllSong = ()=>{
    
    
    return requests({
    
    url:'/Opera/getPersonalOpera',methods:'get'});
}

versión abreviada

export const reqGetAllSong = ()=>requests({
    
    url:'/Opera/getPersonalOpera',methods:'get'});
export const reqGetAllSongByType = (value)=>  requests({
    
    url:`/Opera/getPersonalOpera/${
      
      value}`,methods:'get'});

2.4.2.3 Interfaz de registro global

Aunque esto es fácil de administrar, si lo usa, debe presentarlo uno por uno.

En la posición anterior, escriba el siguiente código

import * as API from '@/api'
 beforeCreate(){
    
    
    Vue.prototype.$API = API;
  },

Cuando lo use, prefije con this.$API y se puede usar normalmente

<template>
  <div class="hello">
  </div>
</template>

<script>
import requests from "@/api/request"
export default {
  name: 'HelloWorld',
  data() {
    return{
      Song: [],
      secondSong:[],
      thirdSong:[],
    }
  }, methods: {
    async getAllSongs()
    {
      let result = await this.$API.reqGetAllSongByType(1);
      if(result.status==200)
      {
        this.Song = result.data;
      }
    }
  },
  mounted() {
    this.getAllSongs();
      
  },
  
}
</script>

 

El acceso es exitoso