Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of how to achieve asynchronous communication in Vue Axios, the content is detailed and easy to understand, the operation is simple and fast, and it has a certain reference value. I believe you will gain something after reading this article on how to realize asynchronous communication in Vue Axios. Let's take a look at it.

1. What is Axios?

Axios is an open source asynchronous communication framework that can be used in browsers and Node JS. Its main role is to implement AJAX asynchronous communication. Its features are as follows:

Create a XMLHttpRequests from a browser

Create a http request from node.js

Support for Promise API [chain programming in JS]

Intercept requests and responses

Convert request data and response data

Cancel the request

Automatic conversion of JSON data

The client supports defense against XSRF (cross-site request forgery)

2. Why use Axios

Because Vue.js is a view layer framework and the author (you Yuxi) strictly adheres to SoC (the principle of separation of concerns), Vue.js does not include the communication function of AJAX. In order to solve the communication problem, the author developed a plug-in called vue-resource, but stopped the maintenance of the plug-in and recommended the Axios framework after entering version 2.0. Use less jQuery because it manipulates Doms too often!

3. The first Axios application

Most of the interfaces we developed are in JSON format. You can first simulate a piece of JSON data in the project. The data content is as follows: create a file named data.json, fill in the above contents, and put it in the root directory of the project.

{"name": "crazy god says Java", "url": "https://blog.kuangstudy.com"," page ": 1," isNonProfit ": true," address ": {" street ":" light gate "," city ":" Xi'an, Shaanxi "," country ":" China "}," links ": [{" name ":" bilibili " "url": "https://space.bilibili.com/95256449"}, {" name ":" Java "," url ":" https://blog.kuangstudy.com"}, {"name": "Baidu", "url": "https://www.baidu.com/"}]}

Test code

Title [v-cloak] {display: none } place name: {{info.name}} address: {{info.address.country}}-- {{info.address.city}}-- {{info.address.street}} Link: {{info.url}} var vm = new Vue ({el: "# vue") / / data: attribute: vm data () {return {info: {name:null, address: {country:null, city:null, street:null} Url:null}, mounted () {/ / hook function axios. Get ('data.json'). Then (response= > (this.info=response.data)) })

Description:

1. Here, v-bind is used to bind the property values of a:href to the data in the Vue instance

two。 Using the get method of the axios framework to request AJAX and automatically encapsulate the data in the data object of the Vue instance, we are in data

3. The data structure must match the format of the data returned by Ajax!

4. The life cycle of Vue

Vue instances have a complete lifecycle, that is, a series of processes, such as creating virgin data, compiling templates, mounting DOM, rendering, updating, unloading, and so on. We call this the lifecycle of Vue. In popular terms, the process from creation to destruction of Vue instances is the life cycle.

Throughout the life cycle of Vue, it provides a series of events that allow us to register JS methods when events are triggered, and to control the overall situation with our own registered JS methods. The this in these event response methods points directly to the instance of Vue.

This is the end of the article on "how to achieve asynchronous communication in Vue Axios". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve asynchronous communication in Vue Axios". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.