Vue---Axios

Vue's author announced---Stop updating the vue-resource after the release of vue2.0, it is recommended to use Axios

I used it a while ago, and now I'm talking about its basic usage.

I. Preparation phase----If you're just a front end that doesn't write interfaces or if you're going to be separated, you need to know the mock

Here's a super easy way to make you

1. Create a mock folder

2. Create Tree.json and then write some data.

3. Modify the configuration inside the dev-server---Remember to modify this here when you run the NPM runtime build will not be build so you need to negotiate with the backend to avoid the path problem 404

Catalog: Bulid/dev-server

Two. Installation

// installing npm Install Axios

Three. Use

Create Rainaxios.vue under the Src/components folder

<template> <div> <div>msg: {{msg}}</div> <button @click = ' fn (') '. /123 ") > click </button> <!--<audio autoplay=" autoplay "src=" Audio/index.mp3 "/>--> </div> </template><style scoped></style><script>Import Axios from' Axios 'Exportdefault{data () {return{msg:' Hello Axios ', }}, components: {}, Methods: {fn:function () {        var_this = This; Axios.get ("./mock/tree.json"). Then (function(RSP) {_this.msg=rsp.data.name}) }}}</script>

The requirement for this component is simple, click Send Axios request Tree.json and assign the return value to MSG

Src/router/index.js

Import Vuefrom ' vue ' vue-router' @/components/rainaxios 'defaultnew Router ({  routes: [    {      '/',      ' Axios ',      component:axios1    }  ]} )

No, I'm not.----This is the last time I've ever written such a detailed tutorial.

Whatever's in the future, if it's vue, you need to think about whether you need to change router.

Post-click Value change

If you have finished the above functions----now formally talk about the usage of Axios!!

Axios provides the following methods

axios.request (config) axios.get (url[, config]) Axios. Delete (url[, config]) axios.head (url[, config]) axios.post (url[, data[, config]) axios.put (url[, data[, Config]) Axios.patch (url[, data[, config])

Can read it!

It doesn't explain!!!

It is advisable to configure the relevant configuration----English is not good to help you translate, lest mislead you

{  //"url" is the server URL for the requestURL: '/user ',   //is the request method used at the time of the requestMethod: ' Get ',//default   //BaseURLBaseURL: ' https://some-domain.com/api/',   //' Transformrequest ' allows the requested data to be modified before being sent to the serverTransformrequest: [function(data) {//make some changes to the data you want to do     returndata; }],   //' Transformresponse ' allows changes to the response data to be made before  //It's passed to Then/catchTransformresponse: [function(data) {//Do whatever your want to transform the data     returndata; }],   //' headers ' is custom headers to be sentHeaders: {' x-requested-with ': ' XMLHttpRequest '},   //' params ' is the URL parameters to being sent with the request  //must be a plain object or a Urlsearchparams objectparams: {ID:12345  },   //' Paramsserializer ' is a optional function in charge of serializing ' params '  //(e.g. Https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)Paramsserializer:function(params) {returnQs.stringify (params, {arrayformat: ' brackets ')})  },   //' data ' is the data to being sent as the request body  //Only applicable for request methods ' PUT ', ' POST ', and ' PATCH '  //When no ' transformrequest ' was set, must be of one of the following types:  //-String, plain object, ArrayBuffer, Arraybufferview, Urlsearchparams  //-Browser Only:formdata, File, Blob  //-Node Only:streamdata: {firstName:' Fred '  },   //' Timeout ' specifies the number of milliseconds before the request times out.  //If the request takes longer than ' timeout ', the request would be a aborted.timeout:1000,   //' withcredentials ' indicates whether or not cross-site Access-control requests  //should be made using credentialsWithcredentials:false,//default   //' Adapter ' allows custom handling of requests which makes testing easier.  //Return a promise and supply a valid response (see [Response docs] (#response-api)).Adapterfunction(config) {/* ... */  },   //' auth ' indicates that HTTP Basic auth should is used, and supplies credentials.  //This would set an ' Authorization ' header and overwriting any existing  //' Authorization ' Custom headers you have set using ' headers '.Auth: {username:' JaneDoe ', Password:' S00pers3cret '  },   //' Responsetype ' indicates the type of data that the server would respond with  //options are ' arraybuffer ', ' blob ', ' document ', ' json ', ' text ', ' stream 'Responsetype: ' JSON ',//default   //' Xsrfcookiename ' is the name of the cookie to use as a value for XSRF tokenXsrfcookiename: ' Xsrf-token ',//default   //' Xsrfheadername ' is the name of the HTTP header that carries the XSRF token valueXsrfheadername: ' X-xsrf-token ',//default   //' onuploadprogress ' allows handling of progress events for uploadsOnuploadprogress:function(progressevent) {//Do whatever your want with the native Progress event  },   //' ondownloadprogress ' allows handling of progress events for downloadsOndownloadprogress:function(progressevent) {//Do whatever your want with the native Progress event  },   //' Maxcontentlength ' defines the max size of the HTTP response content allowedmaxcontentlength:2000,   //' Validatestatus ' defines whether to resolve or reject the promise for a given  //HTTP Response Status code. If ' Validatestatus ' returns ' true ' (or is set to ' null ' )  //or ' undefined '), the promise would be resolved; Otherwise, the Promise would be  //rejected.Validatestatus:function(status) {returnStatus >= && status < 300;//default  },   //' maxredirects ' defines the maximum number of redirects to follow in node. js.  //If set to 0, no redirects would be followed.Maxredirects:5,//default   //' httpagent ' and ' httpsagent ' Define a custom agent to being used when performing HTTP  //and HTTPS requests, respectively, in node. js. This allows-configure options like  //' keepAlive ' is not enabled by default.Httpagent:Newhttp. Agent ({keepAlive:true}), Httpsagent:NewHttps. Agent ({keepAlive:true }),   //' proxy ' defines the hostname and port of the proxy server  //' auth ' indicates that HTTP Basic auth should is used to connect to the proxy, and supplies credentials.  //This would set an ' proxy-authorization ' header and overwriting any existing ' proxy-authorization ' custom headers you have Set using ' headers '. Proxy: {host:' 127.0.0.1 ', Port:9000, Auth:: {username:' Mikeymike ', Password:' rapunz3l '    }  },   //' Canceltoken ' specifies a cancel token that can is used to cancel the request  //(see cancellation sections below for details)Canceltoken:NewCanceltoken (function(cancel) {})}

It doesn't make any difference. You can go on Jquery--$.ajax

Personal feeling NPM tutorial good but not with vue-cli+webpack use

Vue---Axios