Encapsulación de solicitudes de red de vue y uniapp

Tabla de contenido

1. encapsulación de solicitud de vue

Cree una nueva carpeta de solicitud en la carpeta src del proyecto. El request.js interno es donde se coloca el código encapsulado. Importarlo a api.js y luego escribir la solicitud correspondiente.


import axios from "axios"
const instance = axios.create({
    baseURL:process.env.VUE_APP_BASE_API,
    timeout:5000
})
// 设置请求拦截器
instance.interceptors.request.use(config => {
    // console.log("每一次发起请求前，都会先执行这里的代码");
    // console.log(config); //config是一个对象：记录了本次请求的配置信息
    let token=localStorage.getItem("token");
    // 在发请求前携带请求头
    if(token){
        config.headers["X-Access-Token"]=token;
    }
    return config
}, err => {
    return Promise.reject(err)
})
// 设置响应拦截器：对服务器响应回来的数据做统一处理
instance.interceptors.response.use(res=>{
    // console.log("每一次接收到响应，都会先执行这里的代码，再去执行成功的那个回调函数then");
    // res :是一个对象：原先说的axios封装的res对象
    return res
},err=>{
    return Promise.reject(err)
})
 
export default instance

Después de introducirse en api.js, la solicitud se escribe de la siguiente manera: importar instancia desde './request'

Ejemplo de método de obtención:

exportar const GetIMg = (params) => instancia.get('/sys/oss/file/getOOSUrl',params)

Método de publicación de ejemplo:

exportar const postNewCopy= (params) => instancia.post(`/h5/activiti_process/getProcessNode?id=${params.id}`)

Escriba el encabezado de la red en .env.development y .env.production : VUE_APP_BASE_API = "xxx"

2. encapsulación de solicitudes uniapp

El archivo se coloca en el mismo lugar que Vue, pero la sintaxis es diferente, ¡pero las referencias son consistentes!


const $request = (url, data, method = 'POST', headers = "application/json;") => {
	return new Promise((resolve, reject) => {
		uni.showLoading({
			title: '数据加载中',
			icon: 'loading',
			mask: true
		});
		let token= uni.getStorageSync("token")
		uni.request({
			url: 'xxx/api' + url,
			method: method,
			data: data,
			header: {
				'Content-Type': headers,
				'X-Access-Token': token
			},
			success(res) {
				resolve(res)
				uni.hideLoading(); //关闭loading
			},
			fail(error) {
				reject(error);
				uni.hideLoading(); //关闭loading
			},
			complete() {
				uni.hideLoading(); //关闭loading
			}
		})
	})
}
//get请求
const $get = (url, data) => {
	return $request(url, data, 'GET')
}
//post请求
const $post = (url, data) => {
	return $request(url, data, 'POST')
}
//给uniapp原生的requset赋值
//记得要在mian.js中引用
uni.$request = $request
uni.$get = $get
uni.$post = $post

Después de introducirse en api.js, la solicitud se escribe de la siguiente manera;

Ejemplo de método de obtención:

exportar const GetIMg = (params) => uni.$get('/sys/oss/file/getOOSUrl',params)

Método de publicación de ejemplo:

exportar const postNewCopy= (params) => uni.$post(`/h5/activiti_process/getProcessNode?id=${params.id}`)

Nota: asegúrese de introducirlo en main.js : import '@/utils/request.js'