知識
不管是網(wǎng)站,軟件還是小程序,都要直接或間接能為您產(chǎn)生價(jià)值,我們在追求其視覺表現(xiàn)的同時(shí),更側(cè)重于功能的便捷,營銷的便利,運(yùn)營的高效,讓網(wǎng)站成為營銷工具,讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏壧峁┍憬莸闹С郑?
您當(dāng)前位置>首頁 » 新聞資訊 » 小程序相關(guān) >
怎么封裝微信小程序的數(shù)據(jù)請求
發(fā)表時(shí)間:2020-9-22
發(fā)布人:葵宇科技
瀏覽次數(shù):71
1.目錄結(jié)構(gòu)
在根目錄下創(chuàng)建http
目錄及api.js
文件fetch.js
以及http.js
文件;
在根目錄下創(chuàng)建env目錄,創(chuàng)建index.js配置并導(dǎo)出多個(gè)開發(fā)環(huán)境
module.exports={
//開發(fā)環(huán)境
Dev:{
"BaseUrl":"https://www.develep.com"
},
//測試環(huán)境
Test:{
"BaseUrl":"https://www.test.com"
},
//生產(chǎn)環(huán)境
Prod:{
"BaseUrl": "https://api.douban.com"
}
}
在api.js中統(tǒng)一管理,請求的url地址
module.exports={
"hot":"/v2/movie/in_theaters",
"top250": "/v2/movie/top250",
"detail": "v2/movie/subject"
}
在fetch.js中用promise對wx.request()進(jìn)行封裝
//封裝 http
module.exports= (url, path,method, params)=>{
return new Promise((resolve, reject) => {
wx.request({
url: `${url}/${path}`,
method:method,
data: Object.assign({}, params),
header: { 'Content-Type': 'application/text' },
success: resolve,
fail: reject
})
})
}
在http.js,根據(jù)當(dāng)前環(huán)境,設(shè)置相應(yīng)的baseUrl
, 引入fetch中封裝好的promise請求,封裝基礎(chǔ)的get\post\put\upload等請求方法,設(shè)置請求體,帶上token和異常處理等;
設(shè)置對應(yīng)的方法并導(dǎo)出;
const api = require('./api.js')
const config=require('../env/index.js');
const fetch=require('./fetch.js');
let Env='Prod';
let baseUrl = config[Env].BaseUrl;
let key ='?apikey=0b2bdeda43b5688921839c8ecb20399b'
console.log(baseUrl);
console.log(api)
function fetchGet(path,params){
return fetch(baseUrl,path,'get',params);
}
function fetchPost(path,params){
return fetch(baseUrl,path,'post',params);
}
module.exports={
hot(paramas={}){
return fetchGet(api.hot+key,paramas);
},
top250(params={}){
return fetchGet(api.top250+key,params);
},
detail(id,params={}){
return fetchGet(api.detail+`/${id}`+key,params)
}
}
在全局app.js中導(dǎo)入http,注冊到根組件
const http=require('./http/http.js')
// App.config=config[env];
App({
http, // http.fetch
})
在具體頁面導(dǎo)入,并使用;
//獲取應(yīng)用實(shí)例
const app = getApp();
Page({
data: {
list:[]
}
onLoad: function () {
app.http.hot().then((res)=>{
this.setData({
list: res.data.list
}) })
}
相關(guān)案例查看更多
相關(guān)閱讀
- 云南網(wǎng)站建設(shè)列表網(wǎng)
- 商標(biāo)
- 百度推廣
- 北京小程序開發(fā)
- 網(wǎng)絡(luò)公司排名
- 云南網(wǎng)站建設(shè)案例
- 云南百度小程序
- 網(wǎng)站建設(shè)服務(wù)公司
- painter
- 網(wǎng)頁制作
- 云南小程序代建
- 小程序表單
- 云南省建設(shè)廳網(wǎng)站
- 汽車回收管理系統(tǒng)
- 生成海報(bào)
- 云南小程序公司
- 云南小程序開發(fā)推薦
- 云南省建設(shè)廳網(wǎng)站官網(wǎng)
- 云南企業(yè)網(wǎng)站
- 昆明網(wǎng)站設(shè)計(jì)
- 小程序
- 買小程序被騙
- 云南網(wǎng)站建設(shè)公司排名
- 昆明小程序開發(fā)
- 云南網(wǎng)站建設(shè)招商
- 云南小程序開發(fā)報(bào)價(jià)
- 汽車報(bào)廢管理系統(tǒng)
- 云南小程序開發(fā)首選品牌
- 云南網(wǎng)站建設(shè)報(bào)價(jià)
- web