微信小程式 用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繪製的微信小程式圖表外掛