axios浏览器异步请求方法封装 XMLHttpRequest

axios学习笔记defaults(浏览器端异步请求处理方式）

浏览器异步请求方法封装，主要使用XMLHttpRequest

lib/adapters/xhr.js

//入口
var utils = require('./../utils');
var settle = require('./../core/settle');
var buildURL = require('./../heapers/buildURL');
var buildFullPath = require('./../core/buildFullPath');
var parseHeaders = require('./../heapers/parseHeaders');
var isURLSameOrigin = require('./../helpers/isURLSameOrigin');
var createError = require('./../core/createError')

settle方法

lib/core/settle.js

//验证请求返回结果，成功走resolve，失败走reject
var createError = require('./createError')
function seetle(resolve, reject, response){//resolve,reject为promise中参数
	var validateStatus = response.config.validateStatus;//获取默认的状态码校验方法
	//状态码验证通过
	if(!validateStatus || validateStatus(response.staus)){
		resolve(data)
	} else {
		reject(createError(
			'request failed with status code' + response.status,//响应状态码
			response.config,//响应配置项
			null,
			response.request,
			response,
		))
	}
}

createError方法

lib/core/createError.js

//new一个包含message的error对象
var enhanceError = require('./enchanceError')
function createError(message, config, code, request, response){
	var error = new Error(message);//实例化一个error对象
	//给error对象添加请求的各种信息
	return enhanceError(error, config, code, request, response)
}

enchanceError方法

lib/core/enhanceError.js

//将请求出错返回的相关信息全都挂到error对象上，然后抛出，方便定位出错信息
function enchanceRrror(error, config, code, request, response){
	error.config = config;
	if(code){
		error.code = code
	}
	error.request = request;
	error.response = response;
	error.isAxiosError = true;
	return error.toJSON = function(){
		return {
			// Standard(标准浏览器)
			message: this.message,
			name: this.name,
			// Microsoft（ie可用）
		    description: this.description,
		    number: this.number,
		    // Mozilla（火狐）
		    fileName: this.fileName,
		    lineNumber: this.lineNumber,
		    columnNumber: this.columnNumber,
		    stack: this.stack,
		    // Axios
		    config: this.config,
		    code: this.code
		}
	}
	return error
}

buildURL方法

lib/heapers/buildURL.js

//绑定get请求中的parmas到url上
function bindURL(url, params, paramsSerializer) {
	if(!params) return url;
	var serializedParams;
	if(paramsSerialized) {
		serializedParams = paramsSerializer(params);
	} else if(utils.isURLSerarchParams(params)) {
		serializedParams = params.toString();
	} else {
		var pats = [];
		utils.forEach(params, function serialze(val, key) {
			if(val == null || typeof val == 'undefind'){
				return;
			}
			//将val变成数组
			if(utils.isArray(val)){
				key = key+'[]';
			}else{
				val = [val];
			}
		})
		utils.forEach(val, function parseValue(v) {
	        if (utils.isDate(v)) {
	          v = v.toISOString();
	        } else if (utils.isObject(v)) {
	          v = JSON.stringify(v);
	        }
        	parts.push(encode(key) + '=' + encode(v));
      	});
      	serializedParams = pats.join(&);
	}
	if(serializedParams) {
		var hashmarkIndex = url.indexOf('#');
		if(hashmarkIndex != -1) {
			url = url.slice(0, hashmarkIndex);
		}
		url += (url.indexOf('?') == -1? '?' : '&') + serializedParams;
	}
	return url;
}

buildFullPath

lib/core/buildFullPath.js

//获得完整的url
function buildFullPath(baseUrl, requestUrl) {
	//存在baseUrl 且requestUrl不是完整的url
	if(baseUrl && !isAbsoluteURL(requestUrl)){
		//合并url
		return combine(baseUrl, requestUrl)
	}
	return requestUrl;
}

xhrAdapter方法

lib/adapter/xhr.js

//浏览器异步请求基本适配器
function xhrAdapter(config) {
	return new Promise(fuction dispatchXhrRequest(resove, reject){
		var requestData = config.data;
		var requestHeaders = config.headers;
		//如果请求参数是formData类型, 删除用户自定义的请求参数格式Content-Type
		if(utils.isFormData(requestData)){
			delete requestHedeaders['Content-Type'];
		}
		//XMLHttpRequest 对象用户与后台服务器交换数据，所有现代浏览器都支持此对象
		var request = new XMLHttpRequest()
		//加auth信息
		if(config.auth){
			var username = config.auth.username || '';
			var password = config.auth.password || '';
			requestHeaders.Authorization = 'Basic' + btoa(username + ':' + password);
		}
		var fullPath = buildFullUrl(config.baseURL, config.url);
		request.open(config.methods.toUpperCase, buildUrl(fullPath, config.params, config.paramsSerialze), true);
		request.timeout = config.timeout;

		request.onreadystatechange = function handleload() {
			if(!request || request.readyState !== 4) {
				return null;
			}
			if(request.status == 0 && !(request.responseURL && request.responseURL.indexOf('file:') === 0)){
				return null;
			}
			//获取所有请求头信息
			var responseHeaders = 'getAllResponseHeaders' in request ? parseHeaders(requerst.getAllResponseHeaders()) : null;
			//如果接受数据类型为text类型，返回responseText 否则返回request.response
			var responseData = !config.responseType || config.responseType === 'text' ? request.responseText : request.response;
			var response = {
				data: responseData,
				status: request.status,//响应中数字状态码，请求完成前status为0.如果XMLHttpRequest出错也为0
				statusText: request.statusText,
				config: config,
				request: request,
			}
			//结果自定义验证
			settle(resolve, reject, response)
			//清除 request
			request = null;
		}

        //请求被中止时处理
        request.onabort = function handleAbort() {
        	if(!request) return;
        	reject(createError('Request Abort', config, 'ECONNABORTED', request))
        	request = null;
        }

		request.onerror = function handleError() {
			reject(createError('Network Error', config, null, 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))
			request = null
		}

		<!-- 现代浏览器添加xsrfValue -->
		if(utils.isStandarBrowserEvn()){
			<!-- cookeis中有3个方法，write read remove 写 读 删除 -->
			var cookies = requset('./../headers/cookies');
			var xsrfValue = (config.withCredentials || isURLSameOrigin(fullPath)) && config.xsrfCookieName ? cookie.read(config.xsrfCookieName) : undefined;
			<!-- 将xsrfCookieName写道请求头里面 -->
			if(xsrfValue) {
				requestHeaders[config.xsrfCookieName] = xsrfValue;
			}
		}

		<!-- add heders to the request -->
		if('setReuqetHeaders' in request) {
			utils.forEach(requestHeaders, function setRequestHeader(val, key) {
				//如果没有参数，content-type 不需要设置
				if(typeof requestData === 'undefined' && key.toLowerCase()=='content-type'){
					delete requestHeaders[key];
				} else {
					request.setRequestHeaders(key, val);
				}
			})
		}

		<!-- 设置跨域请求的withCredentials 指定跨域Access-Control请求是否应该带有授权信息 例如cookie或者authorization头 -->
		if(config.withCredentials) {
			request.withCredentials = true;
		}
		<!-- 设置浏览器期望接受返回数据的类型 对应resposne中的Content-Type-->
		if(config.responseType) {
			try {
				request.responseType = config.responseType
			} catch (e) {
				if(config.responseType !== 'json') {
					throw e;
				}
			}
		}
		<!-- 处理进度。例如下载文件需要 监听进度事件-->
		if(typeof config.onDownloadProgress === 'function') {
			request.addEventListenner('progress', config.onDownloadProgress)
		}
		<!-- 不是所有的的浏览器都支持上传事件 upload -->
		if(typeof config.onUploadProgress == 'function' && request.upload){
			request.addEventListenner('progress', config.onUploadProgress)
		}
		<!-- cancleToken axios中取消请求 -->
		if(config.cancleToken){
			//如果请求返回成功，则打断request
			config.cancleToken.promise.then(function onCancled(cancale){
				if(!request) return;
				request.abort(); 打断已经发出的请求
				reject(cancle)
				request = null
			})
		}
		if(requestData === undefined){
			requestData = null;
		}
		//发送数据
		rquest.send(requestData)

	})
}

总结

request 实例上的方法和事件 var request = new XMLHttpRequest();

方法

request.abort() 如果请求已被发送，则立刻中止请求
request.getAllResponseHeaders() 以字符串的形式返回所有用CRLF分割的响应头，如果没有收到响应，则返回null
request.getResponseHeaders() 返回包含指定响应头的字符串，如果响应头没收到或者不存在该报头，则返回null
request.open() 初始化一个请求，该方法只能再javascript中使用，若在native code 中初始化请求，请使用openRequest()
request.overrideMimeType() 重写服务器返回的MIME类型
request.send() 发送请求，如果请求时异步的，那么该放大将在请求发送后立即返回
request.setRequestHeader() 设置http请求头，必须在open()之后send()之前调用setRequestHeader()方法

事件

abort 也可以使用onabort属性 当request被停止时触发
error 也可以使用onerror属性 当request遇到错误时触发
load 也可以使用onload属性 当request请求完成时触发
timeout 也可以使用ontimeout属性 预设时间内没有接受到响应时触发
progress 进度事件 request.addEventListener('progress', function(e) {})
...