初学vue.js记录(三)

前言

这次记录主要是日常开发时遇到的一些问题。

正文

• 如何较为正确的书写axios请求
  在上一篇文章中，我简单的使用了一下axios。在工做中，由于我是刚入职的缘故，我并无负责写axios API的这些东西，可是我对这些内容仍是挺感兴趣的，因此学习了一下前辈们的书写格式。
  要我本身写的话，确定是下面这样：

  axios({
      method:'get',
      url:'/static/music.json'
  }).then((data)=>{
      console.log(data)
  })

  无他，在以前的开发中，用jquery的ajax习惯了...

  $.ajax({
      method:'get',
      url:'/static/music.json',
      success:function(data){
          console.log(data)
      }
  })

  这样看来，jquery和axios仍是挺像的，不过jquery处理结果是和请求的配置等在一个对象里面，而axios是使用then函数，顾名思义，then->而后，在请求异步操做完成后再执行。下面是前辈们的写法：

  getMusicInfo:function(reqData){
      return new Promise(function(resolve,reject){
          axios({
              method:'get',
              url:'/static/music.json',
              data:{},
          }).then((data)=>{
              if(data.status==200){
                  resolve(data.data.music)
              }else{
                  reject(data)
              }
          })
      })
  }

  若是请求成功，返回的data里面的状态码为200
  这些东西都是写在API文件夹里面的，初看的时候我不明白为何要new一个promise对象。在发送请求的地方和api函数所在的做用域是不同的，axios.then的结果在发送请求的位置是获取不到的，虽然若是把axios写在发送请求的页面，能够在then里面赋值给this里面的数据，但又怎么把它独立出来封装呢。因此给请求返回一个promise对象，而后再请求的位置，链式的使用then方法，就能够获取获得数据。这样写，确实比我本身写的更加实用~

• 给axios设置拦截器
  拦截器能够在请求发送以前或者响应被then或者catch以前拦截并处理他们。具体的用处固然要看实际的需求咯。

  var myInterceptor=axios.interceptors.request.use(function(config){
      console.log('发送了一个请求')
      return config;
  },function(error){
      console.log(error)
  })

  拦截器的设置仍是很方便的。此处要注意，return config是必需要写的，刚开始我觉得没什么用处，就没写，结果报了个不知道为何的错误：
  

  还有另一点，拦截器设置了却不移除的话，每次发生请求都会建立一次拦截器，就像这样：
  

  因此，若是没有特殊需求的话，在设置过拦截器以后仍是要注意移除的：

  axios.interceptors.request.eject(myInterceptor)

• 边框设置过小，移动端没法显示
  在作项目时，有遇到这么一个问题，给元素1px的白色边框。当时是使用rem换算的1px，在chrome模拟的手机端仍是勉强能显示的，可是在本身手机上测试的时候却根本没有显示，应该是不一样手机对单位值的解析不一样，实际上1px换算的rem值可能没有1px，致使边框过小，没法显示。这时候就不用一直使用rem了，而直接使用1px。

• 隐藏滚动条
  溢出的内容通常就设置隐藏或者滚动。可是有时想要滚动却又不想要滚动条，怎么办呢？有这么一种办法：

  ::webkit-scrollbar{
      display:none;
  }

  在网上搜了很久，才看到这么一个功能。能够把滚动条也看作一个元素，经过display控制，不过貌似只有webkit内核的浏览器才支持这个效果，要兼容其余浏览器的话也许只能经过插件来完成了吧~

• 带样式的进度条
  有时候要有进度条的效果，同时要有自定义的样式，就像这样：
  

  由于带样式的部分要跟随长度变化，因此不可能截恰好那么长的一段图，固然你能够截一张100%宽度的图片，可是这样确定很占空间。这时候只须要截取一小段：
  

  就ok了，而后设置背景图片平铺，只须要设置容器的宽度就能达到目的。截取的这一小段要能表明样式的一个周期，平铺出来的样式才正常。

• 移动端触摸事件
  以前有写一个轮播的效果，原本想像以前写pc端的思路来写，可是后来发现，事件有些不同，由于移动端有特殊的样式：touch。经常使用的touch事件有3个：touchstart手指放上屏幕、touchmove手指在屏幕上移动、touchend手指离开屏幕。移动端在滚动内容的时候会自带一个惯性运动的效果，我我的认为是不太好控制的，因此写轮播啊，滚动选择啊啥的的时候，利用touch的事件，经过改变margin，或者定位，或者2d的transform来实现比较好。

结尾

最后告诉你们一个很牛逼的插件：three.js，顾名思义，就是用js实现的3d效果。由于刚才知道，因此本人也不会写[捂脸]你们能够自行搜索，点下面这个连接进去看看就知道是什么效果了~
https://threejs.org/examples/...