Ajax常用封装库——Axios的使用
作者:小白可别不举铁
这篇文章主要介绍了Ajax常用封装库——Axios的使用,帮助大家更好的理解和学习网络编程,感兴趣的朋友可以了解下
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”
axios().then(function(response){ //正常请求的响应信息对象response }) .catch(function(error){ //捕获的错误 })
代码展示如下:
<script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script> //使用axios方法 post请求 axios({ url:"/pinglun", method:"post", baseURL:"http://localhost:3000", 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 全局默认值的配置
axios.defaults.baseURL = 'https://xxx.xxx.com'; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencode'
axios拦截器:在请求或响应被then或catch处理前拦截它们
axios 的请求拦截器
//axios 的请求拦截器 axios.interceptors.request.use(function(config){ //配置项config config.params = { id:2 //对配置项中的params进行更改,筛选id=2 } return config;//要有返回值 }) //axios 方法 axios("http://localhost:3000/liuyan") .then(function(res){ console.log(res.data); }) .catch(function(error){ console.log(error); }) //axios 方法 axios("http://localhost:3000/pinglun") .then(function (res) { console.log(res.data); }) .catch(function (error) { console.log(error); }) //多个axios方法也可以拦截
axios 的响应拦截器
//axios 的响应拦截器 axios.interceptors.response.use(function(response){ return(response.data);//response里有很多值,选择data即可 }) //axios 方法 axios("http://localhost:3000/liuyan") .then(function (res) { console.log(res);//response那里拦截了,已经将数据传成data了 }) .catch(function (error) { console.log(error); })
axios的快速请求方法
axios.get(url[,config])
//axios.get(url[,config]) axios.get("http://localhost:3000/liuyan?id=2") .then(function(res){ console.log(res.data); }) axios.get("http://localhost:3000/liuyan",{ params:{ id:1 } }).then(function(res){ console.log(res.data); })
axios.post(url[,data[,config]])
//axios.post(url[,data[,config]]) , post请求,添加数据 axios.post("http://localhost:3000/users",{ name:"laowang", age:23, class:1 })
axios.delete(url[,config])
//axios.delete(url[,config]) axios.delete("http://localhost:3000/liuyan",{ params:{ id:5 } })
axios.put(url[,data[,config]])
//axios.put(url[,data[,config]]) axios.put("http://localhost:3000/liuyan",{ name:"wangshisan", id:11 })
XMLHttpRequest2.0,html5对XMLHttpRequest类型全面升级,使其变得更加易用、强大。
onload / onprogress
XML.onload 事件:只在请求完成时触发
XML.onprogress 事件:只在请求进行中触发
//xhr.onload事件:只在请求完成时触发 //xhr.onprogress事件:只在请求进行中触发 var xhr = new XMLHttpRequest(); xhr.open("get","http://localhost:3000/pinglun"); 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()发送请求到服务器之前设置才会有效。
//XMLHttpRequest之前的response返回 //responseText // responseXml var xhr = new XMLHttpRequest(); xhr.open("get","http://localhost:3000/pinglun"); xhr.onload = function(){ var data = JSON.parse(this.responseText); console.log(data); } xhr.send(null); // xhr2.0新增的response属性 // response // responseType var xhr = new XMLHttpRequest(); xhr.open("get","http://localhost:3000/liuyan"); xhr.responseType = "json"; xhr.onload = function(){ console.log(this.response); } xhr.send(null)
以上就是Ajax常用封装库——Axios的使用的详细内容,更多关于Ajax封装库Axios的使用的资料请关注脚本之家其它相关文章!
您可能感兴趣的文章:
- Vue CLI项目 axios模块前后端交互的使用(类似ajax提交)
- Vue官方推荐AJAX组件axios.js使用方法详解与API
- vue项目使用axios发送请求让ajax请求头部携带cookie的方法
- vue 组件的封装之基于axios的ajax请求方法
- vue结合axios与后端进行ajax交互的方法
- 关于vue中的ajax请求和axios包问题
- vue axios 在页面切换时中断请求方法 ajax
- axios进阶实践之利用最优雅的方式写ajax请求
- 关于前端ajax请求的优雅方案(http客户端为axios)
- 在Vue组件化中利用axios处理ajax请求的使用方法
- vue使用Axios做ajax请求详解
- VUE 更好的 ajax 上传处理 axios.js实现代码