Detailed description of asynchronous cross-origin requests of Vuejs2.0, detailed description of vuejs2.0 asynchronous

Detailed description of asynchronous cross-origin requests of Vuejs2.0, detailed description of vuejs2.0 asynchronous

Vuejs was updated from 1.0 to 2.0. The official HTTP request also changed from Vue-Resoure to axios. Next, we will simply use axios for asynchronous requests. (By default, readers of this Article can use npm commands, ES6, and so on ...)

First, install the Vue-Cli development template (this template can quickly generate the running configuration environment of vuejs, so that new users can quickly avoid configuration and build a running interface). Here I use the cnpm command, please configure your own Baidu.

Open the command window:

cnpm install -g vue-cli

Wait for a moment to complete the installation.

Create a Vuejs Project

vue init webpack axiosproject

Switch to the project directory and run the following command:

cnpm install axios --save --dev

Finally, execute the command to install the dependencies required by the project:

cnpm install

Wait a moment. Run the following command to run the project created using Vue-Cli:

cnpm run dev

The automatic browser automatically pops up this interface, indicating that the above steps have been successfully implemented.

Next, I will start to use the editor to use axios. Open VS Code (Editor, please use your favorite, I am soft powder, so the first choice of VS Code), let's modify the main. js entry file

import Vue from 'vue'import App from './App'import axios from 'axios'Vue.prototype.$http = axios;/* eslint-disable no-new */new Vue({ el: '#app', template: '<App/>', components: { App }})

We reference axios and then clone the axios object to the $ http attribute of Vue. Later, we can use axios in other components for asynchronous requests. The final result is to print the request data to the browser console. The interface I use is simulated locally, but the difference is not big. For cross-origin, configure the returned request header in asp. core. For other backend configurations, see;

This is the result returned by the Get interface in the browser:

Okay. Next we will write some scripts in the Hello. vue component.

<script>export default { name: 'hello', data () { return {  msg: 'Welcome to Your Vue.js App' } }, created:function(){ this.HelloAxios(); }, methods:{ HelloAxios(){  this.$http.get('http://localhost:54903/api/values').then(m=>console.log(m.data)); } }}</script>

Now we have completed the Get request. Next, we have completed the Post request.

<script>export default { name: 'hello', data () { return {  msg: 'Welcome to Your Vue.js App' } }, created:function(){ this.HelloAxios(); this.HelloAxiosPost('HelloAxiosPost'); }, methods:{ HelloAxios(){  this.$http.get('http://localhost:54903/api/values').then(m=>console.log(m.data)); }, HelloAxiosPost(val){  let str = 'value='+val  this.$http.post('http://localhost:54903/api/values',str).then(m=>console.log(m.data)); } }}</script>

The value 'helloaxiospost' is also printed. Someone may ask

 

What should I ask here? This is the official document.

It cannot be written in this way. If you are interested, you can test it on your own. Let's talk about why the string

Check chorme F12 and check the network request. The request value is Form Data. In this way, we can splice the parameter request. The format of multiple parameters is param1 = value1 & param2 = value2.

Now, this article is over. I hope it will be helpful to everyone's learning, and I hope you can provide more support to the customer's house.