zoukankan      html  css  js  c++  java
  • 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)
    
  • 相关阅读:
    min25筛
    ngnix安装
    Sublime Text 添加到右键菜单 带菜单图标
    临界区与竟态条件
    cscope 支持C++项目
    内网信息收集
    域权限维持-Hook PasswordChangeNotify
    域权限维持-SID History
    域权限维持-DSRM
    ZooKeeper
  • 原文地址:https://www.cnblogs.com/dreamtown/p/14729049.html
Copyright © 2011-2022 走看看