Uni-app 封装 API 请求

一、在文件夹 API 下创建 api.js

const BASE_URL = "";

// 封装请求方法
const request = (url, method, data) => {
	wx.showLoading({
		title: '加载中' // 数据请求前loading
	})
	return new Promise((resolve, reject) => {
		wx.request({
			url: BASE_URL + url, // 开发者服务器接口地址
			method: method,
			data: data,
			header: {
				'content-type': 'application/json', // 默认值
			},
			success: function(res) {
				// 请求成功操作
				wx.hideLoading()
				resolve(res.data)
			},
			fail: function(err) {
				// 请求失败操作
				wx.hideLoading()
				reject(err)
			}
		})
	})
}

// 封装网络请求
const get = (url, data) => {
	return request(url, 'GET', data)
}

const post = (url, data) => {
	return request(url, 'POST', data)
}

module.exports = {
	get,
	post
}

二、在 main.js 全局挂载引用

// 封装全局挂载 API
import api from 'api/api.js'
Vue.prototype.api = api

三、在组件中直接 this.api 引用

this.api.post('/api', data).then(e => {});
posted @   东八区  阅读(217)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 25岁的心里话
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示