Use axios para encapsular solicitudes de red uniapp (interceptación de solicitud y respuesta de solicitud)

1. Primero abra el directorio raíz del proyecto donde se debe configurar axios y luego abra el terminal HBuilderX en la ubicación de este proyecto para descargar axios (como se muestra en la figura :)

Denominación de la ventana de terminal: npm install axios

2. Cree una carpeta en el directorio raíz para almacenar archivos que encapsulan solicitudes de red (o cree archivos directamente), y los archivos del proyecto están en la carpeta utils (como se muestra en la figura)

3. Configure la intercepción de solicitud y la intercepción de respuesta de solicitud de acuerdo con el sitio web oficial de axios (dirección de uso de Axios: caso de uso básico | documento chino de Axios | sitio web chino de Axios ), el código específico es el siguiente

import Vue from 'vue'   //需要先引入vue
import axios from 'axios'  //引入axios
const service = axios.create({
// url = base url + request url
	baseURL: 'http://yqdh.test.site.ximengnaikang.com/pap/api', 
	timeout: 6000, // request timeout
	crossDomain: true  //允许跨域
})
// request拦截器,在请求之前做一些处理
service.interceptors.request.use(
	config => {
	  if (uni.getStorageSync('login_token')) {
		 // 给请求头添加user-token 这块看你使用什么方式存储，需要确定是否有其他关键字
		 config.headers["Authorization"] = `Bearer ${uni.getStorageSync('login_token')}`;
	   }
		console.log('此时请求拦截成功')
		return config;
	},
	error => {
		console.log(error); // for debug
		return Promise.reject(error);
	}
);

//配置成功后的拦截器
service.interceptors.response.use(res => {
//此处一定要打印，因为不同后端给的接口数据格式可能不一样
	console.log(res,'相应拦截了')
	if (res.status == 200) {
		console.log('相应拦截了200')
		return res.data
	} else {
		console.log('相应拦截了非200')
		return Promise.reject(res.data.msg);
	}
}, error => {
	console.log('相应拦截了直接错误')
	if (error.response.status) {
		switch (error.response.status) {
			case 401:
				break;
			default:
				break;
		}
	}
	return Promise.reject(error)
})
export default service

4. Una vez completada la configuración anterior, debe colgarse globalmente en main.js (conveniente para llamar)

 5. Uso de la página (obtener solicitud)

 6. Uso de la página (solicitud posterior)