基于小程序请求接口wx.request封装的类axios请求


Posted in Javascript onJuly 02, 2020

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[, 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的可配置项,参考 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, 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);
 }

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, data = {}, _config = {}) {
 const config = {
  ..._config,
  url,
  data,
  method: 'POST',
  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 = '',
  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;
 }

到此这篇关于基于小程序请求接口wx.request封装的类axios请求的文章就介绍到这了,更多相关小程序 wx.request封装类axios请求内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery之尺寸调整组件的深入解析
Jun 19 Javascript
AngularJS表单编辑提交功能实例
Feb 13 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
基于JavaScript实现根据手机定位获取当前具体位置(X省X市X县X街道X号)
Dec 29 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
vuejs如何配置less
Apr 25 Javascript
Javascript网页抢红包外挂实现分享
Jan 11 Javascript
js构建二叉树进行数值数组的去重与优化详解
Mar 26 Javascript
JS实现DOM节点插入操作之子节点与兄弟节点插入操作示例
Jul 30 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
Vue页面跳转传递参数及接收方式
Sep 09 Javascript
JS异步宏队列与微队列原理区别详解
Jul 02 #Javascript
微信小程序自定义扫码功能界面的实现代码
Jul 02 #Javascript
JS字符串和数组如何实现相互转化
Jul 02 #Javascript
Vue父子之间值传递的实例教程
Jul 02 #Javascript
JS出现404错误原理及解决方案
Jul 01 #Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 #Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 #Javascript
You might like
杏林同学录(七)
2006/10/09 PHP
Snoopy类使用小例子
2008/04/15 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
php 操作调试的方法
2012/07/12 PHP
免费的ip数据库淘宝IP地址库简介和PHP调用实例
2014/04/08 PHP
PHP生成各种常见验证码和Ajax验证过程
2016/01/10 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
laravel使用数据库测试注意事项
2020/04/10 PHP
pjblog中的UBBCode.js
2007/04/25 Javascript
ext jquery 简单比较
2010/04/07 Javascript
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
firefox下jquery ajax返回object XMLDocument处理方法
2014/01/26 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
基于原生js淡入淡出函数封装(兼容IE)
2016/10/20 Javascript
详解ES6中的let命令
2020/04/05 Javascript
深入理解javascript中的 “this”
2017/01/17 Javascript
关于不同页面之间实现参数传递的几种方式讨论
2017/02/13 Javascript
Vue组件通信实践记录(推荐)
2017/08/15 Javascript
微信小程序实现漂亮的弹窗效果
2020/05/26 Javascript
vue自定v-model实现表单数据双向绑定问题
2018/09/03 Javascript
vue-cli项目代理proxyTable配置exclude的方法
2018/09/20 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
2020/08/21 Javascript
python 使用正则表达式按照多个空格分割字符的实例
2018/12/20 Python
python设置环境变量的原因和方法
2019/06/24 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
python实现高斯投影正反算方式
2020/01/17 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
解决pycharm导入本地py文件时,模块下方出现红色波浪线的问题
2020/06/01 Python
微信浏览器取消缓存的方法
2015/03/28 HTML / CSS
越南综合购物网站:Lazada越南
2019/06/10 全球购物
生育关怀行动实施方案
2014/03/26 职场文书
2019年个人工作总结范文(3篇)
2019/08/27 职场文书