微信小程序HTTP請求從0到1封裝的方法

這篇文章主要講解了“微信小程序HTTP請求從0到1封裝的方法”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“微信小程序HTTP請求從0到1封裝的方法”吧！

HTTP庫

1、jQuery的$.ajax

調用了XMLHttpRequest對象，封裝在相關函數在配置項中，一旦傳入了必需選項，則直接調用相應的send()方法進行數據的請求

2、Axios

基于Promise的請求庫，通過判斷XMLHTTPRequest對象存在與否，來支持客戶端和node服務端發送請求，封裝的很不錯的HTTP庫，支持promise、攔截請求和響應等

小程序網絡請求

wx.request({
 url: 'test.php', //僅為示例，并非真實的接口地址
 data: {
 x: '',
 y: ''
 },
 header: {
 'content-type': 'application/json' // 默認值
 },
 success (res) {
 console.log(res.data)
 }
})

小程序本身的請求已經封裝的很不錯了，使用起來和$.ajax相似，支持許多配置項的設置，但是缺少公共配置、響應和請求攔截等實用功能

第一步--創建請求實例

class Axios {
 constructor() {
  this.instance = null // 類的實例
  this.config = defaultConfig
 }

 create(instanceConfig) {
  const { config } = this
  // 創建實例的時候添加基本配置
  this.config = {
   ...config,
   ...instanceConfig
  }
  return this
 }

 // 單例
 static getInstance() {
  if (!this.instance) {
    this.instance = new Axios()
  }
  return this.instance
 }
}

創建實例

const axios = Axios.getInstance()

promise包裝小程序請求

const dispatchRequest = function(config) {
 return new Promise((resolve, reject) => {
  wx.request({
   ...config,
   url: config.base + config.url,
   success: res => {
    resolve(res)
   },
   fail: res => {
    reject(res)
   }
  })
 })
}

給請求實例添加request方法

request(options) {
 const { config } = this
 // 實例請求的時候添加基本配置
 const requsetOptions = {
  ...config,
  ...options
 }
 return dispatchRequest(requsetOptions)
}

第二步--創建請求工具方法

創建實例，通過create設置基本配置項

const instance = (config = {}) => {
 return axios.create({
  base: globalApi,
  ...config
 })
}

創建請求工具方法，執行實例request

export function request(options) {
 const { baseConfig, url, method, data, isLogin } = options
 instance(baseConfig)
  .request({
   url,
   method: method || 'GET',
   data
  })
  .then(res => {
   options.success && options.success(res)
  })
  .catch(err => {
   if (options.error) {
    options.error(err)
   } else {
    errAlert()
   }
  })
 }
}

這樣，一個請求的工具方法就完成了，但是這個方法現在只支持基本的請求和基本配置項的配置，還是缺少我們很常用的公共請求和響應的攔截。

第三部--添加請求和響應的攔截器

創建攔截器實例

class InterceptorManager {
 constructor() {
  this.fulfilled = null
  this.rejected = null
 }

 use(fulfilled, rejected) {
  this.fulfilled = fulfilled
  this.rejected = rejected
 }
}

在請求實例的構造方法中添加請求和響應攔截實例

constructor() {
 this.instance = null // 類的實例
 this.config = defaultConfig
 this.interceptors = {
  request: new InterceptorManager(),
  response: new InterceptorManager()
 }
}

在實例的request添加promise執行隊列

request(options) {
  const { config, interceptors } = this
  // 實例請求的時候添加基本配置
  const requsetOptions = {
   ...config,
   ...options
  }

  const promiseArr = [] // promise存儲隊列

  // 請求攔截器
  promiseArr.push({
   fulfilled: interceptors.request.fulfilled,
   rejected: interceptors.request.rejected
  })

  // 請求
  promiseArr.push({
   fulfilled: dispatchRequest,
   rejected: null
  })

  // 回調攔截器
  promiseArr.push({
   fulfilled: interceptors.response.fulfilled,
   rejected: interceptors.response.rejected
  })

  let p = Promise.resolve(requsetOptions)
  promiseArr.forEach(ele => {
   p = p.then(ele['fulfilled'], ele['rejected'])
  })

  return p
 }

在請求工具方法中通過設置請求和響應的攔截方法

axios.interceptors.request.use(
 request => {
  return request
 },
 err => {
  console.error(err)
 }
)

axios.interceptors.response.use(
 response => {
  return response
 },
 err => {
  console.error(err)
 }
)

在請求攔截方法里面可以添加數據轉換，在請求頭部添加sign、token等，在響應攔截方法里面去做公共的數據處理等

感謝各位的閱讀，以上就是“微信小程序HTTP請求從0到1封裝的方法”的內容了，經過本文的學習后，相信大家對微信小程序HTTP請求從0到1封裝的方法這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！