第微信小程序網(wǎng)絡(luò)請(qǐng)求模塊封裝的具體實(shí)現(xiàn)目錄前言具體實(shí)現(xiàn)1.確定結(jié)構(gòu)2.service網(wǎng)絡(luò)請(qǐng)求的基本配置和公共方法3.apis創(chuàng)建對(duì)應(yīng)功能模塊的網(wǎng)絡(luò)請(qǐng)求方法4.使用總結(jié)

前言

在進(jìn)行一個(gè)微信小程序項(xiàng)目開發(fā)的時(shí)候我需要網(wǎng)絡(luò)請(qǐng)求模塊和后端數(shù)據(jù)進(jìn)行溝通；接下來(lái)就和我一起簡(jiǎn)單的封裝的一下網(wǎng)絡(luò)請(qǐng)求模塊吧。

具體實(shí)現(xiàn)

1.確定結(jié)構(gòu)

在根目錄新建service和apis文件夾；

service用來(lái)做網(wǎng)絡(luò)請(qǐng)求的基本配置和輸出公共的網(wǎng)絡(luò)請(qǐng)求方法；

apis用來(lái)創(chuàng)建對(duì)應(yīng)功能模塊的網(wǎng)絡(luò)請(qǐng)求方法(ex:操作音樂(lè)、操作視頻)；

2.service網(wǎng)絡(luò)請(qǐng)求的基本配置和公共方法

config.js用來(lái)放置一些基本的配置：

//config.js

constBASE_URL="/apis"

constTIMEOUT=10000

export{

BASE_URL,

TIMEOUT

}

這里我們簡(jiǎn)單配置了網(wǎng)絡(luò)請(qǐng)求的地址BASE_URL和超時(shí)的時(shí)間TIMEOUT;

index.js創(chuàng)建網(wǎng)絡(luò)請(qǐng)求，生成公共方法：

import{BASE_URL,TIMEOUT}from'./config'

classMYRequest{

request(url,method,data){

//返回Promise對(duì)象

returnnewPromise((resolve,reject)={

wx.request({

url:BASE_URL+url,

timeout:TIMEOUT,

method:method,

data:data,

success:(res)={

resolve(res);

fail:(res)={

reject(res);

get(url,params){

returnthis.request(url,"GET",params);

post(url,data){

returnthis.request(url,"POST",data);

constmyRequest=newMYRequest;

exportdefaultmyRequest;

這里使用的是微信小程序官方的網(wǎng)絡(luò)請(qǐng)求APIwx.request，對(duì)他進(jìn)行一個(gè)封裝。：參考地址;

為了讓我們能很方便的拿到數(shù)據(jù)和抓取錯(cuò)誤，我們返回了一個(gè)Promise對(duì)象，使用的時(shí)候就像這樣：

myRequest.get('XXX',{

data:data

}).then(res={

//拿到數(shù)據(jù)，處理數(shù)據(jù)

}).cath(res={

//抓取錯(cuò)誤

console.log(res);

});

我們還新增兩個(gè)常用的網(wǎng)絡(luò)請(qǐng)求方法get()和post(),在每次調(diào)用的時(shí)候執(zhí)行request(url,GET/POST,params)方法進(jìn)行數(shù)據(jù)請(qǐng)求并返回Promise對(duì)象。

3.apis創(chuàng)建對(duì)應(yīng)功能模塊的網(wǎng)絡(luò)請(qǐng)求方法

引入剛剛創(chuàng)建的service/index.js

//api_music.js

importApiServicefrom"../service/index"

exportfunctiongetMusic(singer,limit=10){

returnApiService.get('/music',{

singer:singer,

limit:limit,

}

我們導(dǎo)出getMusic(singer,limit=10)方法，這樣我們就創(chuàng)建好了一個(gè)根據(jù)歌手名字查找歌曲的get網(wǎng)絡(luò)請(qǐng)求，當(dāng)我們?cè)谛枰褂眠@個(gè)網(wǎng)絡(luò)請(qǐng)求的頁(yè)面的時(shí)候，我們只需要引入改方法，就可以直接使用了。

我個(gè)人喜歡對(duì)不同的功能模塊都創(chuàng)建一個(gè)js文件，api_music.jsapi_singer.js這樣我看到這個(gè)api文件我就可以知道他是干什么的屬于哪一個(gè)功能，我修改起來(lái)效率會(huì)高很多。

4.使用

根據(jù)對(duì)應(yīng)的功能，引入該功能模塊需要用到的網(wǎng)絡(luò)請(qǐng)求方法；

//pages/music-list/index.js

import{getMusic}from"../../apis/api_video";

Page({

*頁(yè)面的初始數(shù)據(jù)

data:{

musicList:null

*生命周期函數(shù)--監(jiān)聽頁(yè)面加載

onLoad:function(options){

getMusic("周杰倫").then(

res={

this.setData({musicList:res.data.data})

).catch(

res={

console