初學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/...