// ajax请求,http请求
function getDefaultAdapter() {
var adapter;
if (typeof XMLHttpRequest !== 'undefined') {
// For browsers use XHR adapter
adapter = require('./adapters/xhr');
} else if (typeof process !== 'undefined' && Object.prototype.toString.call(process) === '[object process]') {
// For node use HTTP adapter
adapter = require('./adapters/http');
}
return adapter;
}
4 xhr
module.exports = function xhrAdapter(config) {
return new Promise(function dispatchXhrRequest(resolve, reject) {
var requestData = config.data;
var requestHeaders = config.headers;
if (utils.isFormData(requestData)) {
delete requestHeaders['Content-Type']; // Let the browser set it
}
var request = new XMLHttpRequest();
// HTTP basic authentication
if (config.auth) {
var username = config.auth.username || '';
var password = config.auth.password ? unescape(encodeURIComponent(config.auth.password)) : '';
requestHeaders.Authorization = 'Basic ' + btoa(username + ':' + password);
}
// 合并请求连接,可以通过{baseURL: 'xxx'}或者axios.defaults.baseURL = 'https://xxx';设置
var fullPath = buildFullPath(config.baseURL, config.url);
request.open(config.method.toUpperCase(), buildURL(fullPath, config.params, config.paramsSerializer), true);
// Set the request timeout in MS
request.timeout = config.timeout;
// Listen for ready state
// // onreadystatechange的状态码
// 0: 初始化, XMLHttpRequest对象还没有完成初始化
// 1: 载入, XMLHttpRequest对象开始发送请求
// 2: 载入完成, XMLHttpRequest对象的请求发送完成
// 3: 解析, XMLHttpRequest对象开始读取服务器的响应
// 4: 完成, XMLHttpRequest对象读取服务器响应结束
request.onreadystatechange = function handleLoad() {
if (!request || request.readyState !== 4) {
return;
}
// The request errored out and we didn't get a response, this will be
// handled by onerror instead
// With one exception: request that using file: protocol, most browsers
// will return status as 0 even though it's a successful request
if (request.status === 0 && !(request.responseURL && request.responseURL.indexOf('file:') === 0)) {
return;
}
// Prepare the response
var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(request.getAllResponseHeaders()) : null;
var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;
var response = {
data: responseData,
status: request.status,
statusText: request.statusText,
headers: responseHeaders,
config: config,
request: request
};
// 当返回的status状态码在[200, 300)之间,返回resolve(response)
//default.js中 validateStatus: function validateStatus(status) {
// return status >= 200 && status < 300;
// }
settle(resolve, reject, response);
// Clean up request
request = null;
};
// Handle browser request cancellation (as opposed to a manual cancellation)
// 取消请求
request.onabort = function handleAbort() {
if (!request) {
return;
}
reject(createError('Request aborted', config, 'ECONNABORTED', request));
// Clean up request
request = null;
};
// 处理网络错误问题
request.onerror = function handleError() {
// Real errors are hidden from us by the browser
// onerror should only fire if it's a network error
reject(createError('Network Error', config, null, request));
// Clean up request
request = null;
};
// 处理请求超时问题。
request.ontimeout = function handleTimeout() {
var timeoutErrorMessage = 'timeout of ' + config.timeout + 'ms exceeded';
if (config.timeoutErrorMessage) {
timeoutErrorMessage = config.timeoutErrorMessage;
}
reject(createError(timeoutErrorMessage, config, 'ECONNABORTED',
request));
// Clean up request
request = null;
};
// Add xsrf header
// This is only done if running in a standard browser environment.
// Specifically not if we're in a web worker, or react-native.
// 浏览器
if (utils.isStandardBrowserEnv()) {
// Add xsrf header
var xsrfValue = (config.withCredentials || isURLSameOrigin(fullPath)) && config.xsrfCookieName ?
cookies.read(config.xsrfCookieName) :
undefined;
if (xsrfValue) {
requestHeaders[config.xsrfHeaderName] = xsrfValue;
}
}
// Add headers to the request
if ('setRequestHeader' in request) {
utils.forEach(requestHeaders, function setRequestHeader(val, key) {
if (typeof requestData === 'undefined' && key.toLowerCase() === 'content-type') {
// Remove Content-Type if data is undefined
delete requestHeaders[key];
} else {
// Otherwise add header to the request
request.setRequestHeader(key, val);
}
});
}
// Add withCredentials to request if needed
if (!utils.isUndefined(config.withCredentials)) {
request.withCredentials = !!config.withCredentials;
}
// Add responseType to request if needed
if (config.responseType) {
try {
request.responseType = config.responseType;
} catch (e) {
// Expected DOMException thrown by browsers not compatible XMLHttpRequest Level 2.
// But, this can be suppressed for 'json' type as it can be parsed by default 'transformResponse' function.
if (config.responseType !== 'json') {
throw e;
}
}
}
// Handle progress if needed
if (typeof config.onDownloadProgress === 'function') {
request.addEventListener('progress', config.onDownloadProgress);
}
// Not all browsers support upload events
if (typeof config.onUploadProgress === 'function' && request.upload) {
request.upload.addEventListener('progress', config.onUploadProgress);
}
// 取消请求。
if (config.cancelToken) {
// Handle cancellation
config.cancelToken.promise.then(function onCanceled(cancel) {
if (!request) {
return;
}
request.abort();
reject(cancel);
// Clean up request
request = null;
});
}
if (!requestData) {
requestData = null;
}
// Send the request
request.send(requestData);
});
};
axios源码分析
源码目录分析
axios的工作流程
axios的工作原理
1. axios
`axios
还是instance
都会调用createInstance
函数,构造Axios
的实例,但axios
从本质上来说还是一个函数,通过extend,bind
将Axios
上复制所有的原型扩展方法。axios
和instance
是有区别的,axios
包含了后面扩展的Cancel
、CancelToken
等方法。createInstance
返回的axios
函数的属性上,就已经挂在了Axios
原型上的方法和属性了。2. Axios 核心类
unshift
插入,倒序执行,返回拦截是push
插入,顺序执行。request
做了哪些事,支持config
是个字符串,表现形式为axios('/xxx')
, 也可以是object
, 会去合并mergeConfig(this.defaults, config)
默认值。toLowerCase
, 默认为get
方式interceptors
存放的方法chain.length
不为0
, 支持链式调用,最终返回promise
3 dispatchRequest
dispatchRequest
主要做了哪些,将data、headers
放入到transformData
中执行,再将headers
扁平化处理transformRequest
函数数组,对data
数据进行转换adapter
判断出是node
坏境还是浏览器环境,adapter.then()
, 将返回response
数据。4 xhr
创建
new XMLHttpRequest()
实例合并请求连接,可以通过{baseURL: 'xxx'}或者axios.defaults.baseURL = 'https://xxx';设置
监听
onreadystatechange
变化,0: 初始化, XMLHttpRequest对象还没有完成初始化
1: 载入, XMLHttpRequest对象开始发送请求
2: 载入完成, XMLHttpRequest对象的请求发送完成
3: 解析, XMLHttpRequest对象开始读取服务器的响应
4: 完成, XMLHttpRequest对象读取服务器响应结束
收集
response
返回数据,执行settle
函数,调用validateStatus(status)
判断是否在[200, 300)
,成功状态后resolve(response)
返回数据。结合代码
5 取消请求
cancelToken
主要做了什么事情,内置创建了promise
对象,通过resolvePromise=resolve
,将控制放在executor
中去控制,config.cancelToken.promise.then
在异步中去取消请求cancelToken
只会对未进行相应的请求进行取消,已响应的请求执行了也不会有什么作用。总结
axios
是一个基于promise
的Http
库,在浏览器环境使用XHR
,在node
环境中使用http
模块发送请求,在axios
,可以对请求,返回进行拦截,支持链式拦截,请求拦截为倒序拦截,使用unshift
往前插入数据,返回拦截使用push
方法,正常拦截。取消请求的是一个异步分离的设计方案,利用
promise
的异步效果,通过切换promise
的状态,从而达到异步取消请求的实现。axios
和axios.create
的差别是增加了cancelToken
等方法。