kxios/index.js
import Kxios from './Kxios.js';
import defaultConfig from './defaultConfig.js';
import utils from './utils.js';
function createInstance(config) {
var context = new Kxios(config);
var request = utils.bind(Kxios.prototype.request, context);
utils.extend(request, Kxios.prototype, context);
utils.extend(request, context);
return request;
}
var kxios = createInstance(defaultConfig);
kxios.create = function(config) {
return createInstance(config);
}
export default kxios;
kxios/Kxios.js
import utils from './utils.js';
import InterceptorManager from './InterceptorManager.js';
// var obj1 = {x: 1, y:2, z: {a: 100, b: 200}, arr: [1,2,3]};
// var obj2 = utils.deepCopy(obj1);
// for (var key in obj1) {
// obj2[key] = obj1[key];
// }
// obj2.z.a = 1000;
// console.log(obj1, obj2);
function Kxios(config) {
// 初始化配置
this.config = config;
// 拦截器
this.interceptors = {
request: new InterceptorManager(),
response: new InterceptorManager()
}
}
Kxios.prototype.request = function(config) {
// 请求需要的配置，把传入的config与this.config进行必要的合并
var config = utils.mergeConfig( this.config, config );
// console.log(config);
/**
* this.interceptors.request
* this.dispatchRequest( config )
* this.interceptors.response
*/
// 调用链
var chain = [this.dispatchRequest, undefined];
// 循环取出请求拦截器内注册的所有函数
/**
* this.interceptors.request.handlers
* => [resove1, reject1, resove2, reject2]
*
* chain = [resove2, reject2, resove1, reject1,this.dispatchRequest, undefined]
*/
var requestHandlers = this.interceptors.request.handlers;
var requestHandlersLen = requestHandlers.length;
for (var i = 0; i < requestHandlersLen; i++) {
chain.unshift( requestHandlers[i].resolve, requestHandlers[i].reject );
}
// 响应拦截器是向尾部添加
/**
* this.interceptors.response.handlers
* [resove1, reject1, resove2, reject2]
* chain = [resove2, reject2, resove1, reject1,this.dispatchRequest, undefined,resove1, reject1,resove2, reject2]
*/
var responseHandlers = this.interceptors.response.handlers;
var responseHandlersLen = responseHandlers.length;
for (var i = 0; i < responseHandlersLen; i++) {
chain.push( responseHandlers[i].resolve, responseHandlers[i].reject );
}
/**
* 请求拦截器后注册的先执行
* 响应拦截器先注册先执行
*/
// 不去调用chain中的函数，而是创建一个新的resolve状态的promise
// 作为整个调用的起始函数
var promise = Promise.resolve(config);
// 把chain中的所有函数添加promise对象的then中
while (chain.length) {
promise = promise.then( chain.shift(), chain.shift() );
}
// promise.then(f1).then(f2).then(f3)
return promise;
}
Kxios.prototype.dispatchRequest = function(config) {
var adapter = config.adapter;
return adapter(config);
}
// 这4个请求方式都是不能带请求体
var method1 = ['delete', 'get', 'head', 'options'];
// method1.forEach( methodName => {
// Kxios.prototype[methodName] = function(url, config) {
// return this.request(utils.deepMerge(config || {}, {
// method: methodName,
// url: url
// }));
// }
// } );
for (var i = 0; i < method1.length; i++) {
(function (i) {
var methodName = method1[i];
Kxios.prototype[methodName] = function (url, config) {
return this.request(utils.deepMerge(config || {}, {
method: methodName,
url: url
}));
}
})(i)
}
// 下面3个都是可以带请求体的
var method2 = ['post', 'put', 'patch'];
for (var i = 0; i < method2.length; i++) {
(function (i) {
var methodName = method2[i];
Kxios.prototype[methodName] = function (url, data, config) {
return this.request(utils.deepMerge(config || {}, {
method: methodName,
url: url,
data: data
}));
}
})(i)
}
export default Kxios;
kxios/defaultConfig.js
import xhrAdapter from './xhrAdapter.js';
var defaultsConfig = {
// `url` is the server URL that will be used for the request
url: '',
// `method` is the request method to be used when making the request
method: 'get', // default
// `baseURL` will be prepended to `url` unless `url` is absolute.
// It can be convenient to set `baseURL` for an instance of axios to pass relative URLs
// to methods of that instance.
baseURL: '',
// `transformRequest` allows changes to the request data before it is sent to the server
// This is only applicable for request methods 'PUT', 'POST', 'PATCH' and 'DELETE'
// The last function in the array must return a string or an instance of Buffer, ArrayBuffer,
// FormData or Stream
// You may modify the headers object.
transformRequest: [function (data, headers) {
// Do whatever you want to transform the data
return data;
}],
// `transformResponse` allows changes to the response data to be made before
// it is passed to then/catch
transformResponse: [function (data) {
// Do whatever you want to transform the data
if (typeof data === 'string') {
try {
data = JSON.parse(data);
} catch (e) {}
}
return data;
}],
// `headers` are custom headers to be sent
headers: {
'X-Requested-With': 'XMLHttpRequest'
},
// `params` are the URL parameters to be sent with the request
// Must be a plain object or a URLSearchParams object
params: {},
// `paramsSerializer` is an optional function in charge of serializing `params`
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function (params) {
return params
},
// `data` is the data to be sent as the request body
// Only applicable for request methods 'PUT', 'POST', and 'PATCH'
// When no `transformRequest` is set, must be of one of the following types:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - Browser only: FormData, File, Blob
// - Node only: Stream, Buffer
data: {},
// `timeout` specifies the number of milliseconds before the request times out.
// If the request takes longer than `timeout`, the request will be aborted.
timeout: 1000, // default is `0` (no timeout)
// `withCredentials` indicates whether or not cross-site Access-Control requests
// should be made using credentials
withCredentials: false, // default
// `adapter` allows custom handling of requests which makes testing easier.
// Return a promise and supply a valid response (see lib/adapters/README.md).
adapter: function (config) {
// return (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') ? httpAdapter : xhrAdapter;
return typeof window === 'object' ? xhrAdapter(config) : httpAdapter(config);
},
// `auth` indicates that HTTP Basic auth should be used, and supplies credentials.
// This will set an `Authorization` header, overwriting any existing
// `Authorization` custom headers you have set using `headers`.
// Please note that only HTTP Basic auth is configurable through this parameter.
// For Bearer tokens and such, use `Authorization` custom headers instead.
auth: {
username: '',
password: ''
},
// `responseType` indicates the type of data that the server will respond with
// options are: 'arraybuffer', 'document', 'json', 'text', 'stream'
// browser only: 'blob'
responseType: 'json', // default
// `responseEncoding` indicates encoding to use for decoding responses
// Note: Ignored for `responseType` of 'stream' or client-side requests
responseEncoding: 'utf8', // default
// `xsrfCookieName` is the name of the cookie to use as a value for xsrf token
xsrfCookieName: 'XSRF-TOKEN', // default
// `xsrfHeaderName` is the name of the http header that carries the xsrf token value
xsrfHeaderName: 'X-XSRF-TOKEN', // default
// `onUploadProgress` allows handling of progress events for uploads
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `onDownloadProgress` allows handling of progress events for downloads
onDownloadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
// `maxContentLength` defines the max size of the http response content in bytes allowed
maxContentLength: 2000,
// `validateStatus` defines whether to resolve or reject the promise for a given
// HTTP response status code. If `validateStatus` returns `true` (or is set to `null`
// or `undefined`), the promise will be resolved; otherwise, the promise will be
// rejected.
validateStatus: function (status) {
return status >= 200 && status < 300; // default
},
// `maxRedirects` defines the maximum number of redirects to follow in node.js.
// If set to 0, no redirects will be followed.
maxRedirects: 5, // default
// `socketPath` defines a UNIX Socket to be used in node.js.
// e.g. '/var/run/docker.sock' to send requests to the docker daemon.
// Only either `socketPath` or `proxy` can be specified.
// If both are specified, `socketPath` is used.
socketPath: null, // default
// `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
// and https requests, respectively, in node.js. This allows options to be added like
// `keepAlive` that are not enabled by default.
httpAgent: {
keepAlive: true
},
httpsAgent: {
keepAlive: true
},
// 'proxy' defines the hostname and port of the proxy server.
// You can also define your proxy using the conventional `http_proxy` and
// `https_proxy` environment variables. If you are using environment variables
// for your proxy configuration, you can also define a `no_proxy` environment
// variable as a comma-separated list of domains that should not be proxied.
// Use `false` to disable proxies, ignoring environment variables.
// `auth` indicates that HTTP Basic auth should be used to connect to the proxy, and
// supplies credentials.
// This will set an `Proxy-Authorization` header, overwriting any existing
// `Proxy-Authorization` custom headers you have set using `headers`.
proxy: {
host: '127.0.0.1',
port: 9000,
auth: {
username: '',
password: ''
}
},
// `cancelToken` specifies a cancel token that can be used to cancel the request
// (see Cancellation section below for details)
cancelToken: ''
};
export default defaultsConfig;
kxios/InterceptorManager.js
function InterceptorManager() {
this.handlers = [];
}
InterceptorManager.prototype.use = function ( resolve, reject ) {
this.handlers.push({
resolve: resolve,
reject: reject
});
}
export default InterceptorManager;
kxios/xhrAdapter.js
export default function(config) {
return new Promise(function(resolve, reject) {
console.info('%c [adapter] : XMLHttpRequest', 'color:blue;font-size:20px;');
var xhr = new XMLHttpRequest();
xhr.onload = function() {
// console.log(this);
var responseData = {
data: JSON.parse(this.responseText),
status: this.status,
statusText: this.statusText
}
resolve( responseData );
}
xhr.open( config.method , config.url, true);
xhr.send();
})
}
kxios/fetchAdapter.js
export default function(config) {
return new Promise(function(resolve, reject) {// 实际可以不需要这一层Promise，这里为了测试输出
console.info('%c [adapter] : Fetch', 'color:blue;font-size:20px;');
var responseData = {};
return fetch(config.url, {
method: config.method
}).then(function(res) {
responseData = {
status: res.status,
statusText: res.statusText
};
return res.json();
}, function(err) {
reject(err);
}).then(function(data) {
responseData.data = data;
resolve(responseData);
});
});
}
kxios/utils.js
function isArray(val) {
return Object.prototype.toString.call(val) === '[object Array]';
}
function isObject(val) {
return typeof val === 'object' && val !== null;
}
function deepCopy(obj2) {
/**
* 把一个对象递归拷贝给另外一个对象
* 源对象与拷贝后的对象没有引用关系
*/
var obj = isArray(obj2) ? [] : {};
for (var property in obj2) {
// 如果当前拷贝的数据还是一个对象的话，那么继续调用
// deepCopy 进行二次拷贝
// 递归
if (isObject(obj2[property])) {
obj[property] = deepCopy(obj2[property]);
} else {
obj[property] = obj2[property];
}
}
return obj;
}
function deepMerge(obj1, obj2) {
var obj = deepCopy(obj1);
for (var property in obj2) {
var val = obj[property];
var val2 = obj2[property];
if ( isObject(val) && isObject(val2)) {
obj[property] = deepMerge(val, val2);
} else if (isObject(val2)) {
obj[property] = deepCopy(val2);
} else {
obj[property] = val2;
}
}
return obj;
}
function mergeConfig(config1, config2) {
/**
* 注意：
* 不能直接把config2合并到config1中
*
* 1. 把config1先通过深拷贝赋值给一个新的对象
*/
var config = deepCopy(config1);
var properties1 = ['url', 'method', 'params', 'data'];
// 把config2合并到config
for (var property in config2) {
// 针对一些没有必要合并的配置直接赋值
if ( properties1.indexOf(property) != -1 ) {
config[property] = config2[property];
} else {
if (isObject(config2[property])) {
// merge
config[property] = deepMerge(config[property], config2[property]);
} else {
config[property] = config2[property];
}
}
}
return config;
}
function bind(fn, context) {
return function () {
var args = [];
for (var i = 0; i < arguments.length; i++) {
args.push(arguments[i]);
}
return fn.apply(context, args);
}
}
function extend(obj1, obj2, context) {
for (var property in obj2) {
if (typeof obj2[property] === 'funtion') {
obj1[property] = bind(obj2[property], context);
} else {
obj1[property] = obj2[property];
}
}
}
export default {
isArray,
isObject,
deepCopy,
deepMerge,
mergeConfig,
bind,
extend
};
最后来使用这个手工写好的axios
// import Kxios from './kxios/Kxios.js';
// var kxios = new Kxios({
// // baseUrl: 'http://localhost:7777',
// // headers: {
// // x: 1
// // }
// });
// console.log( kxios );
// kxios.interceptors.request.use(function(config) {
// // console.log(config);
// console.log('request1');
// return config;
// });
// kxios.interceptors.request.use(function(config) {
// // console.log(config);
// console.log('request2');
// // return new Promise(function(resolve) {
// // setTimeout(function() {
// // resolve();
// // }, 3000);
// // })
// return config;
// });
// kxios.interceptors.response.use(function(res) {
// // console.log(res);
// console.log('response1');
// return res;
// });
// kxios.interceptors.response.use(function(res) {
// // console.log(res);
// console.log('response2');
// // if (res.data.code != 0) {
// // alert();
// // }
// return res;
// });
// kxios.request({
// method: 'get',
// url: 'http://localhost:7777/data'
// }).then( function(res) {
// console.log(res);
// } );
// kxios.request({
// method: 'get',
// url: '/data'
// });
// Promise.resolve(123).then(function(v) {
// console.log(v);
// return v;
// }).then(function(v) {
// console.log(v);
// })
// kxios.get('http://localhost:7777/data').then(function(res) {
// console.log(res);
// });
import kxios from './kxios/index.js';
import fetchAdapter from './kxios/fetchAdapter.js';
import xhrAdapter from './kxios/xhrAdapter.js';
// import jsonpAdapter from './kxios/jsonpAdapter.js';
// console.dir(kxios.config);
kxios.config.adapter = function(config) {
return xhrAdapter(config);
}
kxios.get('http://localhost:7777/data').then(function(res) {
console.log(res);
});
// kxios({
// url: 'http://localhost:7777/data'
// }).then(function(res) {
// console.log(res);
// });
// let kxios2 = kxios.create({
// baseURL: 'http://www2.com'
// });
// kxios2.get();