欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前端JS基础知识复习笔记(18)---AXIOS

程序员文章站 2022-07-07 20:11:34
axios:一款基于PROMISE设计模式封装的AJAX库(JQ中的AJAX就是最普通的AJAX库,没有基于PROMISE管理)// 安装:在文档夹中右击打开命令窗口,输出npm i axios即可//=>axios.get([URL],[OPTIONS]);// axios.get();// axios.delete();// axios.head();//=>axios.post([URL],[DATA],[OPTIONS]):DATA通过请求主传递给服务器的内容// axio...

axios:一款基于PROMISE设计模式封装的AJAX库(JQ中的AJAX就是最普通的AJAX库,没有基于PROMISE管理)
// 安装:在文档夹中右击打开命令窗口,输出npm i axios即可
//=>axios.get([URL],[OPTIONS]);
// axios.get();
// axios.delete();
// axios.head();
//=>axios.post([URL],[DATA],[OPTIONS]):DATA通过请求主传递给服务器的内容
// axios.post();
// axios.put();
OPTIONS
* baseURL:基础的URL路径
* transformRequest:处理请求参数(对POST系列有作用)
* transformResponse:把返回的结果进行处理
* headers:设置请求头
* params:GET系列请求传递给服务器的内容(会把PARAMS中的内容拼接为X-WWW-FORM-URLENCODED这种格式,基于URL问号传参传递给服务器)
* paramsSerializer:传递参数的序列化
* timeout:超时时间
* withCredentials:跨域请求中是否允许携带凭证
* responseType:预设服务器返回结果的格式,默认是JSON,支持BUFFER/TEXT/STREAM/DOCUMENT…
* validateStatus:AXIOS本身只有在HTTP状态码以2开头的时候才认为是成功,其余都认为是失败状态,当然我们可以自己来设置,基于validateStatus这个来修改

=>执行axios.xxx()都会返回一个PROMISE实例,AJAX请求成功会把实例的状态改为FULFILLED,请求失败状态改为REJECTED;并且获取的结果或者错误原因作为PROMISE的VALUE

     axios.get('http://127.0.0.1:5500/json/data2.json', {
		headers: {
			AAA: encodeURIComponent('珠峰哈哈哈')
		},
		params: {
			lx: 1,
			from: 'WX'
		}
	}).then(result => {
		//=>result:从服务器获取的结果
		/!*
		 * CONFIG:我们自己配置的选项信息
		 * DATA:存储的是响应主体内容 
		 * HEADERS:存储响应头的信息
		 * REQUESTAJAX实例
		 * STATUS:响应状态码
		 * STATUS-TEXT:状态码的描述
		 *!/
		return result.data;
	}).catch(reason => {
		console.log(reason);
		throw new Error(reason);
	}).then(data => {
		//=>data:从服务器获取的响应主体内容
		console.log(data);
	}); */
	 axios.post('http://127.0.0.1:5500/json/data2.json', {
		lx: 1,
		from: 'WX'
	}, {
		headers: {
			AAA: encodeURIComponent('珠峰哈哈哈')
		},
		transformRequest: function (data) {
			if (!data) return data;
			let str = ``;
			for (let key in data) {
				if (!data.hasOwnProperty(key)) break;
				str += `&${key}=${data[key]}`;
			}
			return str.substring(1);
		}
	}).then(result => {
		return result.data;
	}).catch(reason => {
		throw new Error(reason);
	}).then(data => {
		console.log(data);
	}); */

在使用AXIOS之前,我们一般都需要配置默认的配置项
1.基础URL,后期再发送请求的时候,URL请求地址最前面的公共部分就不需要再写了
axios.defaults.baseURL = “http://127.0.0.1:5500”;
2.跨域请求中允许携带资源凭证(例如COOKIE信息)
axios.defaults.withCredentials = true;
3.设置请求头:POST系列中,我们传递给服务器数据的格式一般以x-www-form-urlencoded格式为主
axios.defaults.headers[‘Content-Type’] = ‘application/x-www-form-urlencoded’;
4.设置请求拦截器(只对POST系列有用):把基于请求主体传递给服务器的内容进行拦截,把内容格式变为x-www-form-urlencoded这种格式,再传递给服务器

axios.defaults.transformRequest = function (data) {
		if (!data) return data;
		let str = ``;
		for (let key in data) {
			if (!data.hasOwnProperty(key)) break;
			str += `&${key}=${data[key]}`;
		}
		return str.substring(1);
	};

5.设置响应拦截器:[成功状态]把从服务器获取的结果中的响应主体信息获取到即可,[失败状态]手动把错误信息抛出异常

axios.interceptors.response.use(function (response) {
		return response.data;
	}, function (error) {
		throw new Error(error);
	});

6.配置什么才算成功(把PROMISE状态改为FULFILLED)

axios.defaults.validateStatus = function (status) {
		return /^(2|3)\d{2}$/.test(status);
	}

	// axios.get('/json/data2.json').then(data => {
	// 	console.log(data);
	// }).catch(reason => {
	// 	console.log(reason);
	// });

	//=>Promise.all
	let promise1 = Promise.resolve(100);
	let promise2 = Promise.resolve(200);
	axios.all([promise1, promise2]).then(results => {
		let [val1, val2] = results;
		console.log(val1, val2);
	});
axios.all([promise1, promise2]).then(axios.spread(function (val1, val2) {
		//=>axios.spread:把基于axios.all获取的结果一项项的单独获取到
			console.log(val1, val2);
		}))

本文地址:https://blog.csdn.net/weixin_48420364/article/details/107210455