微信小程序網(wǎng)絡(luò)請求模塊封裝的具體實現(xiàn)

更新時間：2022年03月01日 10:42:52 作者：喜歡擼貓的帥偉

大家做小程序項目的時候肯定會遇到數(shù)據(jù)對接需求,下面這篇文章主要給大家介紹了關(guān)于微信小程序網(wǎng)絡(luò)請求模塊封裝的具體實現(xiàn),文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下

前言

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

具體實現(xiàn)

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

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

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

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

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

config.js 用來放置一些基本的配置：

//config.js
const BASE_URL = "https://www.qq.com/apis"
const TIMEOUT = 10000

export {
 BASE_URL,
 TIMEOUT
}

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

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

import { BASE_URL, TIMEOUT } from './config'
class MYRequest {
    request(url,method,data){
        //返回Promise對象
        return new Promise((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){
        return this.request(url, "GET", params);
    }
    post(url, data){
        return this.request(url, "POST", data);
    }
}
const myRequest = new MYRequest;
export default myRequest;

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

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

  myRequest.get('XXX', {
    data: data
  }).then(res=>{
      //拿到數(shù)據(jù)，處理數(shù)據(jù)
  }).cath(res=>{
      //抓取錯誤
      console.log(res);
  });

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

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

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

//api_music.js
import ApiService from "../service/index"
export function getMusic(singer , limit = 10){
  return ApiService.get('/music', {
    singer: singer,
    limit: limit,
  })
}

我們導(dǎo)出 getMusic(singer , limit = 10)方法，這樣我們就創(chuàng)建好了一個根據(jù)歌手名字查找歌曲的get網(wǎng)絡(luò)請求，當(dāng)我們在需要使用這個網(wǎng)絡(luò)請求的頁面的時候，我們只需要引入改方法，就可以直接使用了。
我個人喜歡對不同的功能模塊都創(chuàng)建一個js文件，api_music.js api_singer.js 這樣我看到這個api文件我就可以知道他是干什么的屬于哪一個功能，我修改起來效率會高很多。

4. 使用

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

// pages/music-list/index.js
import {getMusic} from "../../apis/api_video";
Page({
    /**
     * 頁面的初始數(shù)據(jù)
     */
    data: {
        musicList: null
    },

    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad: function (options) {
        getMusic("周杰倫").then(
            res => {
                this.setData({musicList:res.data.data})
            }
        ).catch(
            res => {
                console.log()
            }
        );
    },
})

在生命周期的頁面加載階段的時候，調(diào)用getMusic() 獲取到需要的數(shù)據(jù)，最后進行頁面渲染。