axios＜前端学习笔记＞

What

Axios是专注于 网络数据请求 的库

相比于元素的 XMLHttpRequest对象,axios 简单易用

相比于jQuery,axios更加 轻量化,只专注于网络数据请求

axios发起get请求

let axios = require('axios')
// 请求的URL地址
let url = 'http://www.liulongbin.top:3006/api/getbooks'
// 请求的参数对象
let paramsObj = {name:'zs',age:20}
// 调用axios.get() 发起GET请求
axios.get(url,{param:paramsObj}).then(function(res){
    // res.data 是服务器返回的数据
    let result = res.data
    console.log(result)
}).catch(function(err){
    console.log(err);
})

axios发起post请求

let axios = require('axios')
// 请求的URL地址
let url = 'http://www.liulongbin.top:3006/api/post'
// 请求的参数对象
let dataObj = {location:'北京',address:'顺义'}
// 调用axios.get() 发起请求
axios.post(url,dataObj).then(function(res){
    // res.data 是服务器返回的数据
    let result = res.data
    console.log(result)
}).catch(function(err){
    console.log(err);
})

直接使用axios发起post或post请求

axios({
    method:'请求类型',
    url:'请求地址',
    data:{ /*POST 数据*/},
    params:{/*GET 参数*/}
}).then(function(res){

}).catch(function(err){

})
/*
第一个对象参数可设置为 options 传入
 */

let options ={
    method:'请求类型',
    url:'请求地址',
    data:{ /*POST 数据*/},
    params:{/*GET 参数*/}
}

---

同源策略

1. 无法读取非同源网页的Cookie LocalStorage和IndexedDB
2. 无法接触非同源网页的DOM
3. 无法向非同源地址发送Ajax请求

跨域

浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!

JSONP

是JSON的一种"使用模式",可用于解决主流浏览器的跨域数据访问的问题.

原理:
<script>标签不受浏览器同源策略影响,可以通过src属性,请求跨域数据接口,并通过 函数调用 的形式接收跨域接口响应回来的数据

    <script>
        function success(data){
            console.log(`拿到了数据::${data}`)
        }
    </script>
    <!-- ?通过字符串查询指定调用本地的哪一个函数,服务器返回一个对应函数的调用,参数就是请求回的数据 -->
    <script src="xxx.com?callback=success"></script>

jQuery下的JSONP

jQuery 提供了$.ajax()函数,除了可以发起真正的Ajax数据请求之外,还能够发起JSONP数据请求:

$.ajax({
    url:'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    // 如果要使用 $.ajax() 发起JSONP请求,必须指定datatype 为 jsonp
    dataType:'jsonp',
    // 发送到服务端的参数名称,默认值为callback
    jsonp:'callback',
    // 自定义的回调函数名称,默认值为jQueryxxx格式
    jsonpCallbaack:'abc',
    success:function(res){
        console.log(res)
    }
})

默认情况下,使用jQuery 发起JSONP请求,会自动携带一个callback=jQueryxxx的参数,jQUeryxxx是随机生成的一个回调函数名称.

节流阀

操作的"红绿灯" ,节流阀为空,表示可以进行下次操作,不为空,表示不能执行下次操作

$(function(){
    let timer = null; // 1. 预定义一个节流阀 节流阀不为空则表示 有事件在执行
    $(document).on('scroll',function(){
        if(timer){return} // 2. 判断节流阀是否为空,如果不为空,则证明距离上次执行间隔不足16毫秒
        timer = setTimeout(function(){
            // 执行 事件
            timer = null; // 3. 将节流阀 清空
        },16) // 刷新率60HZ 16ms
    })
})