Uni-app封装请求

Uni-app封装请求

新建一个api.js文件，主要放请求封装的代码

const baseUrl = 'http://172.0.0.1:8080';
const httpRequest = (opts, data) => {
	let httpDefaultOpts = {
		url: baseUrl + opts.url,
		data: data,
		method: opts.method,
		header: opts.method == 'get' ? {
			'X-Requested-With': 'XMLHttpRequest',
			"Accept": "application/json",
			"Content-Type": "application/json; charset=UTF-8"
		} : {
			'X-Requested-With': 'XMLHttpRequest',
			'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
		},
		dataType: 'json',
	}
	let promise = new Promise(function(resolve, reject) {
		uni.request(httpDefaultOpts).then(
			(res) => {
				resolve(res[1])
			}
		).catch(
			(response) => {
				reject(response)
			}
		)
	})
	return promise
};
//带Token请求
const httpTokenRequest = (opts, data) => {
	let token = "";
	uni.getStorage({
		key: 'token',
		success: function(ress) {
			token = ress.data
		}
	});
	//此token是登录成功后后台返回保存在storage中的
	let httpDefaultOpts = {
		url: baseUrl + opts.url,
		data: data,
		method: opts.method,
		header: opts.method == 'get' ? {
			'Token': token,
			'X-Requested-With': 'XMLHttpRequest',
			"Accept": "application/json",
			"Content-Type": "application/json; charset=UTF-8"
		} : {
			'Token': token,
			'X-Requested-With': 'XMLHttpRequest',
			'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
		},
		dataType: 'json',
	}
	let promise = new Promise(function(resolve, reject) {
		uni.request(httpDefaultOpts).then(
			(res) => {
				resolve(res[1])
			}
		).catch(
			(response) => {
				reject(response)
			}
		)
	})
	return promise
};

export default {
	baseUrl,
	httpRequest,
	httpTokenRequest
}

封装代码为二种，一种是无token请求，另一种是token，按照自己的需求去调用想要的请求方式

在main.js将它全局挂载

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

Vue.prototype.$myRequest = myRequest

Vue.config.productionTip = false

App.mpType = 'app'

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

在页面中使用$myRequest(可自己定义)去调用封装好的请求方法

let opts = {
	url: '/api/add',
	method: 'post'
};
let param = {
	deviceId: this.deviceCode,
	deviceName: this.deviceName
};
this.$myRequest.httpTokenRequest(opts, param).then(res => {
	console.log(res.data);
	//打印请求返回的数据

}, error => {
	console.log(error);
})

到这里一个简易详情的uni-app封装请求就结束了，自己有更多的需求，可以自己去添加和修改
感兴趣的小伙伴可以关注我的公众号，我会在在公众号同步更新的学习笔记，好的方法和视频