前言

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

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

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

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

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

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

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

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

//config.js
const BASE_URL = "https://www.qq.com/apis"
const TIMEOUT = 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'
class MYRequest {
    request(url,method,data){
        //返回Promise對(duì)象
        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ò)請(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
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)建好了一個(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.js api_singer.js 這樣我看到這個(gè)api文件我就可以知道他是干什么的屬于哪一個(gè)功能，我修改起來效率會(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.log()
            }
        );
    },
})

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

總結(jié)

這就是我在微信小程序開發(fā)中所使用的網(wǎng)絡(luò)請(qǐng)求封裝方法，希望可以給大家?guī)韼椭?/p>

到此這篇關(guān)于微信小程序網(wǎng)絡(luò)請(qǐng)求模塊封裝實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)微信小程序網(wǎng)絡(luò)請(qǐng)求模塊封裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論