基於mpvue微信小程序 promise+wx.request 封裝請求

第一步：

在微信小程序中引入es6-promise

如果是基於mpvue框架進行微信小程序開發，只需要

npm install es6-promise

第二步：

在項目中創建一個utils文件夾，主要用來裝一些用到的工具

然後再utils下面創建一個requet.js

const Promise = require('es6-promise').Promise

function wxPromisify(fn) {
	return function(obj = {}) {
		return new Promise((resolve, reject) => {
			obj.success = function(res) {
				//成功 (只返回res.data)
				resolve(res.data)
			}
			obj.fail = function(res) {
				//失敗
				reject(res)
			}
			fn(obj)
		})
	}
}
//無論promise對象最後狀態如何都會執行
Promise.prototype.finally = function(callback) {
	let P = this.constructor;
	return this.then(
		value => P.resolve(callback()).then(() => value),
		reason => P.resolve(callback()).then(() => {
			throw reason
		})
	);
};
/**
 * 微信請求get方法
 * url
 * data 以對象的格式傳入
 */
function getRequest(url, data) {
	var getRequest = wxPromisify(wx.request)
	return getRequest({
		url: url,
		method: 'GET',
		data: data,
		header: {
			'Content-Type': 'application/json'
		}
	})
}

/**
 * 微信請求post方法封裝
 * url
 * data 以對象的格式傳入
 */
function postRequest(url, data) {
	var postRequest = wxPromisify(wx.request)
	return postRequest({
		url: url,
		method: 'POST',
		data: data,
		header: {
			"content-type": "application/x-www-form-urlencoded"
		},
	})
}

/**
 * 獲取get的URL
 */
function getRquestUrl(url, data) {
	var signArr = [];
	for(var x in data) {
		var sign = x + '=' + data[x];
		signArr.push(sign)
	}

	var signString = '';
	for(var x in signArr) {
		if(parseInt(x) + 1 == 1) {
			signString += signArr[x].toString();
		} else {
			signString += "&" + signArr[x].toString();
		}
	}
	return url + "?" + signString;
}

/*文件上傳*/
function uploadFile(url,files,name,data) {
	return new Promise((resolve, reject) => {
		wx.uploadFile({
			url: url,
			filePath: files,
			name: name,
			formData: data,
			success: (res => {
				if(res.statusCode === 200) {
					//200: 服務端業務處理正常結束
					resolve(res)
				} else {
					reject(res)
				}
			}),
			fail: (res => {
				reject(res)
			})
		})
	})
}

module.exports = {
	postRequest: postRequest,
	getRequest: getRequest,
	getRquestUrl: getRquestUrl,
	uploadFile:uploadFile
}

第三步：

在utils文件夾中 ，新建一個api.js文件，主要用來裝請求的接口

 

import requestAll from './request' // 此處，引入存放對promise處理的文件

const apiUrl = '域名' 
const webUrl = '域名'

class api {

//首頁分享
	indexShare(session,language){
		let data = {
			session,
			language
		}
		return requestAll.postRequest(apiUrl + 'portal/index/wechat_share', data);
	}

}

//暴露接口
export default {
	api:api
}

第四步：

在主文件main.js中 添加api屬性 （這裏設置纔可以在頁面中使用）

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

Vue.config.productionTip = false
App.mpType = 'app'

import Vuex from 'vuex'
Vue.use(Vuex)

import api from './utils/api'
Vue.prototype.$api = api

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

第五步：

在頁面中引用

由於mpvue不可以像vue那樣直接 this.$api拿到暴露的接口屬性

需要this.$api.api.prototype 纔可以拿到api中定義的funciton

<script>


	export default {
		data() {
			return {
				Request: this.$api.api.prototype, //請求頭
			}
		},

		methods: {
                    
		    indexShare(){
			var that  = this;
			that.Request.indexShare('參數1','...')
					.then(res =>{
                                                //成功
//						console.log(res)
						
					})
					.catch(res =>{
                                                //失敗
						console.log(res)
					})
                    }
       }
</script>

 

這樣就可以用promise封裝wx.request請求後端接口了，謝謝！ 不喜勿噴！