UNI-APP封装请求方法

使用说明

将以下复制创建一个命名为index.js的js文件

export default {
	config: {
		baseUrl: "",
		headers: {},
		dataType: "json",
		responseType: "text"
	},
	interceptor: {
		request: null,
		response: null
	},
	request(options) {
		return new Promise((resolve, reject) => {
			let _config = null
			options.url = this.config.baseUrl + options.url
			options.complete = (response) => {
				let statusCode = response.statusCode
				response.config = _config

				if (process.env.NODE_ENV === 'development') {
					if (statusCode === 200) {
					}
				}

				if (this.interceptor.response) {
					let newResponse = this.interceptor.response(response)
					if (newResponse) {
						response = newResponse
					}
				}

				if (statusCode === 200) { //成功
					resolve(response);
				} else {
					reject(response) 
				}
			}

			_config = Object.assign({}, this.config, options)
			_config.requestId = new Date().getTime()

			if (this.interceptor.request) {
				this.interceptor.request(_config)
			}

			if (process.env.NODE_ENV === 'development') {
				if (_config.data) {
				}
			}

			uni.request(_config);
		});
	},
	get(url, data, options) {
		if (!options) {
			options = {}
		}
		options.url = url
		options.data = data
		options.method = 'GET'
		return this.request(options)
	},
	post(url, data, options) {
		if (!options) {
			options = {}
		}
		options.url = url
		options.data = data
		options.method = 'POST'
		return this.request(options)
	},
	put(url, data, options) {
		if (!options) {
			options = {}
		}
		options.url = url
		options.data = data
		options.method = 'PUT'
		return this.request(options)
	},
	delete(url, data, options) {
		if (!options) {
			options = {}
		}
		options.url = url
		options.data = data
		options.method = 'DELETE'
		return this.request(options)
	}
}

把 index.js 文件夹 copy 到项目 common/js/http/ 目录下
在main.js添加以下代码

import http from '@/common/js/http/'
	//设置baseUrl
	http.config.baseUrl = "http://localhost:8080/api/"
	//设置请求前拦截器
	http.interceptor.request = (config) => {
		//添加通用参数
		config.header = {
			"token": "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
		}
	}
	//设置请求结束后拦截器
	http.interceptor.response = (response) => {
		//判断返回状态 执行相应操作
		return response;
	}

直接引用后使用

<script>
		import http from '@/common/js/http/'

		export default {
			data() {
				return {}
			},
			onLoad(option) {
				this.test();
				this.test1);
			},
			methods: {
				test () {
					http.get('user/list').then((res)=>{
						console.log(JSON.stringify(res))
					})

					http.get('user/list', {status: 1}).then((res)=>{
						console.log(JSON.stringify(res))
					})

					http.post('user', {id:1, status: 1}).then((res)=>{
						console.log(JSON.stringify(res))
					})

					http.put('user/1', {status: 2}).then((res)=>{
						console.log(JSON.stringify(res))
					})

					http.delete('user/1').then((res)=>{
						console.log(JSON.stringify(res))
					})
				},
				async test1() {
					let res = await this.http.get('user/list');
					console.log(JSON.stringify(res));
				}
			}
		}
	</script>

全局挂载后使用
在 main.js 添加以下代码

import http from '@/common/js/http/'
	Vue.prototype.$http = http

页面中使用

<script>
		export default {
			data() {
				return {}
			},
			onLoad(option) {
				this.test();
				this.test1);
			},
			methods: {
				test () {
					this.$http.get('user/list').then((res)=>{
						console.log(JSON.stringify(res))
					})

					this.$http.get('user/list', {status: 1}).then((res)=>{
						console.log(JSON.stringify(res))
					})

					this.$http.post('user', {id:1, status: 1}).then((res)=>{
						console.log(JSON.stringify(res))
					})

					this.$http.put('user/1', {status: 2}).then((res)=>{
						console.log(JSON.stringify(res))
					})

					this.$http.delete('user/1').then((res)=>{
						console.log(JSON.stringify(res))
					})
				},
				async test1() {
					let res = await this.$http.get('user/list');
					console.log(JSON.stringify(res));
				}
			}
		}
	</script>