您好,登錄后才能下訂單哦!
這篇文章主要介紹“微信小程序怎么封裝網(wǎng)絡(luò)請求和攔截器”的相關(guān)知識,小編通過實際案例向大家展示操作過程,操作方法簡單快捷,實用性強,希望這篇“微信小程序怎么封裝網(wǎng)絡(luò)請求和攔截器”文章能幫助大家解決問題。
今天和合作伙伴對接代碼的時候,打開壓縮包,發(fā)現(xiàn)項目有很大的問題,項目里根本沒有登錄驗證請求封裝攔截器這些東西,在開發(fā)小程序時,無疑想要維護還是比較麻煩的,實際上我們通常需要封裝網(wǎng)絡(luò)請求和攔截器,以實現(xiàn)統(tǒng)一處理狀態(tài)碼和存儲用戶登錄信息等功能。這樣可以提高開發(fā)效率,減少代碼重復(fù),同時也可以提高代碼的可維護性和可讀性。
封裝網(wǎng)絡(luò)請求
首先,需要封裝網(wǎng)絡(luò)請求,負責發(fā)送請求和處理響應(yīng)。該類應(yīng)該包含以下方法:
·request(url, method, data, header):發(fā)送網(wǎng)絡(luò)請求,并返回響應(yīng)結(jié)果。
·get(url, data, header):發(fā)送 GET 請求。
·post(url, data, header):發(fā)送 POST 請求。
等不同請求方式
可以使用小程序提供的 wx.request 方法來實現(xiàn)網(wǎng)絡(luò)請求,該方法的參數(shù)與上述方法的參數(shù)一一對應(yīng)。在處理響應(yīng)時,可以使用Promise對象來處理異步操作。
統(tǒng)一處理狀態(tài)碼
可以創(chuàng)建一個checkStatus
函數(shù),用于統(tǒng)一處理狀態(tài)碼。該函數(shù)接受一個response參數(shù),用于判斷請求是否成功。如果請求成功,則返回一個Promise
對象,以便于我們進行后續(xù)的操作。如果請求失敗,則拋出一個錯誤。
創(chuàng)建 攔截器類
具體處理邏輯見下文。
封裝一個request函數(shù),用于發(fā)送請求。該函數(shù)接受一個參數(shù)options,用于配置請求。我們可以在該函數(shù)中使用小程序提供的wx.request
接口發(fā)送請求,并在請求完成后返回一個Promise對象,以便于我們進行后續(xù)的操作。
function request(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: options.method || 'GET', data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) }
我們可以封裝一個checkStatus
函數(shù),用于統(tǒng)一處理狀態(tài)碼。該函數(shù)接受一個response參數(shù),用于判斷請求是否成功。如果請求成功,則返回一個Promise
對象,以便于我們進行后續(xù)的操作。如果請求失敗,則拋出一個錯誤。
function checkStatus(response) { const { statusCode, data } = response if (statusCode >= 200 && statusCode < 300) { return Promise.resolve(data) } else { const error = new Error(`請求失敗,狀態(tài)碼:${statusCode}`) error.response = response throw error } }
我們可以封裝一個interceptor
函數(shù),用于封裝攔截器。該函數(shù)接受一個chain參數(shù),用于執(zhí)行攔截器鏈。我們可以在該函數(shù)中定義一個requestInterceptor
和一個responseInterceptor
,用于分別處理請求和響應(yīng)的攔截器。我們可以在requestInterceptor
中設(shè)置請求頭,以便于在后續(xù)的請求中進行身份驗證。我們可以在responseInterceptor
中統(tǒng)一處理狀態(tài)碼,并在請求成功時更新用戶登錄信息。
function interceptor(chain) { const requestInterceptor = (options) => { // 設(shè)置請求頭 options.header.Authorization = 'Bearer ' + getApp().globalData.token return chain.request(options) } const responseInterceptor = (response) => { const { statusCode, data } = response if (statusCode >= 200 && statusCode < 300) { // 更新用戶登錄信息 getApp().globalData.userInfo = data.userInfo } else { const error = new Error(`請求失敗,狀態(tài)碼:${statusCode}`) error.response = response throw error } return response } return { request: requestInterceptor, response: responseInterceptor } }
//封裝put請求方式的代碼如下: function put(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: 'PUT', data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) } //封裝delete請求方式的代碼如下: function del(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: 'DELETE', data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) } //封裝post請求方式的代碼如下: function post(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: 'POST', data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) }
我們可以在小程序的app.js中定義一個全局變量globalData
,用于存儲用戶登錄信息。我們可以在登錄成功后將用戶信息保存到該變量中,并在后續(xù)的請求中使用該變量進行身份驗證。
App({ globalData: { userInfo: null, token: null } })
// request.js function request(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: options.method || 'GET', data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) } function put(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: 'PUT', data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) } function del(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: 'DELETE', data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) } function post(options) { return new Promise((resolve, reject) => { wx.request({ url: options.url, method: 'POST', data: options.data || {}, header: options.header || {}, success: resolve, fail: reject }) }) } function checkStatus(response) { const { statusCode, data } = response if (statusCode >= 200 && statusCode < 300) { return Promise.resolve(data) } else { const error = new Error(`請求失敗,狀態(tài)碼:${statusCode}`) error.response = response throw error } } function interceptor(chain) { const requestInterceptor = (options) => { options.header.Authorization = 'Bearer ' + getApp().globalData.token return chain.request(options) } const responseInterceptor = (response) => { const { statusCode, data } = response if (statusCode >= 200 && statusCode < 300) { getApp().globalData.userInfo = data.userInfo } else { const error = new Error(`請求失敗,狀態(tài)碼:${statusCode}`) error.response = response throw error } return response } return { request: requestInterceptor, response: responseInterceptor } } export { request, put, del, post, checkStatus, interceptor }
import { request, interceptor, checkStatus } from './request' const chain = interceptor({ request: (options) => { console.log('請求攔截器') return options }, response: (response) => { console.log('響應(yīng)攔截器') return response } }) request({ url: 'https://xxx.com/api/users', method: 'GET' }) .then(checkStatus) .then(data => { console.log(data) }) .catch(error => { console.log(error) })
① 在使用攔截器時,需要注意攔截器的執(zhí)行順序。在上述示例中,攔截器的執(zhí)行順序是先執(zhí)行請求攔截器,再執(zhí)行響應(yīng)攔截器。
② 在小程序中,我們可以使用getApp()函數(shù)來獲取小程序?qū)嵗?,從而訪問全局變量。
③ 在發(fā)送請求時,需要注意請求的參數(shù)配置。在上述示例中,默認使用的是GET請求方法和空對象作為請求參數(shù),并且配置了常用請求方式,如果需要使用其他請求方法或者自定義請求參數(shù),請在調(diào)用request函數(shù)時進行相應(yīng)的配置。
關(guān)于“微信小程序怎么封裝網(wǎng)絡(luò)請求和攔截器”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識,可以關(guān)注億速云行業(yè)資訊頻道,小編每天都會為大家更新不同的知識點。
免責聲明:本站發(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)容。