Axios 是目前应用最为广泛的 AJAX 封装库
Axios的特性有：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求数据和响应数据
- 取消请求
- 自动转换 JSON 数据
- 客户端支持防御 XSRF
使用axios时，需要通过使用script标签引入：https://unpkg.com/axios/dist/axios.min.js
axios的中文网链接：Axios中文网
Axios API
向axios（）传递相关配置来创建请求；
- axios（对象格式的配置选项）
- axios（url，config）
常用的配置项
- url：用于请求的服务器URL
- method：创建请求时使用的方法
- baseURL：传递相对URL前缀，将自动加在url前面
- headers：即将被发送的自定义请求头
- params：即将与请求一起发送的URL参数
- data：作为请求主体被发送的数据
- timeout：指定请求超时的毫秒数（0表示无超时时间）
- responseType：表示服务器响应的数据类型，默认“json”
1 2 3 4 5 6 | axios（）.then(function(response){ //正常请求的响应信息对象response}).catch(function(error){ //捕获的错误}) |
代码展示如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | //使用axios方法 post请求axios({ url:"/pinglun", method:"post", header:{ "Content-Type":"application/json" }, data:{ "content":"well", "lyId":4 }, timeout:1000, }).then(function(res){ console.log(res.data); }).catch(function(error){ console.log(error);}) </script> |
axios 全局默认值的配置
1 2 | axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencode' |
axios拦截器：在请求或响应被then或catch处理前拦截它们
axios 的请求拦截器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | //axios 的请求拦截器axios.interceptors.request.use(function(config){ //配置项config config.params = { id:2 //对配置项中的params进行更改，筛选id=2 } return config;//要有返回值}) //axios 方法.then(function(res){ console.log(res.data); }).catch(function(error){ console.log(error);}) //axios 方法.then(function (res) { console.log(res.data);}).catch(function (error) { console.log(error);})//多个axios方法也可以拦截 |
axios 的响应拦截器
1 2 3 4 5 6 7 8 9 10 11 12 13 | //axios 的响应拦截器axios.interceptors.response.use(function(response){ return(response.data);//response里有很多值，选择data即可}) //axios 方法.then(function (res) { console.log(res);//response那里拦截了，已经将数据传成data了}).catch(function (error) { console.log(error);}) |
axios的快速请求方法
axios.get(url[,config])
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | //axios.get(url[,config]) .then(function(res){ console.log(res.data);}) params:{ id:1 }}).then(function(res){ console.log(res.data);}) |
axios.post(url[,data[,config]])
1 2 3 4 5 6 | //axios.post(url[,data[,config]]) , post请求，添加数据 name:"laowang", age:23, class:1}) |
axios.delete(url[,config])
1 2 3 4 5 6 |
axios.put(url[,data[,config]])
1 2 3 4 5 | //axios.put(url[,data[,config]]) name:"wangshisan", id:11}) |
XMLHttpRequest2.0，html5对XMLHttpRequest类型全面升级，使其变得更加易用、强大。
onload / onprogress
XML.onload 事件：只在请求完成时触发
XML.onprogress 事件：只在请求进行中触发
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | //xhr.onload事件：只在请求完成时触发//xhr.onprogress事件：只在请求进行中触发var xhr = new XMLHttpRequest();xhr.onload = function(){ console.log("load:",this.readyState);};xhr.onprogress = function(e){ console.log("progress:",this.readyState); //在周期性请求过程中，接收到的数据个数 console.log(e.loaded); //接收数据的总个数 console.log(e.total);}xhr.send(null); |
response属性
以对象的形式表述响应体，其类型取决于responseType的值。根据responseType的值，来通过特定的类型请求数据。
responseType要在调用open（）初始化请求之后，在调用send（）发送请求到服务器之前设置才会有效。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | //XMLHttpRequest之前的response返回//responseText// responseXmlvar xhr = new XMLHttpRequest();xhr.onload = function(){ var data = JSON.parse(this.responseText); console.log(data); }xhr.send(null); // xhr2.0新增的response属性 // response// responseTypevar xhr = new XMLHttpRequest();xhr.responseType = "json";xhr.onload = function(){ console.log(this.response);}xhr.send(null) |
以上就是Ajax常用封装库——Axios的使用的详细内容，更多关于Ajax封装库Axios的使用的资料请关注IT俱乐部其它相关文章！
