Encapsulamento de solicitação de rede de vue e uniapp

Índice

1. Encapsulamento de solicitação vue

Crie uma nova pasta de solicitação na pasta src do projeto. O request.js dentro é onde o código encapsulado é colocado. Importe-o para api.js e escreva a solicitação correspondente.


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

Depois de ser introduzido no api.js, a solicitação é escrita da seguinte forma; importar instância de './request'

Exemplo de método get:

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

Exemplo de método de postagem:

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

Escreva o cabeçalho da rede em .env.development e .env.production : VUE_APP_BASE_API = "xxx"

2. Encapsulamento de solicitação uniapp

O arquivo é colocado no mesmo lugar do Vue, mas a sintaxe é diferente, mas as referências são 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

Após ser introduzido no api.js, a solicitação é escrita da seguinte forma;

Exemplo de método get:

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

Exemplo de método de postagem:

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

Nota: certifique-se de apresentá-lo em main.js : import '@/utils/request.js'