Promiseパッケージを使用したウィジェットwx.requestの実現方法


業務上の必要がありますので、httpごとに依頼先を追加しますので、毎回重複コードをたくさん書きます。
今はwx.requestを簡単にカプセル化しようと試みています。request方法を呼び出して、毎回自動的にheaderヘッダ情報を携帯するように要求します。そうすると、手間が省けます。よくあるget post put deleteの四つの要求方法を含んで、Promise方式の呼び出しをサポートします。
パッケージコード

class request {
 constructor() {
  this._baseUrl = 'https://xxx.com/api';
  this._token = wx.getStorageSync('token');
  this._header = {'Authorization': 'Bearer ' + token}
 }

 /**
  * 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: this._baseUrl + url,
    data: data,
    header: header,
    method: method,
    success: (res => {
     if (res.statusCode === 200) {
      //200:            
      resolve(res)
     } else {
      //    ,        
      reject(res)
     }
    }),
    fail: (res => {
     reject(res)
    })
   })
  })
 }
}

export default request

使い方
app.jsに導入する:

import request from './request.js'
App({
 myRequest(){
  return new request();
 }
})
使用するページに取り入れるだけでいいです。

const app = getApp();//          
const ajax = app.myRequest();//      request()   

Page({
 data:{},
 onLoad(){
  this.getData(); 
 },
 getData(){
  ajax.getRequest('/getList',{id: 1024}).then((res)=>{
   console.log(res);
  }).catch((err)=>{
   console.log(err);
  })
 }
})

使い方も非常に簡単です。
  • 例えばGet要求は、ajax.get Request(url:String、data:Object)である。
  • 例えばPost要求はajax.postrequestです。
  • ...
  • 参考:
    パッケージwx.request
    以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。