uniapp封装公共js并在main.js里全局绑定并调用

最新推荐文章于 2025-10-08 09:31:46 发布

原创最新推荐文章于 2025-10-08 09:31:46 发布 · 6.7k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#uniapp #封装公共文件

uni-app 专栏收录该内容

15 篇文章

订阅专栏

本文档展示了如何在uni-app中创建公共API请求模块`common/api.js`，包括设置请求头、定义请求函数及处理成功与失败的情况。在`main.js`中引入并挂载到Vue原型上，以便在各页面通过`this.$ajaxApi`调用。在`index.vue`的`onShow`生命周期钩子中，演示了如何调用封装好的请求方法获取数据。

公共文件：common/api.js

// 请求头
var rqUrl = '域名'
// 请求处理
function requst(url, data, post_get) {
	return new Promise((resolve, reject) => {
		uni.request({
			url: this.rqUrl + url,
			method: post_get || "GET",
			data: data || {},
			header: {
				'content-type': 'application/json'
			},
			success: (res) => {
				console.log(res)
			
				resolve(res)
			},
			fail: (res) => {
				uni.showToast({
					title: "接口请求失败"
				})
				reject(res)
			}
		})
	})
}
 
module.exports = {
	rqUrl: rqUrl,
	requst: requst,
}

main.js

import Vue from 'vue'
import App from './App'

import reqAPI from './common/api.js'

Vue.config.productionTip = false
App.mpType = 'app'

Vue.prototype.$ajaxApi = reqAPI

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

在别的页面使用时this.变量名调用
index.vue

onShow() {
			this.$ajaxApi.requst('api/index', '', 'post').then(res => {
				console.log('返回数据', res);
				
			});

		},

uniapp封装公共js并在main.js里全局绑定并调用

2 条评论