Referencia: https://blog.csdn.net/qq_39765048/article/details/117688019
El texto original es más incisivo, apoye el texto original.
Tabla de contenido
1. Introducción a Axios
El nombre completo del framework axios (ajax - I/O - system)
- Cliente http basado en Promise para navegadores y node.js, por lo que se puede usar Promise API
2. ¿Qué hace axios?
se utiliza para implementar " 异步网络请求".
Cuando la página del navegador anterior solicita datos del servidor, debido a que se devuelven los datos de toda la página, la página se verá obligada a actualizarse, lo que no es muy fácil de usar. Y solo necesitamos modificar parte de los datos de la página, pero los datos de toda la página se envían desde el lado del servidor, lo que consume muchos recursos de red. Y solo nos falta modificar parte de los datos de la página, y esperamos no refrescar la página, así 异步网络请求nació. Pero aquí empezamos con el Ajax .
Ajax (JavaScript asíncrono y XML): solicitudes de red asíncronas. Ajax puede hacer que la página solicite datos sin actualizar.
Hay muchas formas de implementar ajax, como ajax encapsulado por jQuery, XMLHttpRequest nativo y axios.
Pros y contras:
- Los métodos de configuración e invocación de XMLHttpRequest nativo son muy engorrosos y es muy problemático implementar solicitudes asíncronas.
- El ajax de jQuery es muy fácil de usar en comparación con el ajax nativo, pero no es necesario consultar el marco jQuery
Axios (sistema de E/S ajax): en esencia, sigue siendo la encapsulación de XMLHttpRequest nativo, que se puede usar para clientes HTTP de navegadores y nodejs, pero se basa en Promise y cumple con la última especificación ES.
Características:
- Crear una solicitud XMLHttpRequest en el navegador
- enviar solicitud http en node.js
- Compatibilidad con la API de promesa
- Interceptar solicitudes y respuestas
- Transformar datos de solicitud y respuesta
- Solicitud de cancelacion
- Convierte automáticamente datos JSON
- Asistencia al cliente para evitar CSRF/XSRF (falsificación de solicitud de origen cruzado)
3. Instalación y uso
(1) Instalación
npm install axios
(2) Cita
principal.js
import axios from 'axios'
Vue.prototype.$axios = axios
(3) Usar axios
<script>
export default {
mounted(){
this.$axios.get('/xxxx').then(res=>{
console.log(res.data);
})
}
}
</script>
Generalmente no se usan arriba, la mayoría de ellos estarán encapsulados por módulos (ver otros artículos de encapsulación de Axios para más detalles)
4. Método de solicitud de Axios
get post put patch delete
5. Solicitudes concurrentes
this.$axios.all([
this.$axios.get('/goods.json'),
this.$axios.get('/classify.json')
]).then(
this.$axios.spread((goodsRes,classifyRes)=>{
console.log(goodsRes.data);
console.log(classifyRes.data);
})
)
6. Instancia de Axios
(1) Crear instancia de axios
let instance = this.$axios.create({
baseURL: 'http://localhost:9090',
timeout: 2000
})
instance.get('/xxxx').then(res=>{
console.log(res.data);
})
Instrucciones de configuración:
- El nombre de dominio de la solicitud baseURL , la dirección base, escriba: Cadena
- solicitud de tiempo de espera duración del tiempo de espera, unidad ms, tipo: Número
- ruta de solicitud de URL , tipo: Cadena
- método de solicitud de método, tipo: Cadena
- headers establecer el encabezado de la solicitud, tipo: Objeto
- parámetros de solicitud de parámetros, parámetros de empalme en la URL, escriba: Objeto
- parámetro de solicitud de datos , coloque el parámetro en el cuerpo de la solicitud, escriba: Objeto
(2) configuración global de axios
//配置全局的超时时长
this.$axios.defaults.timeout = 2000;
//配置全局的基本URL
this.$axios.defaults.baseURL = 'http://localhost:8080';
(3) Configuración de la instancia de Axios
let instance = this.$axios.create();
instance.defaults.timeout = 3000;
(4) configuración de solicitud de axios
this.$axios.get('/goods.json',{
timeout: 3000
}).then()
La prioridad es: Configuración de solicitud > Configuración de instancia > Configuración global
7. interceptor
(1) Solicitar interceptor
this.$axios.interceptors.request.use(config=>{
// 发生请求前的处理
return config
},err=>{
// 请求错误处理
return Promise.reject(err);
})
//或者用axios实例创建拦截器
let instance = $axios.create();
instance.interceptors.request.use(config=>{
return config
})
(2) Interceptor de respuesta
this.$axios.interceptors.response.use(res=>{
//请求成功对响应数据做处理
return res //该返回对象会传到请求方法的响应对象中
},err=>{
// 响应错误处理
return Promise.reject(err);
})
(3) Cancelar interceptación
let instance = this.$axios.interceptors.request.use(config=>{
config.headers = {
token: ''
}
return config
})
//取消拦截
this.$axios.interceptors.request.eject(instance);
8. Manejo de errores
this.$axios.get('/url').then(res={
}).catch(err=>{
//请求拦截器和响应拦截器抛出错误时，返回的err对象会传给当前函数的err对象
console.log(err);
})
9. Cancelar la solicitud
let source = this.$axios.CancelToken.source();
this.$axios.get('/goods.json',{
cancelToken: source
}).then(res=>{
console.log(res)
}).catch(err=>{
//取消请求后会执行该方法
console.log(err)
})
//取消请求，参数可选，该参数信息会发送到请求的catch中
source.cancel('取消后的信息');
Finalizar.