1. Comprensión y uso de axios
En nuestro desarrollo diario, todos deberían involucrar más o menos el uso de axios para enviar solicitudes, especialmente el marco vue, porque el impulso principal de vue para enviar solicitudes es usar axios para la interacción.
1. Características de Axios:
(1) Biblioteca de solicitudes ajax basada en promesas
(2) Se puede usar el navegador / nodo
(3) Interceptor de solicitud / respuesta
de soporte (4) Solicitud de cancelación de soporte
(5) Conversión de datos de solicitud / respuesta
(6) Enviar múltiples solicitudes en lote (promise.all)
2. Método de envío de solicitudes:
axios.request (config)
axios.get (url [, config])
axios.delete (url [, config])
axios.head (url [, config] )
axios.options (url [, config])
axios.post (url [, data [, config]])
axios.put (url [, data [, config]])
axios.patch (url [, data [, config ]])
3.Interceptores
// Add a request interceptor
//请求拦截器发送请求之前执行
axios.interceptors.request.use(function (config) {
// Do something before request is sent
return config;
}, function (error) {
// Do something with request error
return Promise.reject(error);
});
// Add a response interceptor
//响应拦截器在得到响应数据之后执行
axios.interceptors.response.use(function (response) {
// Do something with response data
return response;
}, function (error) {
// Do something with response error
return Promise.reject(error);
});
4. Configuración predeterminada de Axios
axios.defaults.baseURL = 'https: //api.example.com'; la dirección de solicitud predeterminada
axios.defaults.headers.common ['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post [ 'Content-Type'] = 'application / x-www-form-urlencoded'; El método de codificación predeterminado
5.axios.create ()
Descripción: La segunda encapsulación de axios, por qué es la segunda encapsulación, porque axios es la xhr encapsulada . Entonces axios.create es equivalente a 2 encapsulaciones de xhr, no 2 encapsulaciones de axios.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>axios.create</title>
</head>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
// axios.create(config)
// (1)根据指定的配置创建一个新的axios
// (2)新的axios没有取消请求和批量发送请求的方法，其他语法相同
// (3)创建这个语法的原因：可能在一个项目中用到2个不同的服务器
axios.default.baseURL = 'https://www.baidu.com'
axios({
url:'/get'//https://www.baidu.com/get
})
//当同一个项目用到2个不同的服务器地址的时候，不可能去修改default.baseURL
const instance = axios.create({
baseURL:'http://www.google.cn'
})
//用instance发送请求
instance({
url:'/get'//http://www.google.cn/get
})
</script>
</html>