您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“js原生小程序怎么封裝請求優(yōu)雅地調(diào)用接口”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
基于小程序原生request封裝Promise風(fēng)格的請求
避免多級回調(diào)(回調(diào)地獄)
對于網(wǎng)絡(luò)請求錯誤統(tǒng)一處理分發(fā)
. ├── api │ ├── config.js // 相關(guān)請求的配置項,請求api等 │ ├── env.js // 環(huán)境配置 │ ├── request.js // 封裝主函數(shù) │ ├── statusCode.js // 狀態(tài)碼 └── ...
// env.js module.exports = { ENV: 'production', // ENV: 'test' }
// statusCode.js // 配置一些常見的請求狀態(tài)碼 module.exports = { SUCCESS: 200, EXPIRE: 403 }
// config.js const { ENV } = require('./env') let BASEURL switch (ENV) { case 'production': BASEURL = '' break case 'test': BASEURL = '' break default: BASEURL = '' break } module.exports = { BASEURL,// 項目接口地址,支持多域名 }
注意 64~68行是對token過期的處理,在調(diào)用登錄的時候, 檢查app.globalData中是否存在token,存在則不發(fā)起登錄請求,token過期清空token,那么下一次請求的時候就會 重新發(fā)起登錄請求從而會重新獲取到新的token
// 引入狀態(tài)碼statusCode const statusCode = require('./statusCode') // 定義請求路徑, BASEURL: 普通請求API; CBASEURL: 中臺API,不使用中臺可不引入CBASEURL const { BASEURL } = require('./config') // 定義默認參數(shù) const defaultOptions = { data: {}, ignoreToken: false, form: false, } /** * 發(fā)送請求 * @params * method: <String> 請求方式: POST/GET * url: <String> 請求路徑 * data: <Object> 請求參數(shù) * ignoreToken: <Boolean> 是否忽略token驗證 * form: <Boolean> 是否使用formData請求 */ function request (options) { let _options = Object.assign(defaultOptions, options) let { method, url, data, ignoreToken, form } = _options const app = getApp() // 設(shè)置請求頭 let header = {} if (form) { header = { 'content-type': 'application/x-www-form-urlencoded' } } else { header = { 'content-type': 'application/json' //自定義請求頭信息 } } if (!ignoreToken) { // 從全局變量中獲取token let token = app.globalData.token header.Authorization = `Bearer ${token}` } return new Promise((resolve, reject) => { wx.request({ url: BASEURL + url, data, header, method, success: (res) => { let { statusCode: code } = res if (code === statusCode.SUCCESS) { if (res.data.code !== 0) { // 統(tǒng)一處理請求錯誤 showToast(res.data.errorMsg) reject(res.data) return } resolve(res.data) } else if (code === statusCode.EXPIRE) { app.globalData.token = '' showToast(`登錄過期, 請重新刷新頁面`) reject(res.data) } else { showToast(`請求錯誤${url}, CODE: ${code}`) reject(res.data) } }, fail: (err) => { console.log('%c err', 'color: red;font-weight: bold', err) showToast(err.errMsg) reject(err) } }) }) } // 封裝toast函數(shù) function showToast (title, icon='none', duration=2500, mask=false) { wx.showToast({ title: title || '', icon, duration, mask }); } function get (options) { return request({ method: 'GET', ...options }) } function post (options) { // url, data = {}, ignoreToken, form return request({ method: 'POST', ...options }) } module.exports = { request, get, post }
新建api文件(此處以訂單接口為例), 新建api/index.js
(接口分發(fā)統(tǒng)一處理,防止接口寫到同一個文件下過于冗長)
目錄結(jié)構(gòu)如下:
. ├── api │ ├── config.js // 相關(guān)請求的配置項,請求api等 │ ├── index.js // 統(tǒng)一處理入口 │ ├── order.js // 訂單接口 │ ├── request.js // 封裝主函數(shù) │ ├── statusCode.js // 狀態(tài)碼 └── ...
// order.js const request = require('./request') module.exports = { // data可以傳入 url, data, ignoreToken, form, cToken apiName (data) { let url = 'apiUrl' return request.post({ url, data }) } }
const orderApi = require("./order") module.exports = { orderApi }
const { orderApi } = require('dir/path/api/index') ... 1. `Promise.then()`鏈?zhǔn)秸{(diào)用 func () { orderApi.apiName(params).then(res => { // do Something }).catch(err => { // do Something }) } 2. `async/await` 調(diào)用 async func () { try { let res = await orderApi.apiName(params) // do Something } catch (err) { // do Something } }
參數(shù) | 說明 | 數(shù)據(jù)類型 | 默認值 |
---|---|---|---|
url | 接口名 | String | '' |
data | 請求體 | Object | {} |
ignoreToken | 請求是否攜帶token | Boolean | false |
form | 是否是表單請求 | Boolean | false |
“js原生小程序怎么封裝請求優(yōu)雅地調(diào)用接口”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。