Hoy hablaremos cuidadosamente sobre axios en términos de cómo usar axios y el concepto de axios.
1. Instalar y usar axios
npm install
npm install axios --save
Introducido a través de cdn
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
Cree nuevos http.js, encapsule las solicitudes get y post de axios
import Axios from 'axios'
import ElementUI from 'element-ui'
const get = (url, params, config) => {
// url为我们接口的地址
url = '/api/' + url //本地开发环境
return new Promise((resolve, reject) => {
Axios.get(url, params, config)
.then(res => {
resolve(res.data)
if (res.data.code && res.data.code != 0) {
ElementUI.Message.error(res.data.message || res.message || '系统错误')
}
})
.catch(err => {
reject(err)
})
})
}
const post = (url, params, config) => {
// url为我们接口的地址
url = '/api/' + url //本地开发环境
return new Promise((resolve, reject) => {
Axios.post(url, params, config)
.then(res => {
resolve(res.data)
if (res.data.code && res.data.code != 0) {
ElementUI.Message.error(res.data.message || res.message || '系统错误')
}
})
.catch(err => {
reject(err)
})
})
}
export default {
get,
post
}
Nueva solicitud de intercepción AxiosPlugin.js, encapsulando el interceptor de solicitud
import axios from 'axios'
import router from '../router.js'
// 创建 axios 实例
export const Axios = axios.create({
timeout: 15000
})
window.cancelInterface = []
//POST传参序列化(添加请求拦截器)
// 在发送请求之前做某件事
axios.interceptors.request.use(
config => {
config.cancelToken = new axios.CancelToken(cancel => {
if (!window.cancelInterface) {
window.cancelInterface = []
}
window.cancelInterface.push({
cancel
})
})
// console.log('config.token', config)
if (config.token != 'none') {
if (localStorage.token) {
config.headers.Authorization = 'Bearer ' + localStorage.token
}
}
return config
},
error => {
return Promise.reject(error)
}
)
//返回状态判断(添加响应拦截器)
axios.defaults.headers['Content-Type'] = 'application/json; charset=UTF-8'
axios.interceptors.response.use(
res => {
if (res.data.code == '401') {
router.push({
path: '/login',
query: {
redirect: location.hostname
}
})
return
}
//503跳转到错误页
if (res.data.code == '503') {
router.push({
path: '/error',
query: {
redirect: location.hostname
}
})
return
}
return res
},
error => {
if (error.response.status === 401 || error.response.status === 403) {
router.push({
path: '/login',
query: {
redirect: location.hostname
}
})
} else if (error.response.status === 503 ) {
//503跳转到错误页
router.push({
path: '/error',
query: {
redirect: location.hostname
}
})
} else if (error.response.status === 500) {
// 服务器错误
return Promise.reject(error.response.data)
}
// 返回 response 里的错误信息
return Promise.reject(error.response.data)
}
)
// 将 Axios 实例添加到Vue的原型对象上
export default {
install(Vue) {
Object.defineProperty(Vue.prototype, '$http', {
value: Axios
})
}
}
2. ¿Qué es axios?
- Axios es una biblioteca HTTP basada en promesas que se puede usar en navegadores y node.js. La biblioteca de solicitudes ajax más popular en el front-end,
- React / vue recomienda oficialmente usar axios para enviar solicitudes ajax
3. Las características de los axios?
- Biblioteca asíncrona de solicitudes ajax basada en promesa, compatible con todas las API de promesa
- Se pueden usar tanto el navegador como el nodo, se crean XMLHttpRequests en el navegador
- Solicitud de soporte / interceptor de respuesta
- Cancelación de solicitud de soporte
- Puede convertir datos de solicitud y datos de respuesta, y convertir automáticamente el contenido devuelto en datos de tipo JSON
- Enviar múltiples solicitudes en lote
- La seguridad es mayor y el cliente admite la defensa contra XSRF, lo que significa que cada una de sus solicitudes lleva una clave obtenida de la cookie. De acuerdo con la política de homología del navegador, el sitio web falso no puede obtener la clave de su cookie. De esta manera, el fondo puede distinguir fácilmente si la solicitud es una entrada engañosa del usuario en el sitio web falso, a fin de adoptar la estrategia correcta.
4. ¿Cuáles son las sintaxis comunes de los axios?
axios(config): 通用/最本质的发任意类型请求的方式
axios(url[, config]): 可以只指定 url 发 get 请求
axios.request(config): 等同于 axios(config)
axios.get(url[, config]): 发 get 请求
axios.delete(url[, config]): 发 delete 请求
axios.post(url[, data, config]): 发 post 请求
axios.put(url[, data, config]): 发 put 请求
axios.defaults.xxx: 请求的默认全局配置
axios.interceptors.request.use(): 添加请求拦截器
axios.interceptors.response.use(): 添加响应拦截器
axios.create([config]): 创建一个新的 axios(它没有下面的功能)
axios.Cancel(): 用于创建取消请求的错误对象
axios.CancelToken(): 用于创建取消请求的 token 对象
axios.isCancel(): 是否是一个取消请求的错误
axios.all(promises): 用于批量执行多个异步请求
axios.spread(): 用来指定接收所有成功数据的回调函数的方法
5. ¿Por qué los axios pueden ejecutarse tanto en el entorno del navegador como en el entorno del servidor (nodo)?
axios usa el objeto XMLHttpRequest para enviar solicitudes ajax en el navegador; el objeto http se usa para enviar solicitudes ajax en el entorno del nodo.
var defaults.adapter = getDefaultAdapter();
function getDefaultAdapter () {
var adapter;
if (typeof XMLHttpRequest !== 'undefined') {
// 浏览器环境
adapter = require('./adapter/xhr');
} else if (typeof process !== 'undefined') {
// node环境
adapter = require('./adapter/http');
}
return adapter;
}
Se pueden ver las líneas de código anteriores: XMLHttpRequest es una API, que proporciona al cliente la función de transferir datos entre el cliente y el servidor; el objeto de proceso es una global (variable global) que proporciona información relevante y controla el Nodo actual. proceso js. El autor original juzga el entorno de ejecución del programa juzgando las dos variables globales XMLHttpRequest y el proceso, a fin de proporcionar diferentes módulos de solicitud http en diferentes entornos para lograr la compatibilidad entre los programas cliente y servidor.
6. ¿Por qué usar axios sin ajax nativo?
Debido a que ajax tiene las siguientes deficiencias en comparación con los axios:
1. Está programando para MVC, que no cumple con la ola actual de MVVM front-end
2. Basado en el desarrollo nativo de XHR, la arquitectura de XHR en sí no está clara.
3. Todo el proyecto JQuery es demasiado grande, y no es razonable usar todo JQuery simplemente usando ajax (tomar una solución de empaque personalizada y no poder disfrutar del servicio CDN)
4. No cumple con el principio de separación de preocupaciones
5. Configuración y El método de llamada es muy confuso y el modelo asincrónico basado en eventos no es amigable.
