Ajax常用封装库——Axios的使用_AJAX相关

来源:脚本之家  责任编辑:小易  
目录
Axios的特性有:
Axios API
向axios()传递相关配置来创建请求;常用的配置项axios 全局默认值的配置axios拦截器:在请求或响应被then或catch处理前拦截它们
axios的快速请求方法
onload / onprogress
response属性

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使用方法详解与APIvue项目使用axios发送请求让ajax请求头部携带cookie的方法vue 组件的封装之基于axios的ajax请求方法vue结合axios与后端进行ajax交互的方法关于vue中的ajax请求和axios包问题vue axios 在页面切换时中断请求方法 ajaxaxios进阶实践之利用最优雅的方式写ajax请求关于前端ajax请求的优雅方案(http客户端为axios)在Vue组件化中利用axios处理ajax请求的使用方法vue使用Axios做ajax请求详解VUE 更好的 ajax 上传处理 axios.js实现代码

  • 本文相关:
  • 菜鸟蔡之ajax复习第二篇(jquery中的load()方法实现ajax功能)
  • 一个简单的asp+ajax留言本源码下载
  • ajax实现加载数据功能
  • 用ajax实现预览链接可以看到链接的内容
  • ajax中浏览器和服务器交互详解
  • ie7下ajax之open method new的说明
  • ajax和三层架构实现分页功能具体思路及代码
  • asp+ajax实现静态页面分页的代码
  • ajax与传统web开发的异同点
  • ajax轮询请求状态(微信公众号带参数二维码登录网站)
  • 浅析jQuery Ajax通用js封装
  • jQuery Ajax 全局调用封装实例代码详解
  • 对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache...
  • 原生js仿jquery实现对Ajax的封装
  • js锁屏解屏通过对$.ajax进行封装实现
  • 自己实现ajax封装示例分享
  • Ajax基础教程之封装3(三)
  • 关于ajax网络请求的封装实例
  • xmlhttprquest 是ajax的封装吗
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全javascriptasp.netphp编程ajax相关正则表达式asp编程jsp编程编程10000问css/htmlflex脚本加解密web2.0xml/rss网页编辑器相关技巧安全相关网页播放器其它综合dart首页ajax相关vue cli项目 axios模块前后端交互的使用(类似ajax提交)vue官方推荐ajax组件axios.js使用方法详解与apivue项目使用axios发送请求让ajax请求头部携带cookie的方法vue 组件的封装之基于axios的ajax请求方法vue结合axios与后端进行ajax交互的方法关于vue中的ajax请求和axios包问题vue axios 在页面切换时中断请求方法 ajaxaxios进阶实践之利用最优雅的方式写ajax请求关于前端ajax请求的优雅方案(http客户端为axios)在vue组件化中利用axios处理ajax请求的使用方法vue使用axios做ajax请求详解vue 更好的 ajax 上传处理 axios.js实现代码菜鸟蔡之ajax复习第二篇(jquery中的load()方法实现ajax功能)一个简单的asp+ajax留言本源码下载ajax实现加载数据功能用ajax实现预览链接可以看到链接的内容ajax中浏览器和服务器交互详解ie7下ajax之open method new的说明ajax和三层架构实现分页功能具体思路及代码asp+ajax实现静态页面分页的代码ajax与传统web开发的异同点ajax轮询请求状态(微信公众号带参数二维码登录网站)jquery ajax 向后台传递数组参数ajax readystate的五种状态详解jquery实现ajax定时刷新局部页面ajax中的async属性值之同步和异步ajax传递多个参数具体实现ajax获取数据然后显示在页面的实ajax获取数据中文乱码问题最简单jquery ajax中使用serialize()方自己动手打造ajax图片上传(网上没ajax 缓存问题的两种解决方法(ieajax获取页面被缓存的解决方法ajax同步和异步问题浅析及解决方法一个简单的ajax请求类ajax实现表格中信息不刷新页面进行更新数ajax 同步和异步xmlhttp代码分析ajax交互struts2的action(客户端/服务器端java+jquery处理xml数据的方法ajax获取响应内容长度的方法5款ajax 文件上传控件ajax按需读取数据生成下级菜单
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved