如何實(shí)現(xiàn)基于小程序請(qǐng)求接口wx.request封裝的類axios請(qǐng)求

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

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

export default {
 // 請(qǐng)求接口地址
 url: undefined,
 // 請(qǐng)求的參數(shù)
 data: {},
 // 請(qǐng)求的 header
 header: "application/json",
 // 超時(shí)時(shí)間，單位為毫秒
 timeout: undefined,
 // HTTP 請(qǐng)求方法
 method: "GET",
 // 返回的數(shù)據(jù)格式
 dataType: "json",
 // 響應(yīng)的數(shù)據(jù)類型
 responseType: "text",
 // 開啟 http2
 enableHttp2: false,
 // 開啟 quic
 enableQuic: false,
 // 開啟 cache
 enableCache: false,

 /** 以上為wx.request的可配置項(xiàng)，參考 https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html */
 /** 以下為wx.request沒有的新增配置項(xiàng) */

 // {String} baseURL` 將自動(dòng)加在 `url` 前面，可以通過設(shè)置一個(gè) `baseURL` 便于傳遞相對(duì) URL
 baseUrl: "",
 // {Function} （同axios的validateStatus）定義對(duì)于給定的HTTP 響應(yīng)狀態(tài)碼是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者設(shè)置為 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 reject
 validateStatus: undefined,
 // {Function} 請(qǐng)求參數(shù)包裹（類似axios的transformRequest），通過它可統(tǒng)一補(bǔ)充請(qǐng)求參數(shù)需要的額外信息（appInfo/pageInfo/場(chǎng)景值...），需return data
 transformRequest: undefined,
 // {Function} resolve狀態(tài)下響應(yīng)數(shù)據(jù)包裹（類似axios的transformResponse），通過它可統(tǒng)一處理響應(yīng)數(shù)據(jù)，需return res
 transformResponse: undefined,
 // {Function} resolve狀態(tài)包裹，通過它可做接口resolve狀態(tài)的統(tǒng)一處理
 resolveWrap: undefined,
 // {Function} reject狀態(tài)包裹，通過它可做接口reject狀態(tài)的統(tǒng)一處理
 rejectWrap: undefined,
 // {Boolean} _config.useCache 是否開啟緩存
 useCache: false,
 // {String} _config.cacheName 緩存唯一key值，默認(rèn)使用url&data生成
 cacheName: undefined,
 // {Boolean} _config.cacheStorage 是否開啟本地緩存
 cacheStorage: false,
 // {Any} _config.cacheLabel 緩存標(biāo)志，請(qǐng)求前會(huì)對(duì)比該標(biāo)志是否變化來決定是否使用緩存，可用useCache替代
 cacheLabel: undefined,
 // {Number} _config.cacheExpireTime 緩存時(shí)長(zhǎng)，計(jì)算緩存過期時(shí)間，單位-秒
 cacheExpireTime: undefined,
};

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

// 創(chuàng)建axios實(shí)例
const axiosInstance = new Axios();
// 獲取基礎(chǔ)請(qǐng)求axios
const { axios } = axiosInstance;
// 將實(shí)例的方法bind到基礎(chǔ)請(qǐng)求axios上，達(dá)到支持請(qǐng)求別名的目的
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);

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

 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(_config = {}) {
 let config = mergeConfig(this.defaultConfig, _config);
 const { baseUrl, url, header, data = {}, 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);
 }

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

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


 /**
 * 請(qǐng)求緩存api，緩存于本地緩存中
 */
 storage(url, data = {}, _config = {}) {
 const config = {
  ..._config,
  url,
  data,
  method: 'POST',
  cacheStorage: true,
 };
 return this._cache(config);
 }

 /**
 * 請(qǐng)求緩存
 * @param {Object} _config 配置
 * @param {Boolean} _config.useCache 是否開啟緩存
 * @param {String} _config.cacheName 緩存唯一key值，默認(rèn)使用url&data生成
 * @param {Boolean} _config.cacheStorage 是否開啟本地緩存
 * @param {Any} _config.cacheLabel 緩存標(biāo)志，請(qǐng)求前會(huì)對(duì)比該標(biāo)志是否變化來決定是否使用緩存，可用useCache替代
 * @param {Number} _config.cacheExpireTime 緩存時(shí)長(zhǎng)，計(jì)算緩存過期時(shí)間，單位-秒
 */
 _cache(_config) {
 const {
  url = '',
  data = {},
  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),
   cacheExpireTime,
   cacheLabel
  );
  return Promise.resolve(data);
  }
 }
 const curPromise = new Promise((resolve, reject) => {
  const handleFunc = (res) => {
  // do storage
  if (useCache && cacheStorage) {
   Storage.set(cacheName, res, cacheExpireTime, cacheLabel);
  }
  return res;
  };

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

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

 return curPromise;
 }