标签:cal xmlhttp targe UNC -- function tde 兼容 hub
适配器模式实践:axios
axios本身就用到了适配器模式,他的兼容方案值得学习和借鉴。
axios的强大之处,在于它不仅仅局限于浏览器端的库,在Node 环境下,也照样好使,axios完美地磨平了两种环境下api的调用差异 ,靠的正是对适配器模式的灵活运用。
在axios的核心逻辑中,实际上派发请求的是 dispatchRequest方法。这个方法主要做了两件事,
调用适配器的逻辑:
1 // 若用户未手动配置适配器,则使用默认的适配器 2 var adapter = config.adapter || defaults.adapter; 3 // dispatchRequest方法的末尾调用的是适配器方法 4 return adapter(config).then( 5 function onAdapterResolution(response) { 6 // 请求成功的回调 7 throwIfCancellationRequested(config); 8 // 转换响应体 9 response.data = transformData( 10 response.data, 11 response.headers, 12 config.transformResponse 13 ); 14 return response; 15 }, 16 function onAdapterRejection(reason) { 17 // 请求失败的回调 18 if (!isCancel(reason)) { 19 throwIfCancellationRequested(config); 20 // 转换响应体 21 if (reason && reason.response) { 22 reason.response.data = transformData( 23 reason.response.data, 24 reason.response.headers, 25 config.transformResponse 26 ); 27 } 28 } 29 return Promise.reject(reason); 30 } 31 );
在实际开发中,我们默认适配器的频率更高一些。默认适配器在 axios/lib/default.js 里面通过 getDefaultAdapter 方法来获取的。
1 function getDefaultAdapter() { 2 var adapter; 3 // 判断当前是否是node环境 4 if ( 5 typeof process !== "undefined" && 6 Object.prototype.toString.call(process) === "[object process]" 7 ) { 8 // 如果是node环境,调用node专属的http适配器 9 adapter = require("./adapters/http"); 10 } else if (typeof XMLHttpRequest !== "undefined") { 11 // 如果是浏览器环境,调用基于xhr的适配器 12 adapter = require("./adapters/xhr"); 13 } 14 return adapter; 15 } 16 // http 中的适配器 17 module.exports = function httpAdapter(config) { 18 return new Promise(function dispatchHttpRequest(resolvePromise, rejectPromise) { 19 // 具体逻辑 20 } 21 } 22 // xhr 中的适配器 23 module.exports = function xhrAdapter(config) { 24 return new Promise(function dispatchXhrRequest(resolve, reject) { 25 // 具体逻辑 26 } 27 }
http 和 xhr 两个适配器 1. 入参都是 config 2.出参都是 Promise
axios 发起跨平台请求时,不仅调用的接口名时同一个,入参和出参的格式都只要掌握同一套。
标签:cal xmlhttp targe UNC -- function tde 兼容 hub
原文地址:https://www.cnblogs.com/Sabo-dudu/p/14653748.html