Detailed explanation of axios usage and vueaxios usage in the vue Project

Source: Internet
Author: User

Detailed explanation of axios usage and vueaxios usage in the vue Project

Use of axios in a project (vue)

A project without a vue project that uses vue-cli scaffolding to generate a webpack template can be viewed happily ~

If the development encounters a cross-origin problem, you can refer to:

Install axios to the Project

Npm install axios -- save

Configure the wepack alias and access different configuration interfaces in different environments


Usage:import config from 'config'

Encapsulate an axios instance

Newfetch.jsCreate an axios instance and filter

If a proxy is configured. Then, config. apiBaseUrl configures the proxy prefix.

Import config from 'config' import axios from 'axios '// import qs from 'qs'; const instance = axios. create ({baseURL: config. apiBaseUrl, // api base_url timeout: 10000, // request timeout // transformRequest: data => qs. stringify (data )});
The default submission format of axios is: application/json, The format is submitted after conversion application/x-www-form-urlencoded
In core, you must add [FromBody]Receives data in json format. Normally application/x-www-form-urlencodedTherefore, this modification is available.
Install as needed qsTo the project, the convertible data format type npm install qs -- save

Comparison of conversion requests using qs

Add an interceptor to an instance

// Add the request interceptor instance. interceptors. request. use (function (config) {// return config;}, function (error) {// return Promise for request errors. reject (error) ;}); // Add the response interceptor instance. interceptors. response. use (function (response) {// return response for the response data;}, function (error) {// return Promise for the response error. reject (error) ;}); // exposes the instance export default instance.

Instance call

If the express proxy is configured, The Request Path is browser-> express Development Server-Send request-> interface server

Import fetch from 'fetch. js' // getfetch ({url: '/home/data', // The complete Request Path is fetch. baseURL +/home/data configured in js? PageIndex = 1 method: 'get', params: {pageIndex: 1}) // postfetch ({baseURL: '/api/v1 ', // The complete Request Path is/api/v1/home/save url: '/home/save', method: 'post', data: {id: 1 }})

The above is all the content about axios used in the vue project. Thank you for your support for the customer's house.

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.