区块链遇上小程序_基于小程序请求接口wx.reques

2021-01-05 13:15

基于小程序请求接口wx.request封装的类axios请求       这篇文章主要介绍了基于小程序请求接口wx.request封装的类axios请求,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
支持 自定义响应状态码对应 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: 'pre>

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[, data[, config]]) - 缓存请求(内存)
  axios.cache.storage(url[, data[, 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没有的新增配置项 */
 // {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 需通过参数传递
axios 兼容 axios(config) 或 axios(url[, config]); 别名都只是 config 合并,最终都通过 axios.requst()发起请求;
let config = mergeConfig(this.defaultConfig, _config); const { baseUrl, url, header, data = {}, transformRequest } = config; putedConfig = { 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(响应状态处理)
if ((validateStatus validateStatus(res)) || ess(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';
* @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 = '', data = {}, useCache = true, cacheName: _cacheName, cacheStorage, cacheLabel, cacheExpireTime, } = _config; putedCacheName = _cacheName || `${url}#${JSON.stringify(data)}`; const cacheName = putedCacheName); // 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; }

到此这篇关于基于小程序请求接口wx.request封装的类axios请求的文章就介绍到这了,更多相关小程序 wx.request封装类axios请求内容请搜索凡科以前的文章或继续浏览下面的



扫描二维码分享到微信

在线咨询
联系电话

020-66889888