axios的请求方式以及防抖和节流

743 阅读3分钟

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

ajax的请求方式

其实从本质意义上来讲,请求的方式之间是没有任何区别的,只是应用不同,不管哪一种方式都可以向服务器传递数据

  1. GET:一般应用于从服务器获取数据(给服务器的数据少,从服务器拿的数据多),一般使用URL后加问号传参的方式向服务器传递内容
  2. POST:一般应用于向服务器推送数据(给服务器的多,从服务器拿下来的少),一般使用请求主体的方式向服务器传递内容
  3. PUT:一般应用于给服务器上增加资源文件(上传图片功能),向服务器传输内容方式与POST一致
  4. DELETE:一般应用于从服务器上删除资源文件,向服务器传输内容方式与get一致
  5. HEAD:一般应用于只获取服务器的响应头信息,向服务器传输内容方式与get一致

axios

axios是第三方库,为我们封装了非常好用的请求方法,我么可以直接使用里面的 axios().then()来发送和处理数据,不用操作XMLHttpRequest对象了(它的底层还是操作xhr)

axios的get请求

GET参数的本质就是把参数用 & 符号链接起来放到路径的最末尾用 ?分隔。

axios的GET请求

axios({
      method'请求的类型',
      url'请求的URL地址',
      params: {id: 1, bookname: '红楼梦'} // params用于传递参数,可选
}).then((result) => {
      // .then 用来指定请求成功之后的回调函数
      // 形参中的 result 是请求成功之后的结果
})

axios的POST请求

axios({
      method'请求的类型',
      url'请求的URL地址',
      data: {id: 1, bookname: '红楼梦'} // data用于传递JSON类型的字符串,axios会自动将data的值(对象类型)转换成JSON类型的字符串
}).then((response) => {
      // .then 用来指定请求成功之后的回调函数
      // 形参中的 response 是请求成功之后的结果
})

防抖和节流

防抖

防抖是在一段时间内频发触发某个操作,只执行最后一次

作用:可以减少服务器的压力

比如在1s内,我多次点击button按钮,每当我点击,就重新计时1s,直到我最后一次点击,然后过1s执行这个操作

以英雄联盟举例:比如玩英雄联盟,防抖就相当于回城,回城期间不能动,如果动了就得重新计时回城

节流

节流是在一段时间内,只执行第一次代码

作用:也是减少服务器的压力

比如在1s内,我点击button按钮,只执行我第一次点击,等过了1s后我在点击才有效

以英雄联盟举例:相当于英雄联盟的英雄技能冷却,当我们使用一次技能必须等对应的冷却时间后才能继续用