基于小程序请求接口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 相关文章推荐
javascript中"/"运算符常见错误
Oct 13 Javascript
js delete 用法(删除对象属性及变量)
Aug 24 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
极力推荐10个短小实用的JavaScript代码段
Aug 03 Javascript
Vue.js每天必学之过渡与动画
Sep 06 Javascript
关于AngularJs数据的本地存储详解
Jan 20 Javascript
jQuery常见面试题之DOM操作详析
Jul 05 jQuery
JavaScript函数绑定用法实例分析
Nov 14 Javascript
Bootstrap 模态框自定义点击和关闭事件详解
Aug 10 Javascript
微信小程序实现滑动切换自定义页码的方法分析
Dec 29 Javascript
详解如何使用webpack打包多页jquery项目
Feb 01 jQuery
如何在Angular应用中创建包含组件方法示例
Mar 23 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
PHP 翻页 实例代码
2009/08/07 PHP
PHP 批量更新网页内容实现代码
2010/01/05 PHP
php中使用parse_url()对网址进行解析的实现代码(parse_url详解)
2012/01/03 PHP
php正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
Laravel Reponse响应客户端示例详解
2020/09/03 PHP
JavaScript 弹出子窗体并返回结果到父窗体的实现代码
2016/05/28 Javascript
async/await与promise(nodejs中的异步操作问题)
2017/03/03 NodeJs
JavaScript ES6中const、let与var的对比详解
2017/06/18 Javascript
VUE前端cookie简单操作
2017/10/17 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
详解Vue中使用插槽(slot)、聚类插槽
2019/04/12 Javascript
koa router 多文件引入的方法示例
2019/05/22 Javascript
新手简单了解vue
2019/05/29 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[12:29]2018国际邀请赛 开幕秀
2018/08/22 DOTA
Python 基础教程之闭包的使用方法
2017/09/29 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python实现简单层次聚类算法以及可视化
2019/03/18 Python
python中设置超时跳过,超时退出的方式
2019/12/13 Python
Python猜数字算法题详解
2020/03/01 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
如何让python的运行速度得到提升
2020/07/08 Python
HTML5实现页面切换激活的PageVisibility API使用初探
2016/05/13 HTML / CSS
英国领先的露营和露营车品牌之一:OLPRO
2019/08/06 全球购物
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
Dr. Martens马汀博士德国官网:马丁靴鼻祖
2019/12/26 全球购物
JSF面试题:Jsf中的核心类用那些?有什么作用?LiftCycle六大生命周期是什么?
2014/07/17 面试题
浙大网新C/C++面试解惑
2015/05/27 面试题
儿子婚宴答谢词
2014/01/09 职场文书
骨干教师培训制度
2014/01/13 职场文书
百日安全生产活动总结
2014/07/05 职场文书
2014年妇幼卫生工作总结
2014/12/09 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
Pytorch中Softmax和LogSoftmax的使用详解
2021/06/05 Python
详解Vue项目的打包方式(生成dist文件)
2022/01/18 Vue.js