Vue plug-in vue-resource usage notes (Summary), vuevue-resource

Vue plug-in vue-resource usage notes (Summary), vuevue-resource

Recently, I have a small project on hand. I plan to use vue to train my hands and use vue plug-in: vue-resource. The following are some of my experiences using this plug-in. I am writing a note for myself. I hope that my friends who have encountered the same pitfalls can step on it ~

Before using this plug-in, install the plug-in first:

npm i vue-resource --save

After the read entries are installed, introduce the following content to the project:

import VueResource from 'vue-resource'Vue.use(VueResource);

As described above, introduce vue-resource in the entry file. Then we use it. Use of vue-resource and $. the ajax method is similar. Of course, the official website also provides a series of interfaces for your friends to use. Do not repeat them here. If you are interested, please move:

Git transfer: https://github.com/pagekit/vue-resource/blob/master/README.md

The specific usage methods are described in detail.

Finally, it is a pitfall that I have encountered! (If you are not happy with the process, you can read the code and jump to the end of the article to see the conclusion .)

<script> export default {  name: 'app',  data () {   return {    articles: []   }  },  created: function() {   this.$http.get('/api/user/order/list',     {       productType:"1",       pageNum:1,       pageLimit:8     },     {      headers:{      },      emulateJSON: true     }   ).then((response) => {    this.articles = response.data.data.list;   }).catch(function(response) {    console.log(response)   });  } }</script>

This is the initial code. After packaging and running, I found an error in the console saying that list is not defined! WTF! For this reason, I went to the background to check the interface call and found that the parameters passed during the interface call did not pass the parameters successfully. Then I went to the Internet to search for information, you can modify the parameter passing Method to the following format:

{ params: {  productType:"1",  pageNum:1,  pageLimit:8 }}

Different from the previous parameter passing method, this time I added the parameter to an object named params. After packaging it again, I uploaded it and found that the interface was successfully called!

Here, I want to explain params. params indicates that multiple variable parameters can be uploaded. I am not very clear about the addition of variable parameters, if you see it, please kindly advise OTZ.

OK. Now that the interface is successfully called, the data can be obtained as expected. However, the page is still blank, And I glanced at the console, the console reported an error saying that the list is not defined. WTF! For this reason, I carefully read the data structure of the interface and found that the assignment is correct, but the error is not defined. So we have the following conjecture:

Idea 1: response Data returns an error

In response to this idea, I console the response and found that the response returned normally. This idea was terminated.

Thought 2: since there is no problem with response returned, is the problem with data?

In response to this idea, I console response. data and found that response. data returns normally, and the returned data is exactly the data in my interface!

After verifying these two ideas, I am confused. Since there is no problem with data, why can't I get internal data? With this problem, I went to GOOGLE and found that the response returned by the GET method of vue-resource is not only a simple data, but a series of data including the request header information and data, vue-response also provides the method to extract data: response. json (). I feel like I can't wait to try this method to get the data, and the result is still not available.

Idea 3: Since response. json () cannot be obtained, other methods should be available.

For this reason, I also referred to the relevant documentation and found that there is indeed another method: response. body. data! Forgive me!

However... Still failed. Many attempts were fruitless and slightly irritating. At this time, my colleague asked me a question, that is, the interface data could not be obtained, but it was just $. the ajax method was later found to be the problem of undefined dataType: JSON. Let's talk about it! In the beginning, is the data returned not in JSON format, but in string format? Therefore, I added a layer of JSON. parse in addition to the method for obtaining data at the beginning:

this.articles = JSON.parse(response.data).data.list;

Looking forward to the console, I finally got the data.

Conclusion: when using vue-resource, you need to check whether the final data obtained is in JSON format. If not, you need to format the data in JSON format. If vue-resource has an entry for setting dataType, I am not familiar with it yet. I will be sure to inform you if I find it later. If you can see it, I hope you can give it to OTZ ~

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.