axios、跨域与JSONP、防抖和节流

这篇具有很好参考价值的文章主要介绍了axios、跨域与JSONP、防抖和节流。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。


一、axios

1、什么是axios

  • Axios 是专注于网络数据请求的库。
  • 相比于原生的 XMLHttpRequest 对象,axios 简单易用
  • 相比于 jQuery,axios 更加轻量化,只专注于网络数据请求。

2、axios发起GET请求

  • axios.get('url', { params: { /*参数*/ } }).then(callback)
  • 例如:
var paramsObj = { name: 'zs', age: 20 }
axios.get(url, { params: paramsObj }).then(function (res) {
	console.log(res.data)
})

3、axios发起POST请求

  • axios.post('url', { /*参数*/ }).then(callback)
  • 例如:
var dataObj = { address: '北京', location: '顺义区' }
axios.post(url, dataObj).then(function (res) {
   console.log(res.data)
})

4、直接使用axios发起请求

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

例如:

var paramsData = { name: '钢铁侠', age: 35 }
axios({
  method: 'GET',
  url: url,
  params: paramsData
}).then(function (res) {
  console.log(res.data)
})
axios({
   method: 'POST',
   url: 'http://www.liulongbin.top:3006/api/post',
   data: {
     name: '娃哈哈',
     age: 18,
     gender: '女'
   }
}).then(function (res) {
   console.log(res.data)
 })

二、跨域与JSONP

1、了解同源策略和跨域

  • 如果两个页面的协议域名端口都相同,则两个页面具有相同的源
  • 例如,下表给出了相对于 http://www.test.com/index.html 页面的同源检测:

axios、跨域与JSONP、防抖和节流

  • 同源策略(英文全称 Same origin policy)是浏览器提供的一个安全功能。
  • MDN 官方给定的概念:同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。
  • 通俗的理解:浏览器规定,A 网站的 JavaScript,不允许和非同源的网站 C 之间,进行资源的交互,例如:

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

  • 同源指的是两个 URL 的协议域名端口一致,反之,则是跨域
  • 出现跨域的根本原因:浏览器的同源策略不允许非同源的 URL 之间进行资源的交互。
  • 浏览器允许发起跨域请求,但是,跨域请求回来的数据,会被浏览器拦截,无法被页面获取到!
  • 现如今,实现跨域数据请求,最主要的两种解决方案,分别是 JSONPCORS
  • JSONP:出现的早,兼容性好(兼容低版本IE)。是前端程序员为了解决跨域问题,被迫想出来的一种临时解决方案。缺点是只支持 GET 请求,不支持 POST 请求。
  • CORS:出现的较晚,它是 W3C 标准,属于跨域 Ajax 请求的根本解决方案支持 GET 和 POST 请求。缺点是不兼容某些低版本的浏览器。

2、JSONP

JSONP (JSON with Padding) 是 JSON 的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题

由于浏览器同源策略的限制,网页中无法通过 Ajax 请求非同源的接口数据。但是 <script> 标签不受浏览器同源策略的影响,可以通过 src 属性,请求非同源的 js 脚本。

因此,JSONP 的实现原理,就是通过 <script> 标签的 src 属性,请求跨域的数据接口,并通过函数调用的形式,接收跨域接口响应回来的数据。

(1)实现一个简单的JSONP

定义一个 success 回调函数:

<script>
   function success(data) {
     console.log('获取到了data数据:')
     console.log(data)
   }
 </script>

通过 <script> 标签,请求接口数据:

<script src="http://ajax.frontend.itheima.net:3006/api/jsonp?callback=success&name=zs&age=20"></script>

(2)JSONP的缺点

由于 JSONP 是通过 <script> 标签的 src 属性,来实现跨域数据获取的,所以,JSONP 只支持 GET 数据请求,不支持 POST 请求。

注意:JSONP 和 Ajax 之间没有任何关系,不能把 JSONP 请求数据的方式叫做 Ajax,因为 JSONP 没有用到 XMLHttpRequest 这个对象。

(3)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',
    success: function(res) {
       console.log(res)
    }
 })

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

(4)自定义参数及回调函数名称

在使用 jQuery 发起 JSONP 请求时,如果想要自定义 JSONP 的参数以及回调函数名称,可以通过如下两个参数来指定:

 $.ajax({
    url: 'http://ajax.frontend.itheima.net:3006/api/jsonp?name=zs&age=20',
    dataType: 'jsonp',
    // 发送到服务端的参数名称,默认值为 callback
    jsonp: 'callback',
    // 自定义的回调函数名称,默认值为 jQueryxxx 格式
    jsonpCallback: 'abc',
    success: function(res) {
       console.log(res)
    }
 })

(5)jQuery中JSONP的实现过程

jQuery 中的 JSONP,也是通过 <script> 标签的 src 属性实现跨域数据访问的,只不过,jQuery 采用的是动态创建和移除 <script> 标签的方式,来发起 JSONP 数据请求。

在发起 JSONP 请求的时候动态向 <header>append 一个 <script> 标签;

在 JSONP 请求成功以后动态从 <header>移除刚才 append 进去的 <script> 标签;

