uniapp---封装request 和 API 接口

util 文件夹创建  request.js  和  api.js

// request.js
// 封装request请求

const baseUrl = "https:****";//请求地址

const ajaxTimes = 0;//计算请求次数，隐藏loading加载

export function request(config) {
	ajaxTimes++;

	//显示loading
	uni.showLoading({
		title: '加载中...',
		mask: true
	});
	
	config.url = baseUrl + config.url; // 请求地址
	let promise = new Promise(function(resolve, reject) {
		uni.request(config).then(res => {
			if (res[0]) {
				uni.hideLoading(); //隐藏loading
				uni.showToast({
					title: "数据获取失败",
					icon: "none",
                    mask: true,
					duration: 1500
				})
				return resolve(false);
			} else {
				let data = res[1];
				if (data.code == 200) {
					resolve(data.data);
				} else if (data.code == 404) {
					uni.showToast({
					    title: "未找到请求地址",
					    icon: "none",
                        mask: true,
					    duration: 1500
				    })
				} else {
                    resolve(data.data);
                }
				ajaxTimes--;
				if (ajaxTimes === 0) {
					uni.hideLoading(); //隐藏loading
				}
			}
		}).catch(error => {
			uni.hideLoading(); //隐藏loading
			reject(error);
		})
	})
	return promise
}

// api.js
// 封装请求接口

import { request } from './request.js'	// 引入刚刚封装好的request.js

// url 路径地址
// data 传递的数据
// method 请求类型 POST GET
// headers  headers头部数据

class api{

	// 登录验证
	async getLogin(data) {
		const res = await request ({
			url: "/login",
			method:"POST",
			data: data,
			header: { 'content-Type': 'application/json' },
			
		})
		return res
	}
}

export default new api()

main.js  引用

// main.js

import Vue from 'vue'
import App from './App'
import store from './store'
import api from './util/api.js'

Vue.config.productionTip = false
Vue.prototype.$store = store;
Vue.prototype.$api = api;

App.mpType = 'app'

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

页面调用