前言
封裝wx.request()，可以讓我們在使用時更加方便，減少代碼量，
封裝步驟
- 再根目錄新建一個
env檔案夾，在內部新建js檔案，配置介面環境，
- 檔案圖
- 在js檔案中匯出我們配置的介面環境，
module.exports={
//開發模式
devBaseUrl:"開發環境的域名",
//測驗
catchBaseUrl:"測驗環境的域名",
//線上
proBaseUrl:"生產環境的域名"
}
注： 前邊的變數名，可以自定義，
- 在根目錄新建
http檔案夾，在里邊創建3個js檔案，
- 檔案圖片
api.js用于封裝介面
module.exports={
"介面類名":"介面名稱"
}
fetch.js用于封裝wx.request()請求，
module.exports = (url, method, data) => {
let p = new Promise((resolve, reject) => {
wx.request({
url: url,
method: method,
data: Object.assign({}, data),
success(res) {
resolve(res)
},
fail(err) {
reject(err)
}
})
})
return p
}
注： url介面地址，method請求方式，data請求引數
http.js用于請求介面
//匯入環境
const evn=require('../env/index.js')
//匯入介面檔案
const api =require('./api.js')
//匯入封裝的wx.request()
const fetch = require('./fetch.js')
//確定環境
let baseUrl=evn.devBaseUrl;
//請求介面
function banner(){
return fetch(baseUrl+api.介面別名,'請求方式',{請求引數})
}
//匯出請求
module.exports={
banner
}
應用到組件中
- 在
app.js中匯入http.js，
const http=require('./http/http.js')
- 在
app.js中掛載，
App({
http:http
})
- 在組建中創建
app實體，
const app = getApp()
- 就可以在組件中的生命周期函式中使用了，
app.http.匯出的封裝介面函式名().then((res) => {})
總結
初出茅廬，請多多指教，謝謝?！
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/237095.html
標籤：其他
下一篇：promise