基於小程式請求介面wx.request封裝的類axios請求

阿新 • • 發佈：2020-07-04

Introduction

wx.request 的配置、axios 的呼叫方式
原始碼戳我

feature

支援 wx.request 所有配置項
支援 axios 呼叫方式
支援自定義 baseUrl
支援自定義響應狀態碼對應 resolve 或 reject 狀態
支援對響應（resolve/reject）分別做統一的額外處理
支援轉換請求資料和響應資料
支援請求快取（記憶體或本地快取），可設定快取標記、過期時間

use

app.js @onLaunch

 import axios form 'axios'
 axios.creat({
 header: {
  content-type': 'application/x-www-form-urlencoded; charset=UTF-8'
 },baseUrl: 'https://api.baseurl.com',...
 });

page.js

axios
 .post("/url",{ id: 123 })
 .then((res) => {
 console.log(response);
 })
 .catch((err) => {
 console.log(err);
 });

API

axios(config) - 預設get
axios(url[,config]) - 預設get
axios.get(url[,config])
axios.post(url[,data[,config]])
axios.cache(url[,config]]) - 快取請求（記憶體）
axios.cache.storage(url[,config]]) - 快取請求（記憶體 & local storage）

axios.creat(config) - 初始化定製配置，覆蓋預設配置

config

預設配置項說明

export default {
 // 請求介面地址
 url: undefined,// 請求的引數
 data: {},// 請求的 header
 header: "application/json",// 超時時間，單位為毫秒
 timeout: undefined,// HTTP 請求方法
 method: "GET",// 返回的資料格式
 dataType: "json",// 響應的資料型別
 responseType: "text",// 開啟 http2
 enableHttp2: false,// 開啟 quic
 enableQuic: false,// 開啟 cache
 enableCache: false,/** 以上為wx.request的可配置項，參考 https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html */
 /** 以下為wx.request沒有的新增配置項 */

 // {String} baseURL` 將自動加在 `url` 前面，可以通過設定一個 `baseURL` 便於傳遞相對 URL
 baseUrl: "",// {Function} （同axios的validateStatus）定義對於給定的HTTP 響應狀態碼是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者設定為 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 reject
 validateStatus: undefined,// {Function} 請求引數包裹（類似axios的transformRequest），通過它可統一補充請求引數需要的額外資訊（appInfo/pageInfo/場景值...），需return data
 transformRequest: undefined,// {Function} resolve狀態下響應資料包裹（類似axios的transformResponse），通過它可統一處理響應資料，需return res
 transformResponse: undefined,// {Function} resolve狀態包裹，通過它可做介面resolve狀態的統一處理
 resolveWrap: undefined,// {Function} reject狀態包裹，通過它可做介面reject狀態的統一處理
 rejectWrap: undefined,// {Boolean} _config.useCache 是否開啟快取
 useCache: false,// {String} _config.cacheName 快取唯一key值，預設使用url&data生成
 cacheName: undefined,// {Boolean} _config.cacheStorage 是否開啟本地快取
 cacheStorage: false,// {Any} _config.cacheLabel 快取標誌，請求前會對比該標誌是否變化來決定是否使用快取，可用useCache替代
 cacheLabel: undefined,// {Number} _config.cacheExpireTime 快取時長，計算快取過期時間，單位-秒
 cacheExpireTime: undefined,};

實現

axios.js

import Axios from "./axios.class.js";

// 建立axios例項
const axiosInstance = new Axios();
// 獲取基礎請求axios
const { axios } = axiosInstance;
// 將例項的方法bind到基礎請求axios上，達到支援請求別名的目的
axios.creat = axiosInstance.creat.bind(axiosInstance);
axios.get = axiosInstance.get.bind(axiosInstance);
axios.post = axiosInstance.post.bind(axiosInstance);
axios.cache = axiosInstance.cache.bind(axiosInstance);
axios.cache.storage = axiosInstance.storage.bind(axiosInstance);

Axios class

初始化

defaultConfig 預設配置，即 defaults.js
axios.creat 使用者配置覆蓋預設配置
注意配置初始化後 mergeConfig 不能被汙染，config 需通過引數傳遞

constructor(config = defaults) {
 this.defaultConfig = config;
 }
creat(_config = {}) {
 this.defaultConfig = mergeConfig(this.defaultConfig,_config);
}

請求別名

axios 相容 axios(config) 或 axios(url[,config])；
別名都只是 config 合併，最終都通過 axios.requst()發起請求;

 axios($1 = {},$2 = {}) {
 let config = $1;
 // 相容axios(url[,config])方式
 if (typeof $1 === 'string') {
  config = $2;
  config.url = $1;
 }
 return this.request(config);
 }

 post(url,data = {},_config = {}) {
 const config = {
  ..._config,url,data,method: 'POST',};
 return this.request(config);
 }

請求方法 _request

請求配置預處理

