微信小程序引入es6promise

微信小程序開發兩個月了.大家的項目都在不斷迭代.已經不是小程序.這時候就會遇到多層回調嵌套的問題.有些目不忍視了.迫不得已引入es6-promise.在微信小程序內測的時候promise不需要手動引入,后來被微信移除了.看看效果.

讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：空間域名、雅安服務器托管、營銷軟件、網站建設、昌邑網站維護、網站推廣。

微信小程序引入es6 promise

promise詳細的介紹我就不說了.有很多大神寫過.

看看目錄,引入es6-promise就可以用了.

微信小程序引入es6 promise

1.網絡請求 wxRequest.js

這里只寫了get和post.

我經常會在網絡請求的時候用微信原生showToast(),所以最后加了finally,方便hideToast()

var Promise = require('../plugins/es6-promise.js')

function wxPromisify(fn) {
 return function (obj = {}) {
 return new Promise((resolve, reject) => {
 obj.success = function (res) {
 //成功
 resolve(res)
 }
 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"
 },
 })
}

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

2.微信其他API wxApi.js

var Promise = require('../plugins/es6-promise.js')

function wxPromisify(fn) {
 return function (obj = {}) {
 return new Promise((resolve, reject) => {
 obj.success = function (res) {
 //成功
 resolve(res)
 }
 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 })
 );
};
/**
 * 微信用戶登錄,獲取code
 */
function wxLogin() {
 return wxPromisify(wx.login)
}
/**
 * 獲取微信用戶信息
 * 注意:須在登錄之后調用
 */
function wxGetUserInfo() {
 return wxPromisify(wx.getUserInfo)
}
/**
 * 獲取系統信息
 */
function wxGetSystemInfo() {
 return wxPromisify(wx.getSystemInfo)
}
module.exports = {
 wxPromisify: wxPromisify,
 wxLogin: wxLogin,
 wxGetUserInfo: wxGetUserInfo,
 wxGetSystemInfo: wxGetSystemInfo
}

3.用法

promise應用場景很多,下面是promise最基本的用法,在then()中returnpromise對象.

這樣有效解決了回調嵌套的問題.讓代碼看起來更優雅.可讀性更高.

var util = require('../../utils/util')
var wxApi = require('../../utils/wxApi')
var wxRequest = require('../../utils/wxRequest')
import config from '../../utils/config'
//獲取應用實例
var app = getApp()
Page({
 data: {
 userInfo: {}
 },
 onLoad: function () {
 var that = this;
 wx.showToast({
 title: '加載中',
 icon: 'loading',
 duration: 10000
 })
 //1.獲取code
 var wxLogin = wxApi.wxLogin()
 wxLogin().then(res => {
 console.log('1.成功了')
 console.log(res.code)
 var url = config.getOpenidUrl;
 var params = {
 appid: "wxed7******2d465",
 secret: "e9c5e4c******09ecc5ebd811",
 js_code: res.code,
 grant_type: "authorization_code"
 }
 //2.獲取openid
 return wxRequest.getRequest(url, params)
 }).
 then(res => {
 console.log('2.成功了')
 console.log(res)
 var url = app.globalData.ip + config.searchDgUrl
 var data = util.json2Form({ phoneNumber: '15971908021' })
 //3.獲取綁定手機號碼
 return wxRequest.postRequest(url, data)
 }).
 then(res => {
 console.log('3.成功了')
 console.log(res)
 //4.獲取系統信息
 var wxGetSystemInfo = wxApi.wxGetSystemInfo()
 return wxGetSystemInfo()
 }).
 then(res => {
 console.log('4.成功了')
 console.log(res)
 //5.獲取用戶信息
 var wxGetUserInfo = wxApi.wxGetUserInfo()
 return wxGetUserInfo()
 }).
 then(res => {
 console.log('5.成功了')
 console.log(res.userInfo)
 that.setData({
  userInfo: res.userInfo
 })
 })
 .finally(function (res) {
 console.log('finally~')
 wx.hideToast()
 })
 }
})

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持創新互聯！

本文題目：微信小程序引入es6promise
標題鏈接：http://m.2m8n56k.cn/article41/pdiehd.html

成都網站建設公司_創新互聯，為您提供小程序開發、網站建設、做網站、軟件開發、外貿建站、營銷型網站建設

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：[email protected]。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容

中文字幕第五页-中文字幕第页-中文字幕韩国-中文字幕最新-国产尤物二区三区在线观看-国产尤物福利视频一区二区

微信小程序引入es6promise