一、第一版

import { config } from "../../config/config"Page({data: {topTheme:null},onLoad: function (options) {wx.request({url:`${config.apiBaseUrl}theme/by/names`,method: 'GET',data: {names: 't-1'},header: { appkey:config.appKey}, success: res=>{ this.setData({topTheme:res.data[0]})}})}, })

2.第二版

將wx.request抽離出來，封裝到一個model對象中

import {config} from "../config/config" class Theme{static getHomeLocationA(callback){wx.request({url:`${config.apiBaseUrl}theme/by/names`,method: 'GET',data: {names: 't-1'},header: { appkey:config.appKey}, success: res=>{ callback(res.data)// this.setData({// topTheme:res.data[0]// })}})} } export {Theme }

? ? 由于this.setData只能在頁面page里，model模型里不能使用。getHomeLocationA方法接收一個回調函數，在success里用callback函數將結果返回到home.js中。

/*home.js*/ import { config } from "../../config/config" import { Theme } from "../../model/theme"Page({data: {topTheme:null},onLoad: function (options) {Theme.getHomeLocationA(data=>{this.setData({topTheme:data[0]})})}, })

3.第三版

這里的wx.request封裝的太簡單，沒有很好的復用性，假想一下，如果Theme里再有其他的方法（getHomeLocationB）也需要調用wx.request,那么是不是wx.request又要重寫一遍。這次將wx.request封裝到utils目錄下的http.js中（專門用來處理Http請的）。

/*http.js*/ import {config} from "../config/config"class Http{static request({url,data,callback,method='GET'}){wx.request({url: `${config.apiBaseUrl}${url}`,data, header: { appkey:config.appKey}, success(res) {callback(res.data)}})}} export {Http } /*theme.js*/ import { Http } from "../utils/http" class Theme{static getHomeLocationA(callback){Http.request({url:`theme/by/names`,data:{names: 't-1'},callback: data=>{callback(data)}})} } export {Theme } /*home.js*/ import { config } from "../../config/config" import { Theme } from "../../model/theme"Page({data: {topTheme:null},onLoad: function (options) {Theme.getHomeLocationA(data=>{this.setData({topTheme:data[0]})})}, })

?

這邊有個小疑問一直困擾我，為什么需要callback回調函數？，平時我們所寫的函數，如下:

function a(){console.log("11") } function b(){a()console.log("222") } b();

b方法里調用a，這里方法是同步的，但在Http里success是異步的，在各個層中只要有一層是異步的調用，就會導致所有層與層之間的調用都是異步的。這里home調用theme，theme調用http，而http里success是異步的，導致各層之間都是異步調用，而異步調用的方式常見有三種（callback、promise、async await）.

關于async await，這里不做過多的描述，推薦一篇文章https://segmentfault.com/a/1190000007535316

使用await的前提必須是這個函數的調用要返回結果，由于微信內置的api（wx.request）沒有任何返回，因此不能直接使用await，需要將wx.request進一步封裝。

在utils目錄下新建util.js文件，代碼如下：

/*util.js*/ const promisic = function (func) {return function (params = {}) {return new Promise((resolve, reject) => {const args = Object.assign(params, {success: (res) => {resolve(res);},fail: (error) => {reject(error);}});func(args);});};};export {promisic}

通過promisic將微信內置的api封裝起來，使其返回一個promise對象，使用方法

http.js中的代碼如下：

import {config} from "../config/config" import { promisic } from "./util"class Http{static async request({url,data,method='GET'}){const res= await promisic(wx.request)({url: `${config.apiBaseUrl}${url}`,data, header: { appkey:config.appKey} }) return res.data }} export {Http }

theme.js代碼

/*theme.js*/ import { Http } from "../utils/http" class Theme{static async getHomeLocationA(){const data = await Http.request({url:`theme/by/names`,data:{names: 't-1'}})return data} } export {Theme }

home.js代碼

import { config } from "../../config/config" import { Theme } from "../../model/theme"Page({data: {topTheme:null},onLoad:async function (options) {const data = await Theme.getHomeLocationA();this.setData({topTheme:data[0]})}, })

?

總結

以上是生活随笔為你收集整理的风袖第一阶段小程序wx.request封装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。