實現 baseUrl
實現 transformRequest（轉換請求資料）

 _request(_config = {}) {
 let config = mergeConfig(this.defaultConfig,_config);
 const { baseUrl,header,transformRequest } = config;
 const computedConfig = {
  header: {
  'content-type': 'application/x-www-form-urlencoded; charset=UTF-8',...header,},...(baseUrl && {
  url: combineUrl(url,baseUrl),}),...(transformRequest &&
  typeof transformRequest === 'function' && {
   data: transformRequest(data),};
 config = mergeConfig(config,computedConfig);
 return wxRequest(config);
 }

wx.request

發起請求、處理響應

實現 validateStatus（狀態碼對映 resolve）
實現 transformResponse（轉換響應資料）
實現 resolveWrap、rejectWrap（響應狀態處理）

export default function wxRequest(config) {
 return new Promise((resolve,reject) => {
 wx.request({
  ...config,success(res) {
  const {
   resolveWrap,rejectWrap,transformResponse,validateStatus,} = config;
  if ((validateStatus && validateStatus(res)) || ifSuccess(res)) {
   const _resolve = resolveWrap ? resolveWrap(res) : res;
   return resolve(
   transformResponse ? transformResponse(_resolve) : _resolve
   );
  }
  return reject(rejectWrap ? rejectWrap(res) : res);
  },fail(res) {
  const { rejectWrap } = config;
  reject(rejectWrap ? rejectWrap(res) : res);
  },});
 });
}

請求快取的實現

預設使用記憶體快取，可配置使用 localStorage
封裝了 Storage 與 Buffer 類，與 Map 介面一致：get/set/delete
支援快取標記&過期時間
快取唯一 key 值，預設使用 url&data 生成，無需指定

 import Buffer from '../utils/cache/Buffer';
 import Storage from '../utils/cache/Storage';
 import StorageMap from '../utils/cache/StorageMap';


 /**
 * 請求快取api，緩存於本地快取中
 */
 storage(url,cacheStorage: true,};
 return this._cache(config);
 }

 /**
 * 請求快取
 * @param {Object} _config 配置
 * @param {Boolean} _config.useCache 是否開啟快取
 * @param {String} _config.cacheName 快取唯一key值，預設使用url&data生成
 * @param {Boolean} _config.cacheStorage 是否開啟本地快取
 * @param {Any} _config.cacheLabel 快取標誌，請求前會對比該標誌是否變化來決定是否使用快取，可用useCache替代
 * @param {Number} _config.cacheExpireTime 快取時長，計算快取過期時間，單位-秒
 */
 _cache(_config) {
 const {
  url = '',useCache = true,cacheName: _cacheName,cacheStorage,cacheLabel,cacheExpireTime,} = _config;
 const computedCacheName = _cacheName || `${url}#${JSON.stringify(data)}`;
 const cacheName = StorageMap.getCacheName(computedCacheName);

 // return buffer
 if (useCache && Buffer.has(cacheName,cacheLabel)) {
  return Buffer.get(cacheName);
 }

 // return storage
 if (useCache && cacheStorage) {
  if (Storage.has(cacheName,cacheLabel)) {
  const data = Storage.get(cacheName);
  // storage => buffer
  Buffer.set(
   cacheName,Promise.resolve(data),cacheLabel
  );
  return Promise.resolve(data);
  }
 }
 const curPromise = new Promise((resolve,reject) => {
  const handleFunc = (res) => {
  // do storage
  if (useCache && cacheStorage) {
   Storage.set(cacheName,res,cacheLabel);
  }
  return res;
  };

  this._request(_config)
  .then((res) => {
   resolve(handleFunc(res));
  })
  .catch(reject);
 });

 // do buffer
 Buffer.set(cacheName,curPromise,cacheLabel);

 return curPromise;
 }

到此這篇關於基於小程式請求介面wx.request封裝的類axios請求的文章就介紹到這了,更多相關小程式 wx.request封裝類axios請求內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！

基於小程式請求介面wx.request封裝的類axios請求

基於小程式請求介面 wx.request 封裝的類 axios 請求

基於小程式請求介面wx.request封裝的類axios請求

微信小程式wx.request封裝與重新整理token

Springboot單體架構http請求轉換https請求來支援微信小程式呼叫介面

微信小程式的介面呼叫封裝

微信小程式API介面封裝

uniapp+nodejs實現小程式登入流程，獲取openID,附uniapp請求封裝

微信小程式tab標籤滾動元件封裝，滑塊滾動+容器滾動效果

小程式訂閱訊息 wx.requestSubscribeMessage()

小程式自定義tabBar元件封裝

小程式封裝wx.request思路

全網小程式介面請求封裝例項程式碼

使用Promise封裝小程式wx.request

微信小程式-封裝請求基準路徑、介面API 和使用

小程式：使用promise封裝wx.request()

解決小程式中wx.request請求非同步問題

小程式請求封裝和介面統一管理

微信小程式wx.request使用POST請求時後端無法獲取資料解決辦法

微信小程式wx.request()的promise封裝和使用

微信小程式請求封裝

基於小程式請求介面wx.request封裝的類axios請求

相關推薦