Ajax常用封装库——Axios的使用


Posted in Javascript onMay 08, 2021

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的使用的资料请关注三水点靠木其它相关文章!

Javascript 相关文章推荐
javascript 获取页面的高度及滚动条的位置的代码
May 06 Javascript
js获取html参数及向swf传递参数应用介绍
Feb 18 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
May 06 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
JavaScript中reduce()方法的使用详解
Jun 09 Javascript
javascript中this用法实例详解
Apr 06 Javascript
Element UI 自定义正则表达式验证方法
Sep 04 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 jQuery
聊聊Vue 中 title 的动态修改问题
Jun 11 Javascript
微信小程序框架的页面布局代码
Aug 17 Javascript
vue实现全屏滚动效果(非fullpage.js)
Mar 07 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
微信小程序用户授权最佳实践指南
vue完美实现el-table列宽自适应
详解JS WebSocket断开原因和心跳机制
May 07 #Javascript
如何用threejs实现实时多边形折射
详解JS ES6编码规范
May 07 #Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 #Javascript
详解如何使用Node.js实现热重载页面
May 06 #Javascript
You might like
PHP计算日期相差天数实例分析
2016/02/23 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
什么是JavaScript
2009/08/13 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
javascript中length属性的探索
2011/07/31 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
Raphael带文本标签可拖动的图形实现代码
2013/02/20 Javascript
js中创建对象的几种方式示例介绍
2014/01/26 Javascript
动态创建按钮的JavaScript代码
2016/01/29 Javascript
javascript基于原型链的继承及call和apply函数用法分析
2016/12/15 Javascript
源码分析Vue.js的监听实现教程
2017/04/23 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
vue监听滚动事件的方法
2020/12/21 Vue.js
利用Python中unittest实现简单的单元测试实例详解
2017/01/09 Python
用python记录运行pid,并在需要时kill掉它们的实例
2017/01/16 Python
python处理Excel xlrd的简单使用
2017/09/12 Python
详解python Todo清单实战
2018/11/01 Python
Python 文本文件内容批量抽取实例
2018/12/10 Python
Python字典对象实现原理详解
2019/07/01 Python
python向图片里添加文字
2019/11/26 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python3.7下安装pyqt5的方法步骤(图文)
2020/05/12 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
Html5新增标签与样式及让元素水平垂直居中
2019/07/11 HTML / CSS
马来西亚网上购物平台:ezbuy
2018/02/13 全球购物
小区门卫管理制度
2014/01/29 职场文书
投资合作协议书范本
2014/04/17 职场文书
如何写求职信
2014/05/24 职场文书
幽默自我介绍演讲稿
2014/08/21 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
2016年百日安全生产活动总结
2016/04/06 职场文书
详解MySQL的Seconds_Behind_Master
2021/05/18 MySQL
如何给HttpServletRequest增加消息头
2021/06/30 Java/Android
opencv检测动态物体的实现
2021/07/21 Python
使用Redis实现点赞取消点赞的详细代码
2022/03/20 Redis