終於,幫開發寫了一個bug

寫在文章的開頭

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

bug的由來

在項目里我們使用的是Iview組件庫的Upload組件，這個組件可以設置一個回調函數用於在文件上傳成功后做一些處理

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 res = API.signScreenShot(params)
    const { status, data, msg } = res
    if (status !== 1000) {
      this.$message(msg)
    }
  }
}

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

報錯顯示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代碼盡量避免變量名重復，不然未知的坑不少，多多小心！
開發到測試一人完成，心里也是美滋滋，學到不少，感謝前端同學，感謝自己，感謝你們就點個贊點個關注哇，哈哈！！

歡迎大家去 我的博客測試軒 和公眾號：測試軒，瞅瞅，里面有更多關於測試實戰的內容哦！！