三、案例:淘宝搜索

1、UI效果

axios、跨域与JSONP、防抖和节流

2、获取用户输入的搜索关键词

// 监听文本框的 keyup 事件
 $('#ipt').on('keyup', function() {
   // 获取用户输入的内容
   var keywords = $(this).val().trim()
   // 判断用户输入的内容是否为空
   if (keywords.length <= 0) {
     return
   }

   // TODO:获取搜索建议列表
 })

3、封装getSuggestList函数

function getSuggestList(kw) {
   $.ajax({
      // 指定请求的 URL 地址,其中,q 是用户输入的关键字
      url: 'https://suggest.taobao.com/sug?q=' + kw,
      // 指定要发起的是 JSONP 请求
      dataType: 'jsonp',
      // 成功的回调函数
      success: function(res) { console.log(res) }
   })
 }

4、渲染建议列表的UI结构

(1)定义搜索建议列表

<div class="box">
    <!-- tab 栏区域 -->
    <div class="tabs"></div>
    <!-- 搜索区域 -->
    <div class="search-box"></div>

    <!-- 搜索建议列表 -->
    <div id="suggest-list"></div>
 </div>

(2)定义模板结构

 <!-- 模板结构 -->
 <script type="text/html" id="tpl-suggestList">
    {{each result}}
       <div class="suggest-item">{{$value[0]}}</div>
    {{/each}}
 </script>

(3) 定义渲染模板结构的函数

 // 渲染建议列表
 function renderSuggestList(res) {
    // 如果没有需要渲染的数据,则直接 return
    if (res.result.length <= 0) {
       return $('#suggest-list').empty().hide()
    }
    // 渲染模板结构
    var htmlStr = template('tpl-suggestList', res)
    $('#suggest-list').html(htmlStr).show()
 }

(4)搜索关键词为空时隐藏搜索建议列表

 $('#ipt').on('keyup', function() {
    // 获取用户输入的内容
    var keywords = $(this).val().trim()
    // 判断用户输入的内容是否为空
    if (keywords.length <= 0) {
       // 如果关键词为空,则清空后隐藏搜索建议列表
       return $('#suggest-list').empty().hide()
    }
    getSuggestList(keywords)
 })

5、输入框防抖

防抖策略(debounce)是当事件被触发后,延迟 n 秒后再执行回调,如果在这 n 秒内事件又被触发,则重新计时

  • 防抖动的 timer定义
 var timer = null                    
  • 定义防抖的函数
 function debounceSearch(keywords) { 
 
    timer = setTimeout(function() {
	    // 发起 JSONP 请求
	    getSuggestList(keywords)
    }, 500)
    
 }
  • 在触发 keyup 事件时,立即清空 timer
 $('#ipt').on('keyup', function() {  
 
    clearTimeout(timer)
   
    // ...省略其他代码
    debounceSearch(keywords)
 })

6、缓存搜索的建议列表

  • 定义全局缓存对象
var cacheObj = {}
  • 将搜索结果保存到缓存对象中
 // 渲染建议列表
 function renderSuggestList(res) {
    // ...省略其他代码

    // 将搜索的结果,添加到缓存对象中
    var k = $('#ipt').val().trim()
    cacheObj[k] = res
 }
  • 优先从缓存中获取搜索建议
 // 监听文本框的 keyup 事件
 $('#ipt').on('keyup', function() {
    // ...省略其他代码

    // 优先从缓存中获取搜索建议
    if (cacheObj[keywords]) {
       return renderSuggestList(cacheObj[keywords])
    }

    // 获取搜索建议列表
    debounceSearch(keywords)
  })

四、防抖和节流

1、防抖

见标题三(案例:淘宝搜索)下的输入框防抖

2、节流

(1)概念

节流策略(throttle),顾名思义,可以减少一段时间内事件的触发频率

(2)节流案例 – 鼠标跟随效果

  • 1、渲染UI结构并美化样式
<!-- UI 结构 -->
<img src="./assets/angel.gif" alt="" id="angel" />
/* CSS 样式 */
html, body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}
#angel {
  position: absolute;
}
  • 2、不使用节流时实现鼠标跟随效果
$(function() {
   // 获取图片元素
   var angel = $('#angel')
   // 监听文档的 mousemove 事件
   $(document).on('mousemove', function(e) {
      // 设置图片的位置
      $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
   })
})
  • 3、节流阀的概念

节流阀为空,表示可以执行下次操作;不为空,表示不能执行下次操作。

当前操作执行完,必须将节流阀重置为空表示可以执行下次操作了。

每次执行操作前,必须先判断节流阀是否为空文章来源地址https://www.toymoban.com/news/detail-474364.html

  • 4、使用节流优化鼠标跟随效果
$(function() {
  var angel = $('#angel')
  var timer = null 
  // 1.预定义一个 timer 节流阀
  $(document).on('mousemove', function(e) {
    // 3.判断节流阀是否为空,如果不为空,则证明距离上次执行间隔不足16毫秒
    if (timer) { return } 
    timer = setTimeout(function() {
      $(angel).css('left', e.pageX + 'px').css('top', e.pageY + 'px')
      // 2.当设置了鼠标跟随效果后,清空 timer 节流阀,方便下次开启延时器
      timer = null 
    }, 16)
  })
})

