Axios es una biblioteca HTTP basada en promesas que se puede usar en el navegador y en node.js. El mecanismo axios también está encapsulado en jQuery, pero solo para navegadores.

Características de Axios:

Enviar solicitud XMLHttpRequests en el navegador
Enviar solicitud http en node.js
API de promesa de soporte
Interceptar solicitudes y respuestas
Transformar datos de solicitud y respuesta
Convierte automáticamente datos JSON

2. Instalación de Axios

usar npm

npm install axios

usar cdn

<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>

3. Elementos de configuración comunes de Axios

Solo se requiere la opción de URL, y las demás son opcionales. Estos son algunos elementos de configuración de uso común. Axios tiene muchos otros elementos de configuración, que se pueden ver en el sitio web oficial de axios .

axios({
	// 请求路径
	url:"",
	// 请求方式,默认发送get请求
	method:"",
	// get请求携带的参数写在params中
	params:{},
	// post请求携带的参数写在data中
	data:{},
	// 请求头
	headers:{},
	// 表示请求超过timeout时间没有响应就中断 (单位为毫秒)
	timeout:1000,
	// 规定后端返回的数据格式,默认值是json
	responseType: 'json'
})

Nota: el valor predeterminado de method es get, por lo que los métodos se pueden omitir al enviar una solicitud get, y el valor predeterminado de responseType es json

4. La diferencia entre axios y ajax

Características de Ajax:
   1. Ajax es XML asíncrono y JavaScript
   2. Puede ejecutarse en navegadores pero no en nodos
   3. Los datos enviados al fondo deben convertirse manualmente y el encabezado de la solicitud debe configurarse manualmente 4.
   El los datos respondidos por el backend deben convertirse a js por sí mismos Formato de objeto (los datos correspondientes en segundo plano están en formato json)
características de axios:
   1. Axios es una biblioteca http basada en promesas
   2. Puede llamar a la API de promesa
   3. Axios envía una solicitud de obtención de forma predeterminada, y el formato predeterminado de los datos enviados es json
   4. El encabezado de solicitud de axios El formato de datos se convertirá automáticamente

2. Usa axios para enviar solicitudes

1. Enviar una solicitud de obtención sin parámetros

axios({
  url:'请求地址'
})

2. Enviar una solicitud de obtención con parámetros

Al enviar una solicitud de obtención con parámetros, los parámetros se empalman en la dirección URL en el formato de una cadena de consulta.

Colocamos los parámetros que la solicitud de obtención debe llevar en params, y axios los convertirá automáticamente en cadenas de consulta.

axios({
  url:'请求地址',
  // 将要传给后端的数据放到params中,axios会自动将它们转成查询字符串 (即 ?a=1&b=2)
  params:{
    a:1,
    b:2
  }
})

3. Enviar una solicitud de publicación sin parámetros

axios({
  url:'请求地址',
  method:'post'
})

4. Envía una publicación con una solicitud

4.1 Enviar datos en formato json:

El formato de datos predeterminado enviado por solicitud posterior es el formato json

axios({
  url:"请求地址",
  method:"post",
  // 在请求头中指明发送的数据是json格式的数据,但是这里不写也可以,因为post请求默认发送的数据格式就是json 
  // headers:{
  //   "Content-Type":"application/json"
  // },
  data:{
    a:1,
    b:2
  }
})

4.2 Enviar datos en formato formulario:

Use la herramienta Qs para convertir datos de formato de formulario en datos de formato json, primero debe introducir Qs:

<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.11.0/qs.js"></script>

axios({
  url:"请求地址",
  method:"post",
  // 在请求头中指明发送的数据是表单格式的数据,但是这里不写也可以,因为axios请求头的数据格式会自动转换 
  headers:{
    // "Content-Type":"application/x-www-form-urlencoded",
    // 如果需要token认证,可以在请求头中携带
    "Authorization":token
  },
  // 这里使用Qs将表单格式的数据转成json格式数据传给后台,因为后台需要接收json格式的数据
  data:Qs.stringify({
    a:1,
    b:2
  })
})

三, entonces, atrapar, finalmente

Debido a que axios es una biblioteca HTTP basada en promesas, es compatible con la API de promesa y podemos usar los métodos luego, captura y finalmente en axios.

axios({
  url:"请求地址",
  method:"post",
  headers:{
    "Authorization":token
  },
  data:Qs.stringify({
    a:1,
    b:2
  })
}).then(res=>{
  console.log(res,'获取响应');
}).catch(err=>{
  console.log(err,'打印错误信息');
}).finally(()=>{
  console.log('最终执行');
})

4. Método abreviado de Axios

Axios proporciona los siguientes métodos abreviados: (los corchetes indican parámetros opcionales y el objeto de configuración config es el mismo que axios)

axios.request(config) --> equivalente a axios(config)

axios.get(url[, configuración])

axios.delete(url[, config])

axios.head(url[, config])

axios.options(url[, config])

axios.post(url[, data[, config]]) --> data indica los parámetros a pasar

axios.put(url[, datos[, configuración]])

axios.patch(url[, datos[, configuración]])

Get, delete, head y options se usan de la misma manera, y post, put y patch se usan de la misma manera.

(publicar y colocar: se usa para guardar varios datos de formulario; parche: se usa para guardar un solo dato de formulario)

// 1、get无参请求
axios.get('请求地址').then(res=>{
  console.log(res);
})

