uni-app开发小程序封装API接口请求

一、建立一个https.js文件(接口地址根据自己的地址填写)

// 区分开发环境和生产环境  接口地址
let baseUrl;

if (process.env.NODE_ENV === 'development') {
    baseUrl = 'xxxxxxxxxxx'    // 开发环境
} else {
	baseUrl = 'xxxxxxxxxxx'    // 生产环境
}

export function https(config) {
	//显示loading
	wx.showLoading({
		title: '加载中...'
	});	
	//设置请求头
	config.header = {
		'content-type': 'application/json',
	};
	//检查缓存中有没有token
	var token = wx.getStorageSync('token');
	if (token != '') {
		header.Authorization = token
	}	
	config.url = baseUrl + config.url;   // 请求地址
	let promise = new Promise(function(resolve, reject) {
		uni.request(config).then(res => {
			wx.hideLoading()      //隐藏loading
			if (res[0]) {
				uni.showToast({
					title: "数据获取失败",
					icon: "none",
					duration: 1500
				})
				resolve(false);
			} else {
				let data = res[1].data; 
				if (data.code == 1) {
					resolve(data);
				} else {
					resolve(data);
				}
			}
		}).catch(error => {
			wx.hideLoading()      //隐藏loading
			reject(error);
		})
	})
	return promise
}

二、再建立一个api.js文件，引入刚刚封装好的https.js文件。api是作为一个接口集

import {https}  from '@/components/api/https.js';    // 引入刚刚封装好的https
	
class api{
	async getList(data) {
		const res = await https({
			method: "get", // 请求方式
			url: '/getJoke', // 请求url
			data: data,// 参数
		})
		return res
	}
	// 下面可以接着写API接口集
	// 接口二
	// 接口三
	// ......
}

export default new api()

三、main.js全局引用刚刚封装好的API接口集，绑定到原型

import api from './components/api/api.js'
Vue.prototype.$dy_api = api

四、页面调用(没有参数可不写)

getData(){		
	this.$dy_api.getList({page:"1",count:"2",type:"video"}).then((res)=>{
	console.log(res)
  })	
}

请求结果图