526互联

Uni-app 封装 API 请求

发布时间 2023-05-23 14:54:18作者: 东八区

一、在文件夹 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 => {});