3、防抖和节流的区别

  • 防抖:如果事件被频繁触发,防抖能保证只有最后一次触发生效!前面 N 多次的触发都会被忽略!
  • 节流:如果事件被频繁触发,节流能够减少事件触发的频率,因此,节流是有选择性地执行一部分事件!

到了这里,关于axios、跨域与JSONP、防抖和节流的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小程序如何使用防抖和节流?

    防抖(Debounce)和节流(Throttle)都是用来优化函数执行频率的技术,特别在处理用户输入、滚动等频繁触发的情况下,它们可以有效减少函数的执行次数,从而提升性能和用户体验。但它们的工作方式和应用场景有所不同。 防抖的主要思想是,当持续触发事件时,在事件最

    2024年02月13日
    浏览(37)
  • Vue - 使用Lodash实现防抖和节流

    GitHub Demo 地址 在线预览 Lodash 官网 更新:对应的vue3版的demo如下: GitHub Demo 地址 在线预览 参考: Vue 防抖节流 详细介绍 vue 优雅的实现防抖和节流 防抖、节流的介绍 js防抖和节流的实现原理及应用场景 js防抖节流应用场景及写法 JS中的防抖 函数节流(throttle)与 函数防抖(

    2024年02月01日
    浏览(48)
  • 防抖和节流 含义及区别图文详解秒懂

    防抖和节流都是为解决短时间内频繁触发某个功能函数而导致的性能问题。比如,触发频率过高而导致响应速度跟不上,以致出现延迟,假死或卡顿的现象。  图解:一件事情,计划5s以后触发,结果中途意外触发了,那么就重新从0开始5秒的计时,这就导致本身计划的事情就

    2024年02月06日
    浏览(37)
  • 【js】防抖和节流的使用场景和区别:

    一、防抖 (多次触发 只执行最后一次) 作用: 高频率触发的事件,在指定的单位时间内,只响应最后一次,如果在指定的时间内再次触发,则重新计算时间 防抖类似于英雄联盟回城6秒,如果回城中被打断,再次回城需要再等6秒 二、节流 (规定时间内 只触发一次) 作用:

    2024年02月10日
    浏览(39)
  • JS手写防抖和节流函数(超详细版整理)

    防抖(debounce) :每次触发定时器后,取消上一个定时器,然后重新触发定时器。防抖 一般用于用户未知行为的优化 ,比如搜索框输入弹窗提示,因为用户接下来要输入的内容都是未知的,所以每次用户输入就弹窗是没有意义的,需要等到用户输入完毕后再进行弹窗提示。

    2024年02月04日
    浏览(37)
  • 了解防抖和节流:提升前端交互体验的实用策略

    本文将重点介绍前端性能优化方法之一的防抖和节流。首先解释了它们的概念和原理,然后探讨了它们在前端开发中的应用场景,如输入框搜索、滚动事件等。最后,通过简单的代码示例展示了如何实现防抖和节流函数。通过学习和应用这两种技术,我们可以有效地减少不必

    2024年02月05日
    浏览(40)
  • 前端性能优化的利器 ——— 浅谈JavaScript中的防抖和节流

    防抖和节流函数是工作中两种常用的前端性能优化函数,今天我就来总结一下什么是防抖和节流,并详细说明一下如何在工作中应用防抖和节流函数 在 JavaScript 中,防抖(debounce)和节流(throttle)是用来限制函数执行频率的两种常见技术。 防抖(debounce) 是指在某个时间段

    2024年02月14日
    浏览(51)
  • javascript常见100问|前端基础知识|问ajax-fetch-axios-区别请用 XMLHttpRequestfetch 实现 ajax节流和防抖px em rem vw/箭头函数的缺点

    HTML CSS JS HTTP 等基础知识是前端面试的第一步,基础知识不过关将直接被拒。本章将通过多个面试题,讲解前端常考的基础知识面试题,同时复习一些重要的知识点。 扎实的前端基础知识,是作为前端工程师的根本。基础知识能保证最基本的使用,即招聘进来能干活,能产出

    2024年04月27日
    浏览(51)
  • Axios跨域请求处理

    问题背景: vue 项目用 axios 进行请求的时候,总是报“Access to XMLHttpRequest at ‘http://localhost:8889/api/login’ from origin ‘http://localhost:8080……’”的错误 实际上就是前后端分离的情况下,发生了跨域的问题 跨域定义: 解决方案:vue-cli转发+SpringBoot后端配置 本次问题用到了vue-c

    2024年02月12日
    浏览(41)
  • axios解决跨域问题

    Vue3中使用axios访问聚合的天气API,出现跨域问题,需要在前端进行一些配置: 首先是修改vue.config.js: 这里有两个地方要注意: 1. proxy:{...}必须写在devServer对应的配置对象中。如果书写位置不对,编译时会报错: ERR: Invalid options in vue.config.js: \\\'proxy\\\' is not allowed 2. 注意替换的规

    2024年02月08日
    浏览(39)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包