About Axios and its configuration in Vue

What is Axios? Official explanation: Axios is a promise-based HTTP library that can be used in browsers and node. js.

Has the following characteristics:

• Create XMLHttpRequests from the browser
• Create an HTTP request from node. js
• Support Promise API
• Intercept requests and responses
• Transform request data and response data
• Cancel Request
• Convert JSON data automatically
• Client Support Defense XSRF

But for me today, it's a way to send a network request.

Sending requests using Axios is simple and the code is extremely structured.

Installation method:

(1), using NPM:

　　$ npm install axios

(2), using bower:

　　$ bower install axios

(3), using CDN Acceleration Service

Example: <script src= "Https://cdn.bootcss.com/axios/0.18.0/axios.min.js" ></script>

To send a request using Axios:

1. Execute GET Request:

Create a request Axios.get ('/user?id=12345 ') for the user of the given ID. Then (function (response) {    Console.log (response);}). catch (function (error) {    console.log (error);}); /Optionally, the above request can be done axios.get ('/user ', {    params: {        id:12345    }}). Then (function (response) {    Console.log ( response);}). catch (function (error) {    console.log (error);});    

　　

2. Perform POST request:

Axios.post ('/user ', {    firstName: ' Fred ',    lastName: ' Flintstone '}). Then (function (response) {    Console.log (response);}). catch (function (error) {    console.log (error);});

　　

3. Execute multiple Concurrent requests:

function Getuseraccount () {    return axios.get ('/user/12345 ');} function Getuserpermissions () {    return axios.get ('/user/12345/permissions ');} Axios.all ([Getuseraccount (), Getuserpermissions ()]). Then (Axios.spread (function (acct, perms) {    //Two requests are now complete}) );

　　

Of course, you can also create requests by passing related configurations to Axios, for example, we use Axios to send requests in a Vue project, and this is necessary. Example: We write the project, sometimes with an interface address, but later for some reason need to change the interface address, in this case, if we create the request is the absolute path used, that is, the absolute URL, and we know that a project usually contains a lot of requests, In this case, one must be changed.

However, if we are configuring a BaseURL in the Axios configuration, then when sending the request, just write the relative URL of the interface. In this case, if you encounter the need to change the interface address, you only need to change the configuration item in the BaseURL can be, and not one to change, is not much more convenient.

Here is an example of background management based on iview (refer to iview-based background management), in the project's index.html file, the introduction of Axios files, can be introduced by CDN, and then you can add Src/main.js in the BaseURL file, such as:

Axios.defaults.baseURL = ' https://some-domain.com/api/';

　　

This is the only way to write to other places where you want to send the request:

Global.axios.post (' Adminn_1.service ', {    ///interface's upload parameters}). Then (data = {    Console.log (' Return Data ')}). catch (E = > {    console.log (e)})

　　

Description

(1), if not specified method , the request will use the default get method.

(2),`baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL，这样也便于以后更改接口地址

About Axios and its configuration in Vue