Vue2 Project uses Axios to send requests

Source: Internet
Author: User
Tags nginx server

In Vue1.0, there is an officially recommended Ajax plugin Vue-resource, but since Vue has been updated to 2.0, the official is no longer updating Vue-resource.

Currently the main Vue project, all choose Axios to complete the AJAX request, the following to specifically explain the use of Axios.

Installing Axios in the project

CNPM Install Axios-s

Each component that needs to be requested needs to be introduced into the Axios, and if it is troublesome, it can be axios rewritten as the prototype property of Vue, and when used, it does not need to be referenced by each component.

To rewrite Axios into Vue's prototype properties

1. Introduction of Axios in Main.js

Import Axios from ' Axios '

2. The prototype attribute of Vue is written

Vue.prototype. $http = Axios

After adding these two lines of code in Main.js, you can use Axios directly in the component.

How to use

this. $http. Post (Url,params). Then (function (response) {
Request succeeded
}). catch (function (error) {
Request failed

Practical application

Suppose the interface we need to request is:

If it is a development environment, the interface we request needs to be configured if there are cross-domain issues

There is a parameter called proxytable in the index.js in the VUE-CLI config file.

When configuring Proxytable, the local virtual server will receive your request and send it on your behalf, so there will be no cross-domain issues, of course, this applies only to the development environment.

Specific configuration code:

Configure agents
Proxytable: {
'/api ': {//API is a match
Target: ' ',//Set proxy target
Pathrewrite: {//rewrite path
' ^/api ': '/'

The specific code requested in the component:

this. $http. Post ('/api/index/data/', qs.stringify ({
JobName: ' Getsiteproductanalysis ',
Datetype:this. Datetype
}). Then (function (response) {
Console.log (response)
}). catch (function (error) {
Console.log (Error);


Using Axios in Vue2, the parameters we requested are still JSON type and are not serialized. We need to use QueryString to solve the problem

Need to first introduce the import qs from ' QS ';

When passing in the parameter, the format is turned down,Qs. Stringify(data)

In this way, we are able to request access to the data normally.

In the build environment, the production code should use NPM run build and then put the dist on the Nginx server and configure the proxy address on Nginx.

Vue2 Project uses Axios to send requests

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.