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

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: http://www.bkjia.com/article/134571.htm

Install axios to the Project

Npm install axios -- save

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

Configuration:

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 asp.net 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.