uni-app 项目封装http 和url

最新推荐文章于 2025-03-24 17:22:44 发布

惠惠子~

最新推荐文章于 2025-03-24 17:22:44 发布

阅读量1.9k

点赞数

文章标签： uni-app

本文链接：https://blog.youkuaiyun.com/Gao_Chuanhui/article/details/114986270

版权

本文主要介绍在uni-app项目中如何进行HTTP请求和URL的封装，旨在实现请求的统一管理和方便使用。通过创建http/http.js文件并在main.js中全局挂载，使得在各个页面中可以便捷调用和管理请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求分析：
封装http请求和url请求，蛀牙目的还是为了统一管理

将这两个部分放在http文件夹下面
http/http.js

//路由公共的部分：
const baseUrl = 'http://172.0.0.1:8080';
//不带token的封装
const httpRequest = (opts, data) => {  //opts 是一个对象，包含了后面的url,方法，请求头设置，返回的数据类型等
    //1.请求的一些默认信息
	let httpDefaultOpts = {
		url: baseUrl + opts.url,
		data: data,
		method: opts.method,
		header: opts.method == 'get' ? {
			'X-Requested-With': 'XMLHttpRequest',
			"Accept": "application/json",
			"Content-Type": "application/json; charset=UTF-8"
		} : {
			'X-Requested-With': 'XMLHttpRequest',
			'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
		},
		dataType: 'json',
	}
	//2.封装promise
	return new Promise((resolve, reject)=>{
		uni.request(httpDefaultOpts).then(
			(res) => {
				resolve(res[1])
			}
		).catch(
			(response) => {
				reject(response)
			}
		)
	})
};
//带Token请求
const httpTokenRequest = (opts, data) => {
	let token = "";
	uni.getStorage({
		key: 'token',
		success: function(ress) {
			token = ress.data
		}
	});
	//此token是登录成功后后台返回保存在storage中的
	let httpDefaultOpts = {
		url: baseUrl + opts.url,
		data: data,
		method: opts.method,
		header: opts.method == 'get' ? {
			'Token': token,
			'X-Requested-With': 'XMLHttpRequest',
			"Accept": "application/json",
			"Content-Type": "application/json; charset=UTF-8"
		} : {
			'Token': token,
			'X-Requested-With': 'XMLHttpRequest',
			'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
		},
		dataType: 'json',
	}
	return  new Promise(function(resolve, reject) {
		uni.request(httpDefaultOpts).then(
			(res) => {
				resolve(res[1])
			}
		).catch(
			(response) => {
				reject(response)
			}
		)
	})
};

export default {
	baseUrl,
	httpRequest,
	httpTokenRequest
}

在main.js中全局挂载

import Vue from 'vue'
import App from './App'
import myRequest from './http/http.js'

Vue.prototype.$http = myRequest
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue({
	...App
})
app.$mount()

在页面中使用

let opts = {
	url: '/api/add',
	method: 'post'
};
let param = {
	deviceId: this.deviceCode,
	deviceName: this.deviceName
};
this.$myRequest.httpTokenRequest(opts, param).then(res => {
	console.log(res.data);
	//打印请求返回的数据

}, error => {
	console.log(error);
})