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");//允许跨域的头,如有自定义的headers参数需要手动添加
header("access-control-allow-methods:GET,POST,PUT,DELETE,HEAD,OPTIONS");//允许的请求method,为配合预检操作OPTIONS已经要在列
header("access-control-allow-credentials: true");
header('X-Powered-By: WAF/2.0');
PHP端处理预检options请求的500错误
//写在跨域配置之后
//检测OPTIONS请求
if(strtoupper($_SERVER['REQUEST_METHOD']) == 'OPTIONS') {
die();