欧美成人午夜免费全部完,亚洲午夜福利精品久久,а√最新版在线天堂,另类亚洲综合区图片小说区,亚洲欧美日韩精品色xxx

千鋒扣丁學(xué)堂HTML5培訓(xùn)之微信小程序HTTP請(qǐng)求從0到1封裝

2019-09-09 15:39:57 4595瀏覽

今天千鋒扣丁學(xué)堂HTML5培訓(xùn)老師給大家分享一篇關(guān)于微信小程序HTTP請(qǐng)求從0到1封裝的詳細(xì)介紹，首先作為一個(gè)前端開(kāi)發(fā)者，從最開(kāi)始的js、jQuery一把梭，后來(lái)的vue、react、angular等MVVM、MVC框架，我們?cè)陂_(kāi)發(fā)工程中都離不開(kāi)HTTP庫(kù)的使用。

HTTP庫(kù)

1、jQuery的$.ajax

調(diào)用了XMLHttpRequest對(duì)象，封裝在相關(guān)函數(shù)在配置項(xiàng)中，一旦傳入了必需選項(xiàng)，則直接調(diào)用相應(yīng)的send()方法進(jìn)行數(shù)據(jù)的請(qǐng)求

2、Axios

基于Promise的請(qǐng)求庫(kù)，通過(guò)判斷XMLHTTPRequest對(duì)象存在與否，來(lái)支持客戶(hù)端和node服務(wù)端發(fā)送請(qǐng)求，封裝的很不錯(cuò)的HTTP庫(kù)，支持promise、攔截請(qǐng)求和響應(yīng)等

小程序網(wǎng)絡(luò)請(qǐng)求

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

小程序本身的請(qǐng)求已經(jīng)封裝的很不錯(cuò)了，使用起來(lái)和$.ajax相似，支持許多配置項(xiàng)的設(shè)置，但是缺少公共配置、響應(yīng)和請(qǐng)求攔截等實(shí)用功能

第一步--創(chuàng)建請(qǐng)求實(shí)例

class Axios {
 constructor() {
  this.instance = null // 類(lèi)的實(shí)例
  this.config = defaultConfig
 }
 
 create(instanceConfig) {
  const { config } = this
  // 創(chuàng)建實(shí)例的時(shí)候添加基本配置
  this.config = {
   ...config,
   ...instanceConfig
  }
  return this
 }
 
 // 單例
 static getInstance() {
  if (!this.instance) {
    this.instance = new Axios()
  }
  return this.instance
 }
}

創(chuàng)建實(shí)例

const axios = Axios.getInstance()

promise包裝小程序請(qǐng)求

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)
   }
  })
 })
}

給請(qǐng)求實(shí)例添加request方法

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

第二步--創(chuàng)建請(qǐng)求工具方法

創(chuàng)建實(shí)例，通過(guò)create設(shè)置基本配置項(xiàng)

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

創(chuàng)建請(qǐng)求工具方法，執(zhí)行實(shí)例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()
   }
  })
 }
}

這樣，一個(gè)請(qǐng)求的工具方法就完成了，但是這個(gè)方法現(xiàn)在只支持基本的請(qǐng)求和基本配置項(xiàng)的配置，還是缺少我們很常用的公共請(qǐng)求和響應(yīng)的攔截。

第三部--添加請(qǐng)求和響應(yīng)的攔截器

創(chuàng)建攔截器實(shí)例

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

在請(qǐng)求實(shí)例的構(gòu)造方法中添加請(qǐng)求和響應(yīng)攔截實(shí)例

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

在實(shí)例的request添加promise執(zhí)行隊(duì)列

request(options) {
  const { config, interceptors } = this
  // 實(shí)例請(qǐng)求的時(shí)候添加基本配置
  const requsetOptions = {
   ...config,
   ...options
  }
 
  const promiseArr = [] // promise存儲(chǔ)隊(duì)列
 
  // 請(qǐng)求攔截器
  promiseArr.push({
   fulfilled: interceptors.request.fulfilled,
   rejected: interceptors.request.rejected
  })
 
  // 請(qǐng)求
  promiseArr.push({
   fulfilled: dispatchRequest,
   rejected: null
  })
 
  // 回調(diào)攔截器
  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
 }

在請(qǐng)求工具方法中通過(guò)設(shè)置請(qǐng)求和響應(yīng)的攔截方法

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

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

在請(qǐng)求攔截方法里面可以添加數(shù)據(jù)轉(zhuǎn)換，在請(qǐng)求頭部添加sign、token等，在響應(yīng)攔截方法里面去做公共的數(shù)據(jù)處理等，從零搭建一個(gè)簡(jiǎn)單的請(qǐng)求庫(kù)很簡(jiǎn)單，但是想考慮的方方面面，設(shè)計(jì)好整個(gè)流程會(huì)比較麻煩，需要不斷的改進(jìn)和重構(gòu)，本文的搭架過(guò)程參考了Axios的部分源碼。

以上就是關(guān)于千鋒扣丁學(xué)堂HTML5培訓(xùn)之微信小程序HTTP請(qǐng)求從0到1封裝的全部?jī)?nèi)容，想要了解更多內(nèi)容的小伙伴可以登錄扣丁學(xué)堂官網(wǎng)咨詢(xún)。想要學(xué)好HTML5開(kāi)發(fā)小編給大家推薦口碑良好的扣丁學(xué)堂，扣丁學(xué)堂有專(zhuān)業(yè)老師制定的HTML5學(xué)習(xí)路線圖輔助學(xué)員學(xué)習(xí)，此外還有與時(shí)俱進(jìn)的HTML5課程體系和HTML5視頻教程供大家學(xué)習(xí)，想要學(xué)好HTML5開(kāi)發(fā)技術(shù)的小伙伴快快行動(dòng)吧?？鄱W(xué)堂H5技術(shù)交流群：673883249。

                             

     【關(guān)注微信公眾號(hào)獲取更多學(xué)習(xí)資料】        【掃碼進(jìn)入HTML5前端開(kāi)發(fā)VIP免費(fèi)公開(kāi)課】  

查看更多關(guān)于“HTML5開(kāi)發(fā)技術(shù)資訊”的相關(guān)文章>>