Vue + axios, vueaxios

Vue + axios, vueaxios

You don't need to introduce axios. The api has a specific introduction to axios or axios Chinese;

I am mainly talking about the problems I encountered during my first use of axios and the secondary encapsulation.

Let's talk about the second encapsulation. I used to find the encapsulation of many people on the Internet, or separate the post and get requests, either you write only one type or copy and paste the API, which is not suitable for actual use.

The post and get values of asxios use data and params. I want to directly call the second-encapsulated ajax to use data or params based on different request types, we thought that data and params could not coexist, and the result test was feasible. paste the code.

 

1 ajax: function (opt) {2 var opts = opt | |{}; 3 4 if (! Opts. url) {5 alert (All interfaces are not written. What do you want? '); 6 return false; 7} 8 if (opts. type = undefined) {9 opts. type = 'post' 10} 11 axios ({12 method: opts. type, 13 url: opts. url, 14 // 'params' is the URL parameter to be sent along with the request 15 // it must be a plain object or URLSearchParams object 16 params: (opts. type = "get ")? Opts. data: {}, 17 // params: opts. data, 18 19 // 'data' is the data sent as the request body 20 // only applicable to these request methods 'put', 'post ', and 'patch '21 // when 'transformrequest' is not set, it must be of one of the following types: 22 //-string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams23 //-exclusive Browser: FormData, File, Blob24 //-Node exclusive: Stream25 data: (opts. type = "post ")? Qs. stringify (opts. data) :{}, 26 headers: opts. headers | {27 'content-type': 'application/x-www-form-urlencoded '28}, 29 // 'baseurl' will be automatically added before 'url, unless 'url' is an absolute url. 30 // you can set a 'baseurl' to facilitate the transmission of the URL relative to URL31 baseURL for the axios instance: 'Your interface address /', 32 // 'transformrequest' allows you to modify the request data (before request processing) before sending it to the server. 33 // it can only be used in 'put ', request Methods 'post' and 'patch '34 // the function in the following array must return a string, or ArrayBuffer, or Stream35 transformRequest: [function (data) {36 // arbitrary conversion of data processing 38 return data; 39}], 40 // 'transformresponse' before being passed to then/catch, allowed to modify response data (data returned by the request) 41 transformResponse: [function (data) {42 // arbitrary conversion of data 43 return data; 44}], 45 // 'timeout' specifies the number of milliseconds in which the request times out (0 indicates no time-out period) 46 // if the request calls exceed the 'timeout' time, the request will be interrupted by 47 timeout: opts. time | 10 *, 48 // return data type 49 responseType: opts. dataType | 'json' 50 }). then (function (res) {51 console. log (res); 52 if (res. status = 200) {53 if (opts. success) {54 opts. success (res. data, res); 55} 56} else {57 alert (res. data. error); 58} 59 }). catch (function (error) {60 // The request has been sent, but the server uses the status code to respond 61 // 62 more than 2xx. log (error); 63 if (opts. error) {64 opts. error (error); 65} else {66 // error 67 alert ('error') occurred when setting the request to trigger the error; 68} 69 console. log (error. config); 70}); 71 72 },

There is another point to note:

 qs.stringify(opts.data)

Why is this done? It is because, if qs. stringify () is not used in post requests, data cannot be obtained in the background, which is also a pitfall and has been on for a long time;

 

Correct the error.

 

Correct the error.