//----------------------------------------

// 2、get有参请求
let url = '请求地址'
axios.get(url,{
  params:{
    a:1,
    b:2
  },
  timeout:2000
}).then(res=>{
  console.log(res);
})

//----------------------------------------

// 3、post有参请求
// 3.1 json格式数据
let url = '请求地址'
let data = {
  a:1,
  b:2
}
axios.post(url,data).then(res=>{
  console.log(res);
})

//----------------------------------------

// 3.2 表单格式的数据
let url = '请求地址'
let data = {
  a:1,
  b:2
}
axios.post(url,Qs.stringify(data),{
  headers:{
    "Authorization":token
  }
}).then(res=>{
  console.log(res);
})

5. Instancia de Axios

Cree una instancia de axios:
axios.create([config])

// 创建实例
let instance = axios.create({
  baseURL: '基础路径',
  timeout: 2000,
  headers:{
    "Authorization": token
  }
})
// 使用实例
instance.post('除去基础路径后剩下的路径',{
  a:1,
  b:2
}).then(res=>{
  console.log(res);
})

6. Configuración global de axios

Configure globalmente los elementos de configuración predeterminados de axios: agregue algunos elementos de configuración predeterminados a todas las solicitudes de axios

axios.defaults.baseURL = '基础路径';
axios.defaults.headers.common['Authorization'] = token;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

Siete, interceptor axios

Axios nos proporciona dos tipos de interceptores:

Uno es el interceptor de solicitudes, que intercepta la dirección de la solicitud (solicitud exitosa, solicitud fallida);

El otro es el interceptor de respuesta, dirección de respuesta (respuesta exitosa, respuesta fallida)

El papel del interceptor: se utiliza para procesar la operación cuando iniciamos una solicitud o respondemos a una solicitud de red.

//请求拦截器 对所有的axios请求做一个拦截
axios.interceptors.request.use(
  config=>{
    // 在发送请求之前做些什么
    return config
  },
  error=>{
    // 对请求错误做些什么
    return Promise.reject(error)
  }
);

// 响应拦截器 对响应数据处理
axios.interceptor.response.use(
  response=>{
    // 对响应数据做点什么
    return response
  },
  error=>{
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

usar:

Al enviar una solicitud, si no es una interfaz de inicio de sesión y necesita llevar un token, entonces podemos realizar las operaciones correspondientes en el interceptor de solicitud. El interceptor de respuesta se usa principalmente para extraer los datos de respuesta, porque la respuesta devuelta por el interceptor de respuesta son los datos encapsulados por axios y response.data son los datos de respuesta devueltos por el backend.

//请求拦截器
axios.interceptors.request.use(
  config=>{
    // 在发送请求之前做些什么
    if(config.url!=='登录接口'){
      // 需要携带token 每一个请求请求头需要携带token
      config.headers.Authorization='token值';
    }
    return config
  },
  error=>{
    // 对请求错误做些什么
    return Promise.reject(error)
  }
);
// 响应拦截器
axios.interceptor.response.use(
  response=>{
    // 对响应数据做点什么
    // response.data才是后端返回的响应数据，response是axios封装后返回的数据
    let res = response.data;
    return res
  },
  error=>{
    // 对响应错误做点什么
    return Promise.reject(error)
  }
)

axios.post('请求地址',{
  a:1,
  b:2
}).then(res=>{
  console.log(res);
});

8. Solicitudes simultáneas de Axios

El uso de solicitudes concurrentes de axios puede enviar varias solicitudes asincrónicas a la vez.

Funciones auxiliares para el manejo de solicitudes simultáneas:

axios.all(iterable)

axios.spread(devolución de llamada)

axios.all([
	axios.get(),
	axios.get(),
	axios.post()
]).then(
	axios.spread((res1,res2,res3)=>{
		console.log(res1,res2,res3); //依次打印每一个响应
	})
)

axios.all([
	axios.get(),
	axios.get(),
	axios.post()
]).then(res=>{
	console.log(res) //打印一个数组，包含上述三个请求的响应结果
})

Nueve, embalaje secundario axios

Implementamos el embalaje secundario de axios en el andamio vue-cli.

descargar axios

-S significa instalar en entorno de producción

cnpm i -S axios

Descargar preguntas

cnpm i -S qs

Cree una nueva carpeta utils en src, cree un nuevo archivo request.js en la carpeta utils

src/utils/request.js

import axios from 'axios'
import Qs from 'qs'
let qs = Qs

// 创建axios实例对象
let instance = axios.create({
  baseURL:"基础路径",
  timeout:5000
})

// 请求拦截器
instance.interceptors.request.use(config=>{
  // console.log(config,'请求配置项');
  if(config.url !== '登录接口'){
    config.headers.Authorization = 'token值'
  }
  return config
},error=>{
  alert('请求失败')
  return Promise.reject(error)
})

// 响应拦截器
instance.interceptors.response.use(response=>{
  let res = response.data
  return res
},error=>{
  return Promise.reject(error)
})

// 封装get方法并导出
export function get(url,params){
  return instance.get(url,{
    params,
  })
}
// 封装postJSON方法 (发送json格式数据)
export function postJSON(url,data){
  return instance.post(url,data)
}
// 封装post方法 (发送表单格式数据)
export function post(url,data){
  return instance.post(url,qs.stringify(data))
}

// 导出axios实例
export default instance