微信小程式wx.request二次封裝
這些天團隊裡開始做小程式開發了,之前沒做過,都是第一次,第一次的感覺大家都懂的。週末看了一下小程式專案的程式碼,在網路請求上發現了一些小問題,最終沒忍住想了點辦法把request封裝了一下。下面來看看吧。
看專案程式碼時發現了下面幾點問題:
- 網路請求都寫在Page裡,每個請求都要重複的寫wx.request以及一些基礎配置;
- 每個頁面裡都要處理相同型別的異常;
- 後端返的http status code為200以外時,並不能直接進入fail對應函式進行處理;
針對這些問題,首先在專案目錄裡新建了一個apis的目錄,把所有與API請求的東西都放在這個目錄裡,如下圖這樣。
1. 新建一個request類,對wx.request進行簡單封裝
在request類裡做了以下幾件事:
- 在建構函式裡建立預設請求的http header,可以在header裡配製一些內容,在對應請求方法中如果沒有設定header引數,就使用此預設header引數;
- 以get post delete put等方法對request進行封裝,在發起網路請求不需要重複的寫wx.request({method:xxx})這些程式碼,只要呼叫getRequest、postRequest等方法就可以了;
- 在rquest的結果返回處理函式success中,判定服務端返回的狀態程式碼,對於200狀態程式碼的按業務處理成功處理,對於非200的狀態碼按異常處理。
- 預留統一異常處理函式處理介面,可以通過setErrorHandler來設定統一的異常處理,這樣對於一些可以統一處理的異常就不用在業務頁面裡去重複處理了,例如後端返回401的程式碼,就可以統一轉到登入頁面讓使用者登入了;
- 此request不限定服務提供都,可以是自己開發的業務服務端,也可以用於第三方服務的呼叫;
/**
* name: api.js
* description: request處理基礎類
* author: 徐磊
* date: 2018-5-19
*/
class request {
constructor() {
this._header = {}
}
/**
* 設定統一的異常處理
*/
setErrorHandler(handler) {
this._errorHandler = handler;
}
/**
* GET型別的網路請求
*/
getRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'GET')
}
/**
* DELETE型別的網路請求
*/
deleteRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'DELETE')
}
/**
* PUT型別的網路請求
*/
putRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'PUT')
}
/**
* POST型別的網路請求
*/
postRequest(url, data, header = this._header) {
return this.requestAll(url, data, header, 'POST')
}
/**
* 網路請求
*/
requestAll(url, data, header, method) {
return new Promise((resolve, reject) => {
wx.request({
url: url,
data: data,
header: header,
method: method,
success: (res => {
if (res.statusCode === 200) {
//200: 服務端業務處理正常結束
resolve(res)
} else {
//其它錯誤,提示使用者錯誤資訊
if (this._errorHandler != null) {
//如果有統一的異常處理,就先呼叫統一異常處理函式對異常進行處理
this._errorHandler(res)
}
reject(res)
}
}),
fail: (res => {
if (this._errorHandler != null) {
this._errorHandler(res)
}
reject(res)
})
})
})
}
}
export default request
2. 新建一個agriknow類
在agriknow裡面做了以下幾件事:
- 實現所有業務服務呼叫,如查詢所有新聞列表【getNews】,查詢所有課程列表【getCourseList】;
- 實現統一的異常處理,並傳給request;
- 將服務端返回的結果response轉成response.data回傳給API呼叫的地方;
/**
* name: agriknow.js
* description: 農知匯伺服器提供的服務
* author: 徐磊
* date: 2018-5-19
*/
import request from './request.js'
class agriknow {
constructor() {
this._baseUrl = 'https://apis.xxx.xxx.com/dev/apis/train/v1/'
this._defaultHeader = { 'data-tupe': 'application/json' }
this._request = new request
this._request.setErrorHandler(this.errorHander)
}
/**
* 統一的異常處理方法
*/
errorHander(res) {
console.error(res)
}
/**
* 查詢所有新聞列表
*/
getNews(page = 1, size = 10) {
let data = { page: page, size: size }
return this._request.getRequest(this._baseUrl + 'news/client', data).then(res => res.data)
}
/**
* 獲取所有課程
*/
getCourseList(page = 1, size = 10, key = null) {
let data = key != null ? { page: page, size: size, queryValue: key } : { page: page, size: size }
return this._request.getRequest(this._baseUrl + '/course/mobile', data).then(res => res.data)
}
}
export default agriknow
3. 函式的呼叫
- 在app中引用argriknow
import agriknow from './apis/agriknow.js' App({ onLaunch: function () { // 展示本地儲存能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) …… ……
- 定義一個型別為agriknow的屬性並例項化
import agriknow from './apis/agriknow.js' App({ onLaunch: function () { // 展示本地儲存能力 var logs = wx.getStorageSync('logs') || [] logs.unshift(Date.now()) wx.setStorageSync('logs', logs) …… …… }, agriknow:new agriknow() })
- 在Page裡呼叫
const app = getApp(); Page({ data: { courseData: [], page: 1, size: 10, total: 0 }, onLoad: function () { …… …… wx.startPullDownRefresh() this.getdataList(); }, //查詢課程列表 getdataList() { app.agriknow.getCourseList(this.data.page++, this.data.size, '') .then(res => { wx.stopPullDownRefresh() let list = this.data.page > 2 ? this.data.courseData.concat(res.list) : res.list this.setData({ courseData: list }) }) .catch(res => { wx.stopPullDownRefresh() wx.showToast({ title: '出錯了!', icon: 'none' }) }) }, //下拉重新整理 onPullDownRefresh() { console.log("下拉重新整理"); this.getdataList(); }, …… …… })
所有的東西大概就是這個樣子了,就這麼個意思,希望對大家有點用
相關推薦
微信小程式wx.request二次封裝
這些天團隊裡開始做小程式開發了,之前沒做過,都是第一次,第一次的感覺大家都懂的。週末看了一下小程式專案的程式碼,在網路請求上發現了一些小問題,最終沒忍住想了點辦法把request封裝了一下。下面來看看吧。看專案程式碼時發現了下面幾點問題:網路請求都寫在Page裡,每個請求都要重複的寫wx.request以及一
微信小程式 wx.request wepy 簡單封裝
本文出自: http://blog.csdn.net/wyk304443164 很簡單 import sha1 from './sha1' // sign // 簽名 function sign (signObj = {}) { ... // 自行加密
坑:微信小程式wx.request和wx.uploadFile中傳引數的區別
微信小程式中通過元件<form>提交表單的時候,在js中通過e.detail.value得到所提交表單的json格式資料。一般提交表單我們都是通過wx.request請求,提交表單資料,通過引數data傳資料, wx.request({ url: 'test.php', //僅為示例,
微信小程式wx.request踩坑記錄
一:header['content-type'] 為 application/json 的資料 前端 wx.request({ url: apiUrl, //替換成自己的伺服器地址 data: {
微信小程式wx.request()封裝
微信小程式開發過程中,請求用的次數是比較多的,那麼能自己每次的重複程式碼太多,所以還是自己封裝一個請求吧,使程式碼越來越精簡。 現在請求分為兩種一種是GET一種是POST,在微信小程式的請求中POST請求的header中的'content-type'為'applicati
使用Promise對微信小程式wx.request請求方法進行封裝,配有詳細過程
採用Promise的方式來封裝而不採用回撥函式(callBack)的方式封裝的主要好處是防止回撥地獄等。。。 主要分為四個部分: 1、config.js檔案,主要存放小程式的配置,例如請求的伺服器地址 const config = { api_base_url:
微信小程式wx.request後臺資料互動
From:http://blog.csdn.net/a61595579/article/details/53404451 記錄微信小程式wx.request這個api在跟後臺互動時遇上的問題。 1、根據資料,完成第一步,請求傳送,程式碼如下: [javascript] view plain
微信小程式 wx.request 獲取百度API token
wx.request({ url: "https://aip.baidubce.com/oauth/2.0/token", data: { grant_type: "client_credentials",
微信小程式wx.request使用post方式傳參
需要注意的是method是get方式的時候,header為{"Content-Type": 'application/json'},當method為post時,header為{"Content-Type": "application/x-www-form-urlencode
微信小程式wx.request請求用POST後臺得不到傳遞資料
微信小程式的wx.request請求,method設為POST並向後臺傳遞資料,但從後臺返回的資訊來看後臺並沒有獲得傳遞的資料 wx.request({ url: 'url
用es6封裝微信小程式wx.request()函式
封裝原理:(先考慮網路請求中會改變的值,把改變的值作為引數引入)會改變的值:1.url (同一專案url相同,可提前把url放在app.js中作為全域性變數使用)2.data(後臺介面的其他引數)假設後臺返回的資料是這樣:{code: "1", message: "操作成
微信小程式wx.request請求沒反應,真機預覽測試請求無效問題解決總結。
我釋出之後發現,wx.request無法使用,用小程式開發工具測試的都沒有問題,而且校驗了合法域名、web-view(業務域名)、TLS 版本以及 HTTPS 證書,都沒有任何問題,釋出之後,發現了問題,在網上看了很多說法,再次我用自己的理解做個總結。 測試了
微信小程式wx.request請求伺服器json資料並渲染到頁面
微信小程式的資料總不能寫死吧,肯定是要結合資料庫來做資料更新,而小程式資料主要是json資料格式,所以我們可以利用php操作資料庫,把資料以json格式資料輸出即可。現在給大家講一下,微信小程式的wx.request進行伺服器資料請求的用法:官方文件給出了示例程式碼,但是我這
微信小程式wx.request介面封裝
//app.js App({ /** * @name 請求資料 * @param {string} url 請求地址 * @param {object} params 引數 * @param {funct
windows2008 phpstudy https證書配置實現微信小程式wx.request發起的 HTTPS 請求。
伺服器環境:阿里雲 windows2008 phpstudy php5.45+apache 準備資料:申請阿里雲免費證書 選擇證書系統建立 注:下載證書選擇apache 第一步:修改apache目錄下的conf下的httpd.conf配置檔案 1、#LoadModu
微信小程式wx.request接收伺服器返回資訊
Page({ onLoad: function () { var that =this;//=====注意此處,要用that 指代this===== wx.request({ url: 'https://43596470.qcloud.la/1.php',//此處填寫你後臺請求地址 method: 'GET'
微信小程式wx.request請求回來的資料沒有及時顯示到頁面上
出問題的場景 //出問題的程式碼 Page({ data: { swiper: {//頂部輪播 indicatorDots:true, autoplay:tru
微信小程式Ⅵ [wx.request 的回撥使用]
☆ 前言 在微信小程式的開發過程中,wx.request 的請求必不可少 我注意到(也可能剛接觸,知識積累面太少),在外部 js 檔案使用 wx.request 請求伺服器資料時,因為非同步的請求機
微信小程式 wx.request POST請求------中文亂碼問題
問題: 一個簡單的表單,提交後臺返回資料“提交成功”。 以為沒問題了,但是沒過多久後臺小哥就問為啥那麼多亂碼,找了很久原因,發現在提交的時候就已經亂碼了。 嗯,前端問題,然後測試GET/POST方法。GET沒有亂碼,POST亂碼 header這樣寫的 heade
微信小程序 wx.request
bug use OS 後臺 blog res ati datetime AD 一:問題 微信小程序 post請求時,服務器後臺接受不到data裏面的數據的bug。 二:解決辦法 wx.request({ url: ‘http://xxxxxxxxx/Cre