Introduction to the use of Axios in practical projects

The 1.axios itself encapsulates a variety of data request methods

1 perform a GET request2 3 //create a request for the user of the given ID4Axios.get ('/user?id=12345 ')5. Then (function(response) {6 Console.log (response);7   })8.Catch(function(Error) {9 Console.log (error);Ten   }); One  A //Optionally, the above request can be done -Axios.get ('/user ', { - params: { theid:12345 -     } -   }) -. Then (function(response) { + Console.log (response); -   }) +.Catch(function(Error) { A Console.log (error); at   }); -  - perform a POST request -  -Axios.post ('/user ', { -FirstName: ' Fred ', inLastName: ' Flintstone ' -   }) to. Then (function(response) { + Console.log (response); -   }) the.Catch(function(Error) { * Console.log (error); $});

2. Here we make adjustments based on the aliases provided by the Axios

1 Create a new directory called BaseURL, and then create a new file called Baseurl.js21first of all, we have a different environment in the development process, this means that the backend will provide us with the corresponding interface in different environments (development environment, test environment, grayscale, online) This time, we have to baseurl the interface to do a unified processing (so that the code every push to an environment, We don't have to make any changes.)3 //get the BaseURL of the API4Exportdefault functionGetbaseurl () {5Let [BaseUrl, URLs, protocol] = [' BaseUrl ' API of the development environment, Location.href.toLowerCase (), '/HTTP ']6 //determine the protocol to see if it is HTTP or https7  　　 if(Location.protocol = = = ' https: ') {8protocol = ' https://'9  　　 }Ten //The General API BaseURL is the same as the domain name, here we use the domain name to judge One  　　 if(Urls.match (/test environment baseurl/) && Urls.match (/baseurl/of test environment) [0] = = = ' Domain name of the test environment ') { ABASEURL = protocol + ' domain name of test environment ' -  　　 } - //on the line the  　　 if(Urls.match (/domain name/on-line environment) && Urls.match (/domain name/) [0] = = = ' domain name of the online environment ') { -BASEURL = protocol + ' domain name on the line ' -  　　 } -  　　 returnBASEURL +}

3. Now we are dealing with two of our common request methods based on the request aliases provided by Axios

1 creating a new file is called Axios.js .21First we use the method provided by ES6 to introduce Axios and our encapsulated Getbaseurl method3Import Axios from ' Axios '4Import getbaseurl from ' file path '5 62) Configure Config7Let BASEURL =Getbaseurl ()8 //Here we only introduce these two configuration items, others do not do a detailed explanation, want to see more information, please refer to the official documentation9Const CONFIG ={Ten      //BaseURL will be automatically added to the URL (the URL is the '/' path) One Baseurl:baseurl, A      //Indicates whether a credential is required for cross-domain requests, which is false by default, but for some, when there is a request for a login limitation or cookie credential, this is best combined with -Withcredentials:false - } the  -3handles the arguments passed by the GET request (because the GET request parameter is stitched on the request address, so here we need to manually process the URL of the GET request) -Let UrlEncode = (url, data) = = { -  　　 if(typeof(URL) = = = ' Undefined ' | | url = = =NULL|| url = = = ")return‘‘ +  　　 if(typeof(data) = = = ' Undefined ' | | data = = =NULL||typeof(data)!== ' object ')returnURL -URL + = (url.indexof ('? ')!==-1)? ‘‘ : ‘?‘ +  　　  for(Let Kinchdata) { AURL + = ((url.indexof (' = ')!==-1)? ' & ': ') + k + ' = ' +encodeURI (data[k]) at  　　 } -  　　 returnURL - } -  -4) encapsulating Post and get requests -  inConst GET = (URL, params) = = { -      //The URL here is the delivery of the request data . toURL =urlencode (URL, params) +      returnaxios.get (url,config) - } the  *Consot post = (URL, params) = = { $      returnaxios.post (URL, params, config)Panax Notoginseng } -  the5) expose the Post and get methods +  A Export { the GET, + Post -}

4. Package different request methods according to different interfaces (this method is used to get the data directly)

1 1) Introduce our third processed post and GET request method 2 Import * as Axios from ' File path '34 2) package  5 Const Logins = params = Axios.post ('/user/login ', params)67 const LIST = P Arams = Axios.get ('/list ', params)

5. Using in Components

11introduce our fourth step approach (what we need to introduce).2Import {Logins, List} from ' File path '3 _login () {4 //Test5 Logins ({6User_name: ' user_name ',7Pass: ' Pass '8}). Then (data = {9 if(Data.data.code = = = ' 0 ')) {Ten   console.log (data) One } A }) - } -......

Introduction to the use of Axios in practical projects