Vuejs2.0 asynchronous cross-domain request

The Vuejs was updated from 1.0 to version 2.0. HTTP request official also from the recommended use vue-resoure changed to Axios. Next, we'll simply use Axios to make an asynchronous request. (Read the author's default reader with the ability to use NPM commands, as well as the ability to have ES6, and so on ...). ）

First, we install the VUE-CLI development template (this template can be quickly generated Vuejs run configuration environment, can make the novice quickly exempt configuration build run interface), here I use the CNPM command

To open a command window:

cnpm install -g vue-cli

Wait a few moments for the installation to complete.

Then create a new Vuejs project

vue init webpack axiosproject

Switch to the project directory and execute the command:

cnpm install axios --save --dev

Final execution of the command to install the project depends on:

cnpm install

Wait a moment, and you're done. Now, let's run. Projects built with VUE-CLI, execute commands:

CNPM Run Dev

Automatic browser Popup This interface to illustrate the above steps we have successfully implemented.

Then I came to really start using Axios with the editor. Open vs Code (editor please use your own favorite, I soft powder, so preferred vs code), let's transform the Main.js portal 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 refer to Axios and then clone the Axios object to the $http property of Vue, and later we can use Axios in other components to make asynchronous requests. Not much to say, the end result is to print the requested data to the browser console even if it succeeds. The interface I'm using is simulated locally, but it's not a big difference. Here is a special note about cross-domain, cross-domain needs to configure the return of the request header, in Asp.core do the following, other backend configuration can be referenced;

This is the Get interface that returns the results in the browser:

Okay, so we'll 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 that we have finished the GET request, we complete 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>

As a result, the value we passed in ' Helloaxiospost ' also printed out. One might ask

Here's what we're going to say, and the official document says so.

You can't do that with your own test. Interested friends can test on their own. So let's talk about why it's the string.

View Chorme F12 Look at the network request and find that the value we requested is form Data. This allows us to stitch the parameter request, and the multi-parameter format is param1=value1&param2=value2.

Well, this article is over (the first article, I hope you have a lot of support, mouth mercy, please ignore the birds. )

Vuejs2.0 asynchronous cross-domain request