溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“微信小程序怎么封裝網絡請求和攔截器”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“微信小程序怎么封裝網絡請求和攔截器”文章能幫助大家解決問題。
今天和合作伙伴對接代碼的時候，打開壓縮包，發現項目有很大的問題，項目里根本沒有登錄驗證請求封裝攔截器這些東西，在開發小程序時，無疑想要維護還是比較麻煩的，實際上我們通常需要封裝網絡請求和攔截器，以實現統一處理狀態碼和存儲用戶登錄信息等功能。這樣可以提高開發效率，減少代碼重復，同時也可以提高代碼的可維護性和可讀性。
封裝網絡請求
首先，需要封裝網絡請求，負責發送請求和處理響應。該類應該包含以下方法：
·request(url, method, data, header)：發送網絡請求，并返回響應結果。
·get(url, data, header)：發送 GET 請求。
·post(url, data, header)：發送 POST 請求。
等不同請求方式
可以使用小程序提供的 wx.request 方法來實現網絡請求，該方法的參數與上述方法的參數一一對應。在處理響應時，可以使用Promise對象來處理異步操作。
統一處理狀態碼
可以創建一個checkStatus函數，用于統一處理狀態碼。該函數接受一個response參數，用于判斷請求是否成功。如果請求成功，則返回一個Promise對象，以便于我們進行后續的操作。如果請求失敗，則拋出一個錯誤。
創建 攔截器類
具體處理邏輯見下文。
封裝一個request函數，用于發送請求。該函數接受一個參數options，用于配置請求。我們可以在該函數中使用小程序提供的wx.request接口發送請求，并在請求完成后返回一個Promise對象，以便于我們進行后續的操作。
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函數，用于統一處理狀態碼。該函數接受一個response參數，用于判斷請求是否成功。如果請求成功，則返回一個Promise對象，以便于我們進行后續的操作。如果請求失敗，則拋出一個錯誤。
function checkStatus(response) {
const { statusCode, data } = response
if (statusCode >= 200 && statusCode < 300) {
return Promise.resolve(data)
} else {
const error = new Error(`請求失敗，狀態碼：${statusCode}`)
error.response = response
throw error
}
}我們可以封裝一個interceptor函數，用于封裝攔截器。該函數接受一個chain參數，用于執行攔截器鏈。我們可以在該函數中定義一個requestInterceptor和一個responseInterceptor，用于分別處理請求和響應的攔截器。我們可以在requestInterceptor中設置請求頭，以便于在后續的請求中進行身份驗證。我們可以在responseInterceptor中統一處理狀態碼，并在請求成功時更新用戶登錄信息。
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(`請求失敗，狀態碼：${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，用于存儲用戶登錄信息。我們可以在登錄成功后將用戶信息保存到該變量中，并在后續的請求中使用該變量進行身份驗證。
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(`請求失敗，狀態碼：${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(`請求失敗，狀態碼：${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('響應攔截器')
return response
}
})
request({
url: 'https://xxx.com/api/users',
method: 'GET'
})
.then(checkStatus)
.then(data => {
console.log(data)
})
.catch(error => {
console.log(error)
})① 在使用攔截器時，需要注意攔截器的執行順序。在上述示例中，攔截器的執行順序是先執行請求攔截器，再執行響應攔截器。
② 在小程序中，我們可以使用getApp()函數來獲取小程序實例，從而訪問全局變量。
③ 在發送請求時，需要注意請求的參數配置。在上述示例中，默認使用的是GET請求方法和空對象作為請求參數，并且配置了常用請求方式，如果需要使用其他請求方法或者自定義請求參數，請在調用request函數時進行相應的配置。
關于“微信小程序怎么封裝網絡請求和攔截器”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
