使用promise封裝wx.request()

1.目錄結構

首先在env目錄下建立index.js,裡面配置開發環境並將其匯出

//配置不同的開發環境
module.exports={
  //開發環境
  Dev:{
    baseUrl:'http://123.207.32.32:8000/api/h8', //開發環境的介面
  },
  //測試環境
  Test:{
    baseUrl:'http://www.test.com'
  },
  //生產環境
  Prod:{
    baseUrl:'http://www.api.douban.com'
  }
}

在config.js中統一定義所有的請求url地址，方便維護和管理

//定義請求路徑並丟擲物件
module.exports={
  "banner":"/home/multidata",
  "list":"/home/list"
}

在request.js中丟擲一個request函式，該函式返回值是一個promise物件

//封裝wx.request()網路模組

//丟擲一個函式 這個函式會返回一個promise物件
module.exports=(url,method,data)=>{
  let p=new Promise((resolve,reject)=>{
    wx.request({
      url: url,       //請求路徑
      method:method,    //請求方式
      data:Object.assign({},data),   //請求引數，使用淺拷貝
      header:{"Content":"application/text"},  //請求頭，預設引數
      success(res){   //成功的回撥函式
        resolve(res)
      },
      fail(err){    //失敗的回撥
        reject(err)
      }
    })
  })

  return p;
}

入口函式index，這裡是入口檔案，要做到別人一看就知道這個資料夾是幹嘛用的以及怎麼使用

//入口函式，引入環境變數，路徑和方法在此處統一呼叫
const Env=require('../env/index')
const Url=require('./config')
const Request=require('./request')

console.log(Request);

//確定當前環境
let baseUrl=Evn.Dev.baseUrl
//如果介面需要token鑑權，獲取token
let token=wx.getStorageSync('token') //獲取本地儲存的token

//請求的函式
//banner請求
function banner(){
  //呼叫該方法，傳遞路徑(環境字首+路徑),方式,引數 函式結果會返回一個promise物件
  return Request(baseUrl+Url.banner,'get',{})
}
//xxx請求 直接照搬就行

//將封裝好的方法丟擲
module.exports={
  banner
}

最後一步咯，在全域性app.js中匯入index，註冊到根元件

//app.js

//引入http請求模組
const http=require('./http/index')

//直接在App方法裡簡單粗暴掛載一個http方法，掛上去就能用
App({
  http,
})

如何使用

//哪個檔案要傳送請求，就在頭部引入app.js裡面app這個全域性物件
const app=getApp()
//使用方法簡單粗暴,括號內可以傳引數
app.http.banner().then(res=>{
	console.log(res)
})

大概一看，和vue封裝axios的思路基本一致——
單獨定義路徑和請求函式，統一在index.js中呼叫，並將方法掛載到全域性物件。
以後在修改時只需要修改對應的請求路徑或新增新的請求方法。