axios学习笔记

axios

简介

• 一个基于ES6规范下Promise对象的AJAX异步请求框架。
• 如果说Vue代替了jQuery中的DOM操作模块,那么axios可以
  代替jQuery中的**$.ajax**请求模块。
• Vue和React框架中并未集成ajax模块,并且官方都推荐使用
  axios作为ajax库,并且都有与之加强兼容的组件,如vue-
  axios,react-axios组件

前置知识

• Promise基本使用
• AJAX原理,XMLHttpRequest原生对象的使用

特性

• 使用Promise封装了XHR请求
• 可在NodeJS中发送http请求,类似php中的curl
• 支持Promise原生API
• 具备请求和响应拦截器,在发送请求和接收响应时设置预处理程序
• 自动转换请求和响应数据格式 支持中途取消请求
• 具备防XSRF跨站攻击的安全特性 几乎支持所有浏览器(IE仅支持11及以上版本)

安装

npm安装

npm i -S axios

网页Script标签安装

<!-- 本地安装 -->
<script src="./js/axios.min.js"></script>
<!-- cdn安装 -->
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>

安装确认

//确认安装是否成功
console.log(axios) //输出一个对象,并且没有报 axios is not undefine则表示安装成功

基本使用

html页面

<!--用于绑定点击事件发送请求-->
<button onclick="axiosGet()">axios-get</button>
<button id="axiosPost">axios-post</button>

javascript程序

//绑定get请求
let axiosGet = function(){
   
axios({
   
	method: 'get', //请求方法
	//参数写法1
	url: 'http://xxx.com/api/v1/xxx?
	a=getdata&p=10',
	//参数写法2
	url: 'http://xxx.com/api/v1/xxx',
	params: {
   
		a: 'getdata',
		b: 10
	}
}).then((response) => {
   
	console.log(response)
}, (error) => {
   
	//error可以省略
	console.log(error)
	})
}
//绑定post请求
document.querySelector('#axiosPost').onclick =
function(){
   
	//准备post数据
	//1.php作为后端api服务时使用FormData对象创建数据
	let postdata = new FormData();
	postdata.append('name', '吴xx');
	postdata.append('age', 99);
	postdata.append('amount', 5);
	//2.nodejs作为后端时,可使用JSON原生对象
	//let postdata = {
   
		// name: '吴xx',
		// age: 99,
		// amount: 5,
	//}
	//配置axios
axios({
   
	method: 'post', //请求方法
	url: 'http://xxx.com/api/v1/xxx',
	data: postdata
}).then((response) => {
   
	console.log(response)
})
}

注意事项

post请求发送json数据通常被分类复杂请求,会伴随一个
预检操作preflight, 请求method为OPTIONS

Server端为PHP时的注意事项

PHP端允许跨域配置

header("access-control-allow-origin: *"); //允许任何域名跨域,生产环境中应配置具体的域名进行过滤
header("access-control-allow-headers:Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-
Agent,X-Mx-ReqToken,X-Requested-With"<