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 相关文章推荐
js统计页面的来访次数实现代码
May 09 Javascript
json属性名为什么要双引号(个人猜测)
Jul 31 Javascript
javascript ajax的5种状态介绍
Aug 18 Javascript
JavaScript中String.prototype用法实例
May 20 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
easyui 中的datagrid跨页勾选问题的实现方法
Jan 18 Javascript
Angular2中select用法之设置默认值与事件详解
May 07 Javascript
JavaScript实现短暂提示框功能
Apr 04 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
vue父组件异步获取数据传给子组件的方法
Jul 26 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
微信小程序用户授权最佳实践指南
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
浅谈COOKIE和SESSION区别
2015/07/19 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
PHP批量去除BOM头内容信息代码
2016/03/11 PHP
laravel异步监控定时调度器实例详解
2019/06/21 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
Javascript调用C#代码
2011/01/17 Javascript
关于JAVASCRIPT urldecode URL解码的问题
2012/01/08 Javascript
js验证模型自我实现的具体方法
2013/06/21 Javascript
jquery简单的拖动效果实现原理及示例
2013/07/26 Javascript
jquery对元素拖动排序示例
2014/01/16 Javascript
微信小程序 解决请求服务器手机预览请求不到数据的方法
2017/01/04 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
bootstrap table单元格新增行并编辑
2017/05/19 Javascript
React如何避免重渲染
2018/04/10 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
Python文档生成工具pydoc使用介绍
2015/06/02 Python
Python的Asyncore异步Socket模块及实现端口转发的例子
2016/06/14 Python
python+pillow绘制矩阵盖尔圆简单实例
2018/01/16 Python
Python zip()函数用法实例分析
2018/03/17 Python
django 发送手机验证码的示例代码
2018/04/25 Python
pandas中去除指定字符的实例
2018/05/18 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
Python多线程应用于自动化测试操作示例
2018/12/06 Python
python opencv minAreaRect 生成最小外接矩形的方法
2019/07/01 Python
Python一行代码解决矩阵旋转的问题
2019/11/30 Python
如何让python的运行速度得到提升
2020/07/08 Python
澳大利亚婴儿礼品公司:The Baby Gift Company
2018/11/04 全球购物
盖尔斯工厂店:GUESS Factory
2020/01/21 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
2014年党风廉政工作总结
2014/12/03 职场文书
女方离婚起诉书
2015/05/18 职场文书
教你用python控制安卓手机
2021/05/13 Python
浅谈@Value和@Bean的执行顺序问题
2021/06/16 Java/Android
JS前端监控采集用户行为的N种姿势
2022/07/23 Javascript