promise封裝wx.request()
使用promise封裝wx.request()
1、目錄結構
在根目錄下建立http
目錄及api.js
檔案fetch.js
以及http.js
檔案;
在根目錄下建立env
目錄,建立index.js
配置並匯出多個開發環境
module.exports={
//開發環境
Dev:{
"BaseUrl":"https://www.develep.com"
},
//測試環境
Test:{
"BaseUrl":"https://www.test.com"
},
//生產環境
Prod:{
"BaseUrl": "https://api.douban.com"
}
}
在api.js中統一管理,請求的url地址
module.exports={
"hot":"/v2/movie/in_theaters",
"top250": "/v2/movie/top250",
"detail": "v2/movie/subject"
}
在fetch.js中用promise對wx.request()進行封裝
//封裝wx.request()網路模組
module.exports=(url,method,data)=>{
let p=new Promise((resolve,reject)=>{
wx.request({
url: url,
method:method,
data:Object.assign({},data),
header:{'Content-Type': 'application/text' },
success(res){
resolve(res)
},
fail(err){
reject(err)
}
})
})
return p;
}
在http.js,根據當前環境,設定相應的baseUrl
, 引入fetch
中封裝好的promise請求,封裝基礎的get\post\put\upload等請求方法,設定請求體,帶上token和異常處理等;
設定對應的方法並匯出;
const evn=require('../env/index.js')
const api=require('./api')
const fetch = require('./fetch')
//確定開發環境
let baseUrl=evn.devBaseUrl;
//如果介面需要token鑑權,獲取token
let token=wx.getStorageSync('token');
//輪播請求函式
function banner(){
return fetch(baseUrl+api.banner,'get',{})
}
//list列表函式
//分類介面函式
module.exports={
banner
}
在全域性app.js中匯入http,註冊到根元件
const http=require('./http/http.js')
// App.config=config[env];
App({
http, // http.fetch
})
在具體頁面匯入,並使用;
//獲取應用例項
const app = getApp();
Page({
data: {
list:[]
}
onLoad: function () {
app.http.banner().then((res)=>{
this.setData({
list: res.data.list
}) })
}
相關文章
- 使用promise封裝wx.request()Promise封裝
- 微信小程式 wx.request 的封裝微信小程式封裝
- 小程式wx.request()方法簡單封裝封裝
- 六九、ajax,fetch,axios,wx.request封裝iOS封裝
- 小程式 二次封裝wx.request方法封裝
- 微信小程式wx.request的簡單封裝微信小程式封裝
- jsonp promise 封裝JSONPromise封裝
- 分享:用promise封裝ajaxPromise封裝
- 易理解的Promise封裝Promise封裝
- jsonp的promise封裝JSONPromise封裝
- 用promise封裝一個ajaxPromise封裝
- 應用Promise封裝Ajax實踐Promise封裝
- 小程式API進行promise封裝APIPromise封裝
- 小程式封裝wx.request請求並建立介面管理檔案封裝
- 原生es5封裝的Promise物件封裝Promise物件
- 原生es6封裝一個Promise物件封裝Promise物件
- 基於小程式請求介面 wx.request 封裝的類 axios 請求封裝iOS
- 使用Promise封裝fetch庫(增刪改查)Promise封裝
- 基於Promise實現對Ajax的簡單封裝Promise封裝
- 小程式非同步介面封裝,使用Promise,改良後的。非同步封裝Promise
- ES6(四)用Promise封裝一下IndexedDBPromise封裝Index
- ES6中Promise 承諾物件封裝非同步操作解析Promise物件封裝非同步
- ES6 Promise 應用: 回撥函式方法封裝成 Promise + async/await 同步化Promise函式封裝AI
- 使用promise封裝jquery的ajax來實現async和await方式Promise封裝jQueryAI
- 【封裝那些事】 缺失封裝封裝
- 封裝封裝
- vue3 專用 indexedDB 封裝庫,基於Promise告別回撥地獄VueIndex封裝Promise
- 【封裝小技巧】is 系列方法的封裝封裝
- 【JavaScript框架封裝】公共框架的封裝JavaScript框架封裝
- Sqlite封裝1-基本封裝-SqliteToolSQLite封裝
- Flutter 封裝:富文字 RichText 極簡封裝Flutter封裝
- Dapper的封裝、二次封裝、官方擴充套件包封裝,以及ADO.NET原生封裝APP封裝套件
- AVPlayer封裝封裝
- ajax 封裝封裝
- 封裝OCX封裝
- 封裝介面封裝
- sqlite封裝SQLite封裝
- java封裝Java封裝