uniapp请求接口封装（接口写在单独js文件夹内）

第一步

1、在项目根目录下新建app目录；
2、在app目录下新建http.js文件用于封装request请求，代码如下：

/* 
		@parms url 接口地址
		@parms method 请求方式
		@parms data 参数
		@parms isUpload 默认false 是否上传
 */

const BASE_URL = "http://localhost:3000" //公共请求头
const TOKEN = uni.getStorageSync('TOKEN') //TOKEN

const request = (url, method, data, isUpload = false) => {
	return new Promise((resolve, reject) => {
		if (!isUpload) {
			uni.request({
				url: BASE_URL + url, //仅为示例，并非真实接口地址。
				data: data,
				method: method,
				header: { //请求头可自定义
					'Content-Type': 'application/x-www-form-urlencoded',
					'X-Access-Token': TOKEN
				},
				success: (res) => { //具体捕获请看自己接口返回的形式
					if (res.data.code == 200 || res.data.code == 0 || res.data.code == 1204) {
						resolve(res)
					} else {
						uni.showModal({
							title: '提示',
							showCancel: false,
							content: res.data.message,
							success(res) {
								if (res.confirm) {
									// console.log('用户点击确定')
									uni.navigateBack({})
								} else if (res.cancel) {
									// console.log('用户点击取消')
								}
							}
						})
					}
				},
				fail(error) {
					reject(error)
				},
				complete() {

				}
			});
		} else {
			uni.uploadFile({
				url: _url,
				filePath: data,
				name: 'file',
				header: {
					'X-Access-Token': TOKEN
				},
				formData: {
					file: data,
					fileType: '1',
					pathType: "1"
				},
				success: (uploadFileRes) => {
					let parms = JSON.parse(uploadFileRes.data)
					let imgurls = parms.result.filePath
					resolve(imgurls)
				},
				fail: () => {
					uni.showToast({
						title: '图片上传失败',
						icon: 'none'
					})
				}
			});
		}

	})
}

export default {
	request  //向外暴露request
}

3、同样在app目录下新建app.js文件，在文件中引入上面的http.js文件，代码如下：

import request from './http.js' //引入http.js
const api = request
export default {
	getUserInfo: (data) => {
		return api.request('/aab/ccd', 'POST', data) //接口地址
	},
	upload: (data) => {
		return api.request('/ccf/dds', 'POST', data, true) //上传接口地址
	},
	test: (data) => {
		return api.request('/aabb', 'GET', data) //接口地址
	}
}

第二步

打开main.js文件将app.js挂载到全局，操作如下（在你的main.js文件里添加1、 2、两项代码）：

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

import store from './store'
import Api from 'api/api.js'// 1、引入app.js

Vue.config.productionTip = false

Vue.prototype.$store = store

Vue.prototype.$Api = Api//  2、挂载全局

App.mpType = 'app'

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

第三步

到这里uniapp请求就封装好了，所有的请求接口皆可定义在app.js文件中，接下来就是接口的调用实例了：

<template>
	<view class="content">
		<!-- 测试按钮 -->
		<button @click="gogogo">测试</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}	
		},
		methods: {
			gogogo() {
			//调用test接口
				let parms = this.$Api.test(parms).then(res=>{
				 	console.log(res)
					},err=>{})
			}
		}
	}
</script>

以上就是uniapp的请求接口封装了