Encapsulación de Axios, token, uso de $set en vue2

---

1. embalaje de axios

Introducir axios importar axios desde 'axios'
Usar un archivo de configuración personalizado para enviar solicitudes
Agregar interceptor de solicitudes
Agregar el interceptor correspondiente
Exportar
封装axios好处：达到扩展和易用的目的，降低耦合度

// 对http请求进行封装
import axios from 'axios'

// 使用自定义的配置文件发送请求
const instance = axios.create({
    
    
    baseURL: '',
    timeout: 5000,
    headers: {
    
    
    }
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
    
    
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
    
    
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    
    
    instance// 对响应数据做点什么
    if(response.status === 200){
    
    
        return response.data;
    }else{
    
    
        console.error("请求错误")
        console.error(response)
    }
    return response;
  }, function (error) {
    
    
    // 对响应错误做点什么
    return Promise.reject(error);
  });

  export default instance

2. Uso de token

1. Después de una autenticación exitosa, los datos del usuario actual se cifrarán, se generará un token de cadena cifrada y se devolverá al cliente (el servidor no lo guardará).
2. El token obtenido se puede almacenar en el almacenamiento local.
3. Procesamiento del valor del token en el lado del servidor al acceder nuevamente: el servidor descifra el valor del token enviado desde el navegador. Una vez completado el descifrado, se consultan los datos del usuario. Si la consulta tiene éxito, se pasa la autenticación y el estado es Por lo tanto, hay muchos El servidor solo descifra el token y consulta los datos del usuario. No necesita retener la información de autenticación del usuario o la información de la sesión en el servidor. Esto significa que las aplicaciones basadas en el mecanismo de autenticación de token no necesitan Considere dónde está el usuario: un servidor está conectado, lo que facilita la expansión de la aplicación y resuelve los inconvenientes de la escalabilidad de la sesión.

3. El uso de $set en vue2

1. ¿En qué escenarios se utiliza $set?

Set nació para resolver el problema de falla del enlace de datos bidireccional en Vue2. Solo debe prestar atención a cuándo fallará el enlace de datos bidireccional.
Por ejemplo:

1. Cuando se utiliza el índice de un elemento en la matriz para modificar directamente el elemento
2. Al modificar directamente la longitud de una matriz
3. Debido a las limitaciones de JavaScript, Vue2 no puede detectar la adición o eliminación de propiedades de objetos.

arr[indexOfItem] = newValue //1、利用索引修改
arr.length = newLength//2、修改数组的长度

Para una comprensión más profunda, consulte el sitio web oficial:
Principios de respuesta en profundidad-vue.js

2. La relación entre Vue.set y this.$set

this.$set método de instancia, que es un alias del método global Vue.set

3. $establecer uso

1. Para matrices

this.$set(Array, index, newValue)

2. Para objetos

this.$set(Object, key, value)

4. Escenarios de ejemplo

Requisito: No está definido en los datos. Agregue manualmente el atributo de edad al formulario y haga clic en el botón para incrementarlo.

	如果使用 this.form.age = 10 这种方式，不能进行添加和自增，数据无法响应式。
	此时便需要使用 this.$set方式实现响应式

<template>
	<div>
		<h1> {
    
    {
    
     form }} </h1>   <!--{
    
    name:'xxx'}/ {
    
    name:'xxx',age:10}-->
		<button @click="add">添加</button>
	</div>
</template>
<script>
export default{
    
    
	data(){
    
    
		return{
    
    
			form:{
    
    
				name: 'xxx',
			}
		}
	}
	methods:{
    
    
		add(){
    
    
			if(!this.form.age){
    
    
				this.$set(this.form, age, 10) // 成功
				
				// Vue2中监听不到动态给对象添加的属性的
				// this.form.age = 10   // 失败无法添加,更无法自增
			} else {
    
    
				this.form.age++
			}
		}
	}
}
</script>