Write it at the beginning of the article

Project is tight recently, especially the front end demand is more, as a test, also some of the vue, in line with the speed up the project schedule better idea, just volunteered to team leader carries on the part of the development task, one needs to be in our advertising management background add a function to upload pictures, need to be uploaded to the seven NiuYun, The address of the image is then passed to the server.

The origin of the bug

In this project, we use the Upload component of the Iview library, which can set a callback function to do something after the file has been successfully uploaded

The on-success attribute can be used to specify the successful upload callback function. I wrote the logic for uploading the image to the server in this callback function:

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)
    }
  }
}
Copy the code

Everything seems to be ok, I just want to see if the function is working, upload a picture, but it is wrong

Error display key property is undefined, Chrome located the error line is

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

This annoyed me, and my first thought was, “Why should I enter if code with undefined when the first if statement already determines that key exists?” A face of meng FORCE I in if before and after all agreed to log, more a face of meng force, actually really in front of if is some, into if is undefined, this is obviously out of my JS cognitive scope, can only find the front end of the students.

The moment of exploitation and abuse

Front-end students took a look at the code, wrong ah this, you below how and define:

const res = API.signScreenShot(params)
Copy the code

Your variable has improved, ？？？？？？？ Why do you have so many question marks and I walked away.

Js variable promotion

  • What is ascension

Declared variables are moved to the top of their scope, a process known as promotion

  • Es6 local scope

In ES6, {} is defined as a block-level scope, where const variables are defined, and the definition is promoted to the top of the block. Js is compiled before it executes, and when it’s compiled it pushes the definition of the variable to the top of the scope, where the const res appears in the code I wrote above

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)
    }
  }
Copy the code

}}}}}}}}}}}}}}}}}}}}}}}}}}}}}

repair

Change the name of the variable behind, it is very simple, what is difficult,!!

const result = API.signScreenShot(params)
Copy the code

conclusion

Finally the bug was fixed, write JS code to avoid variable name repetition, otherwise unknown pit a lot, a lot of care! Development to test a person to complete, the in the mind is also deliciously, learned a lot, thanks to the front end of the students, thank yourself, thank you to point a like point attention wow, ha ha!!

Welcome to my blog and public account: test room check out, there are more about the actual test content oh!!