Vue stepping on the pit: axios uses this pointer

Preface

In Vue, there are three types of modules that request back-end interfaces:

  • view-resource
  • axios
  • fetch

Here we use axios to request the back-end interface.

installation

Enter the directory of the vue project and execute:

npm install axios --save

use

The http request methods supported by axios are as follows

  • axios.request(config)
  • axios.get(url[, config])
  • axios.delete(url[, config])
  • axios.head(url[, config])
  • axios.options(url[, config])
  • axios.post(url[, data[, config]])
  • axios.put(url[, data[, config]])
  • axios.patch(url[, data[, config]])

This article does not focus on the use of axios. Here we take get as an example. When using the axios receiving interface to return, you need to use the arrow => symbol to get the correct this pointer.

 this.$axios
      .get("/userInfo")
      .then(
        (response) =>
          // handle success          (this.userdata = response.data)      )
      .catch(function (error) {        // handle error        console.log(error);
      })
      .then(function () {        // always executed
      });

If you don't want to use an arrow function, you can use a variable to get the this pointer externally, but it is recommended to use the above writing.

 .$axios
      .get("/userInfo")
      .then(
        function(response){
                )
      .( (error) {                console.log(error);
      })
      .then( () {        
      });

 

Blogger: Test to make money

Motto: Focus on testing and automation, and strive to improve the efficiency of research and development; through testing and diligence to complete the original accumulation, through reading and financial management to financial freedom.

csdn:https://blog.csdn.net/ccgshigao

Blog Park: https://www.cnblogs.com/qa-freeroad/

51cto :https://blog.51cto.com/14900374

 


Guess you like

Origin blog.51cto.com/14900374/2546900