1. 程式人生 > >微信小程式 用Promise封裝wx.request(),簡化程式碼結構

微信小程式 用Promise封裝wx.request(),簡化程式碼結構

在app.js中 新增自定義post方法

//app.js
App({

    //other code...

   /** 
    * 自定義post函式,返回Promise
    * +-------------------
    * author: 武當山道士<912900700@qq.com>
    * +-------------------
    * @param {String}      url 介面網址
    * @param {arrayObject} data 要傳的陣列物件 例如: {name: '武當山道士', age: 32}
    * +-------------------
    * @return
{Promise} promise 返回promise供後續操作 */
post : function(url, data){ var promise = new Promise((resolve, reject) => { //init var that = this; var postData = data; /* //自動添加簽名欄位到postData,makeSign(obj)是一個自定義的生成簽名字串的函式 postData.signature = that.makeSign(postData); */
//網路請求 wx.request({ url: url, data: postData, method: 'POST', header: { 'content-type': 'application/x-www-form-urlencoded' }, success: function (res) {//伺服器返回資料 if (res.data.status == 1) {//res.data 為 後臺返回資料,格式為{"data":{...}, "info":"成功", "status":1}, 後臺規定:如果status為1,既是正確結果。可以根據自己業務邏輯來設定判斷條件
resolve( res.data.data ); } else {//返回錯誤提示資訊 reject( res.data.info ); } }, error: function (e) { reject('網路出錯'); } }) }); return promise; }, //other codes... )}

其他頁面呼叫app.post()函式
pages/index.js

//pages/index.js
const app = getApp();
//獲取首頁傳參的廣告aid
page({
  //other code...

  //頁面第一次載入
  onLoad: function () {
     var data = {id: 18};//要傳的陣列物件
     wx.showLoading({
         title: '載入中...',
      })
     //呼叫 app.js裡的 post()方法
     app.post('http://介面網址', data).then( (res)=>{
        console.log(res);//正確返回結果
        wx.hideLoading();
     } ).catch( (errMsg)=>{
        console.log(errMsg);//錯誤提示資訊
        wx.hideLoading();
     } );
  },
  //other code...
})

相關推薦

程式 Promise封裝wx.request()簡化程式碼結構

在app.js中 新增自定義post方法 //app.js App({ //other code... /** * 自定義post函式,返回Promise *

程式Promise解決wx.request的非同步時序問題

在app.js中寫一個公用方法(例如獲取使用者資訊),在頁面中要根據使用者資訊變動頁面顯示內容。 由於網路和非同步的問題,經常發生資料獲取在改動頁面顯示內容的程式碼之後。 為了解決這個時序非同步的問題,採用了Promise。 注意:網上查到微信小程式已於2017.12支

程式資料請求方法wx.request

<view wx:for='{{images}}' wx:key = 'index'>     <image src='{{item.pic}}'></image>    &nbs

程式 豆瓣專案中wx.request遇到的問題

首先說遇到的問題 index.js var API_URL = 'https://api.douban.com/v2/movie/top250'; Page({ data: { movies: [] }, onLoad: function () {

基於mpvue程式 es6-promise.js封裝請求

在微信小程式中,實現前後臺互動用到的介面是wx.request() 在開發的過程中,每個涉及到互動的檔案都要使用wx.request()顯得很繁瑣,而且統一處理起來不方便,比如要改請求頭的話就需要每個檔案去改 所以我就嘗試對wx.request()進行封裝,統一管理起來

程式--video完成一個視訊彈幕的專案

1.視訊播放器 2.選擇彈幕顏色 3.彈幕來了...   第一:  index.wxml <!--index.wxml--> <view class="section tc"> <video id="myVideo" style

程式 canvas繪製的圖插入到分享中

用canvas繪製圖 createNewImg: function () { var that = this; var ctx = wx.createCanvasContext('mycanvas'); ctx.setFillStyle("#F4F4F4"); // context.set

程式介面請求封裝分享~~

使用原生小程式方法時候,我們經常會需要封裝請求wx.request,下面分享一下我的一些方法 首先我們在util資料夾下面新建一個叫request的檔案; 以下是request檔案下面的內容 let devBaseUrl = 'https:/abc.com' let prdBaseUrl

程式之條件渲染 wx:if與hidden比較

wx:if 1、在框架中,使用wx:if="{{condition}}" 來判斷是否需要渲染該程式碼: 如果條件成立就渲染 <view wx:if="{{condition}}">123</view> 2、在花括號中也可以寫條件判斷 <view>

程式js控制類名的切換用於改變不同的樣式

有時候,介面文字可能會很多,我們一開始設計介面的時候一定希望讓他展示出來幾行就行了,如果使用者需要檢視隱藏的部分,點選展開詳情就能把剩餘的內容顯示出來。 方法可能有些不好,但是實現功能了,有更好的方法可以一起交流哦 配圖解釋 設計樣式: 展開樣式 test.wxml

程式git進行版本控制的相關操作

一、將專案原始碼上傳到git上 二、下載git上的原始碼到本地 三、在微信小程式開發工具上進行開發 四、上傳程式碼 1.在控制檯進入程式碼所在資料夾 2.提交程式碼方法 git add -A

程式登入元件封裝 —— 完成已登入狀態才能繼續的操作

小編推薦:Fundebug專注於JavaScript、微信小程式、微信小遊戲,Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務,眾多大佬公司都在使用。 此元件是專案中用到的,專案結束了,分享給大家,希望能對大家有所幫助 這裡只討論怎樣解決需要已

程式上傳圖片wx.chooseImage和wx.uploadFile

wxml: <view class="container"> <view class='photo-wrap'> <view class='photo-image-wrap photo-image-wrap

程式console.log列印json資料

JSON.stringify(fun.nav_more(cp_nav_state)) JSON.parse()和JSON.stringify() JSON.parse() 方法用於將一個 JSON

程式網路請求封裝

解決什麼問題 微信小程式請求 Restful api的封裝 微信小程式請求 SOUP 協議格式資料的封裝 什麼Restful apiapi,什麼是SOUP 協議請自行搜尋。廢話不多說,直接上程式碼(talk is cheap ,show the code

程式定時器實現倒計時效果

平常在微信小程式開發的時候,因專案的需求,倒計時必不可少,下面主要講解定時器在微信小程式中的使用。這裡要先宣告一點的就是,該篇主要實現倒計時功能,而且實現是時長較短的倒計時,其他的優化什麼的不作主要考慮。如果實現簡單的60s倒計時效果,我們可直接使用setInterval即可

程式之音訊播放-wx.createInnerAudioContext()

咱們先看看官方示例地址:https://mp.weixin.qq.com/debug/wxadoc/dev/api/createInnerAudioContext.html建立innerAudioCon

程式初體驗--封裝http請求

最近看了一下微信小程式,大致翻了一下,發現跟angular很相似的,但是比angular簡單的很多具體可參考官方文件 https://mp.weixin.qq.com/debug/wxadoc/dev/framework/app-service/page.html?t

程式---客服訊息介面呼叫拿來即

<button open-type="contact" class='contactService' session-from="{{'https://https://mp.weixin.qq.com/debug/wxadoc/introduction/imag

程式圖表外掛(wx-charts)

微信小程式圖表外掛(wx-charts)基於canvas繪製,體積小巧支援圖表型別餅圖、線圖、柱狀圖 、區域圖等圖表圖形繪製,目前wx-charts是微信小程式圖表外掛中比較強大好使的一個。 wx-charts基於canvas繪製的微信小程式圖表外掛