微信小程式request請求的封裝

2022-01-22 16:39:03 字數 2050 閱讀 5366

目錄4,實際使用

wx.request(,

header: ,

success (res)

});

作為乙個合格的前端開發,為了**質量和優雅度(其實是因為懶),避免不了封裝一些重複**和功能,來使開發過程更加酣暢淋漓。

專案中,wx.request的很多引數都是固定的,只需要改變data的值,而一般我們的邏輯處理都是在wx.request的**successfailcomplete中操作的,並且有部分邏輯也是相同的,(比如判斷介面返回資料是否成功,根據成功或失敗顯示不同的提示框等等),所以博主在這邊用了promise來做了乙個鏈式呼叫封裝,少去了大部分重複語句。

目錄結構

requestfn.js中,我們要做到的是建立乙個function,在裡面統一處理wx.request需要的引數和返回值,還有請求過程中的loading提示,toast提示,然後通過module.exports將這個function暴露出去,完整**如下。

const fn = require('../publicfn/public');

const request = (options) =>,

method: options.method || 'post',

responsetype:options.responsetype || "",

timeout:15000,

success (res) else;

}else;

},fail (res)

})})

};module.exports = ;

request已經封裝好了,下面就是將專案需要的請求介面,還有各個模組的資料請求方法定義一下,統一放在api.js中,方便維護(ps:如果你的模組非常多,可以按模組建立不同的api.js,按需引入)。

詳細**如下

const requestfn = require('../requestfn/requestfn');

const api = ;

const http = userid - 使用者id

在這幾個步驟之後,我們的乙個request的封裝就完成了,接下來就是實際應用了,呼叫方法如下。

1,在我們的頁面對應的js檔案頭部先要引入我們對應的api.js

import  http  from "../../requestfn/api";
2,在page物件中定義方法

// 獲取banner圖

以上就是全部內容,如有寫的不對的,歡迎指出。往期文章

簡單的js+css實現網頁自定義換膚

個人主頁

微信小程式 同步請求

1 globaldata 全域性變數 全域性變數 globaldata index.js 獲取應用例項 使用全域性變數2 引用第三方庫 es6 promise var promise require plugins es6 promise.js function wxpromisify fn obj...

小程式封裝request請求

為了減少 量 以及方便後期的維護 把小程式中的request請求封裝起來是很有用的 module.exports 生產環境 prod 測試環境 test const require env.js prod 封裝ajax const vipurl 專屬網域名稱 module.exports issub...

16 小程式request請求

發起網路請求。使用前請先閱讀說明。object引數說明 引數名型別 必填預設值 說明最低版本 urlstring 是開發者伺服器介面位址 data object string arraybuffer 否請求的引數 header object 否設定請求的 header,header 中不能設定 re...