A detailed description of the usage tips for Axios in Vue

Use Axios first to download the Axios module package

Install Axios--save

Second, you need to introduce the file in use

Import Axios from ' Axios '

One, the invocation of Axios common two methods (here using the Easy-mock analog data Interface):

 //  Method 1   ' post '  ' http://easy-mock.com/mock/596077559 Adc231f357bcdfb/axios/test-post-axios '  =>{Console.log (Response.data)}).  catch  (error) =>{Console.log (Error)})  

// Method 2    Axios.post (' Http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/test-post-axios ', {      Miaov:"classroom "  //Data sent     })      . Then ((response)={        console.log (response.data)      })      . Catch (Error) ={        console.log (Error)      })

Attention:

When you send data to the background in method one:

//get mode to send dataAxios.get (' Https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock ', {params: {pomelo:' TT ', test:' Test '}}). Then ((response)={console.log (response)}).Catch(Error) ={console.log (Error)})//post mode to send dataAxios.post (' Https://easy-mock.com/mock/5a883cccbf160328124e8204/example/mock ', {pomelo:' TT ', test:' Test '}). Then ((response)={console.log (response)}).Catch(Error) ={console.log (Error)})

Ii. Custom Request Instances

//Common Request instance Configuration items{baseURL: ',//Base URLtimeout:1000,//Request Delay TimeHeaders {' X-requested-with ': ' XMLHttpRequest '},//Customizing request Header ContentResponsetype: ' JSON ',//request data types include ' Arraybuffer ', ' blob ', ' document ', ' json ', ' text ', ' stream 'Params: {},//regardless of the type of request, the properties in the params are stitched together in key=value format in UrlzhongTransformrequest: [function(data) {returnData}],//apply only to Post,put,patch,transformrequest ' allow the request data to be modified before sending to the server. The function in the following array must return a string, or ArrayBuffer, or StreamTransformresponse: [function(data) {returnData}],//Transformresponse ' allows the response data to be modified before being passed to Then/catchValidatestatus:function(status) {
Return status < 400//status code less than 400 is successful (returns True)
},//the Validatestatus ' definition for a given HTTP response status code is resolve or reject promise. If ' validatestatus ' returns ' true ' (or set to ' null ' or ' undefined '), promise will be resolve; Otherwise, promise will be rejecteCanceltoken//Cancellation request, details below}

You need to create an object before using a custom request instance

var The configuration items in HTTP = Axios.create ({})   //  {} are placed above

Change the data format to key=value format using Transformrequest

Import queryString from ' queryString '//convert format packs without downloading  varHTTP =axios.create ({baseURL:' http://easy-mock.com/mock/596077559adc231f357bcdfb/axios/', timeout:1000, Responsetype:' JSON ', headers:{' Custome-header ': ' Miaov ',      ' Content-type ': ' application/x-www-form-urlencoded '//The format converted to Key=value must be added Content-type}, transformrequest:[function(data) {Console.log (data) Data.age= 30; Properties that were added before sendingreturnQuerystring.stringify (data);//convert formats using corresponding methods    }]  })

A detailed description of the usage tips for Axios in Vue