Vue Global Configuration Axios

Since Yu Yuxi posted a message on Weibo, no longer maintains vue-resource, and recommends that you start using Axios. So in the current project, try to use the Axios

Axios is a promise based HTTP library that can be used in browsers and Node.js. It is also more convenient to use. installation

Using NPM:

$ NPM Install Axios

Use Bower:

$ Bower Install Axios

Using CDN:

<script src= "Https://unpkg.com/axios/dist/axios.min.js" ></script>

Configure use

The installation is complete and we can use the Vue project.
In the development, we can use Config for Axios configuration, but also to do some request interception and so on.
First, we can create a untils folder in the SRC directory to store our configuration files.

The configuration is as follows:

' Use strict ' import Axios from ' Axios ' import qs from ' qs ' axios.interceptors.request.use (config => {//config here) Contains the content per request//To determine whether there is Api_token if (Localstorage.getitem (' Api_token ') in localstorage) {//exists to write Api_token to requ
    EST header config.headers.apiToken = ' ${localstorage.getitem (' Api_token ')} ';
} return config;

The Err => {return promise.reject (err);}); Axios.interceptors.response.use (response => {return response}, error => {return Promise.resolve (error.res

Ponse)}); function CheckStatus (response) {//If the HTTP status code is normal, the data is returned directly if (response && (Response.Status = = | respo
            Nse.status = = 304 | |
        Response.Status = = =) {return response}//abnormal state, send error message back to {status:-404, Msg: ' Network exception '}} function Checkcode (res) {//If the code exception (which already includes a network error, a server error, a back-end throw error), you can pop up an error message telling the user if (Res.sta Tus = = -404) {alert (res.msg)} if (Res.datA && (!res.data.success)) {//Alert (RES.DATA.ERROR_MSG)} return res}//Request mode configuration export default
            {post (URL, data) {//Post return Axios {method: ' Post ', BaseURL: '/backapis ', URL, data:qs.stringify (data), timeout:5000, headers: {' X Requested-with ': ' XMLHttpRequest ', ' content-type ': ' application/x-www-form-urlencoded;
            Charset=utf-8 '}}). Then ((response) => {return CheckStatus (response)
    }). Then ((res) => {return Checkcode (res)})
            }, get (URL, params) {//Get return Axios ({method: ' Get ', BaseURL: '/backapis ', URL, params,//GET request with parameter timeout:5000, headers: {' x-requ Ested-with ': ' XMLHttpRequest '}
        }). Then ((response) => {return checkstatus (response)}). Then
((res) => {return Checkcode (res)})}
 }

Here we can also configure interceptors to intercept requests and responses before handling then or catch. Because the project back-end colleagues handled, here I do not configure the Haha ~ ~ ~

Next, you can use the reference in Mainjs.

Import Axios from './untils/http ';  This allows the $axios to initiate the request (personal use preferences)
vue.prototype. $axios = Axios;  

Specifically as follows: