終於,幫開發寫了一個bug

測試軒發表於2020-05-19

寫在文章的開頭

最近專案比較緊，尤其前端的的需求比較多，作為一名測試，也會些vue，本著加快專案進度的美好想法，就自告奮勇的向組長承接了一部分開發的任務，其中有個需求需要在我們的廣告管理後臺新增一個上傳圖片的功能，需要先上傳到七牛雲，然後在將圖片的地址傳給服務端。

bug的由來

在專案裡我們使用的是Iview元件庫的Upload元件，這個元件可以設定一個回撥函式用於在檔案上傳成功後做一些處理

image-20200518194057876

on-success屬性可以用於指定上傳成功後的回撥函式，我就把圖片上傳到服務端的邏輯寫在了這個回撥函式中：

handleSuccess(userId, res) {
  if (res.key) {
    let img
    if (SERVER_ENV === 'local' || SERVER_ENV === 'development') {
      img = `https://t-xxxx/${res.key}`
    } else {
      img = `https://xxxxx/${res.key}`
    }
    const params = {
      'id': userId,
      'sign_screenshot': img
    }
    const result = API.signScreenShot(params)
    const { status, data, msg } = result
    if (status !== 1000) {
      this.$message(msg)
    }
  }
}

看起來一切都還好，我就想看看功能好使不，上傳了一張圖片，可是確報錯了

image-20200518194603860

報錯顯示key這個屬性是undefined，chrome定位到的錯誤程式碼行是

img = `https://t-xxxx/${res.key}`

這就讓我很不痛快，我的第一反應就是，明明第一個if語句已經判斷了key是存在，為什麼進入if程式碼裡確提示undefined，這不科學啊！一臉懵逼的我在if的前前後後都答應了日誌，就更加的一臉懵逼了，居然真的在if前面是有的，進入if後就是undefined，這很明顯已經脫離我的js認知範圍了，就只能找前端同學了。

被開發虐的那一瞬間

前端同學拿過程式碼一看，不對呀這，你下面咋又定義了：

const res = API.signScreenShot(params)

你這變數提升了哇，，？？？？？？？，，小朋友你為什麼這麼多問號，然後我就走開了。

js的變數提升

  • 什麼是提升呢

宣告變數都會被移動到各自作用域的最頂端,這個過程被稱為提升

  • es6的區域性作用域

在ES6中，{}會被定義為一個塊級作用域，在這個塊級作用域內，使用const定義變數，那麼定義就會被提升到塊的最頂端。js在執行之前會先進行編譯，編譯完就會把變數的定義提升到作用域的頂部，上面我寫的程式碼，const res就會出現在這裡

if (res.key) {
		const res
    let img
    if (SERVER_ENV === 'local' || SERVER_ENV === 'development') {
      img = `https://t-xxxx/${res.key}`
    } else {
      img = `https://xxxxx/${res.key}`
    }
    const params = {
      'id': userId,
      'sign_screenshot': img
    }
    res = API.signScreenShot(params)
    const { status, data, msg } = res
    if (status !== 1000) {
      this.$message(msg)
    }
  }

所以才會出現上面的報錯，在塊裡，我只宣告瞭，但是沒有複製這個時候，就去使用了，肯定會報undefined。

修復

改一下後面的變數名，，很簡單麼，，有啥難的麼，，！！

const result = API.signScreenShot(params)

總結

終於bug被修復了，寫js程式碼儘量避免變數名重複，不然未知的坑不少，多多小心！
開發到測試一人完成，心裡也是美滋滋，學到不少，感謝前端同學，感謝自己，感謝你們就點個贊點個關注哇，哈哈！！

歡迎大家去 我的部落格 瞅瞅，裡面有更多關於測試實戰的內容哦！！

相關文章