Vue-axios encapsulated in vue cli

common/post.js

Axios from Import 'Axios' // introduced Axios 
Import from QS 'QS' // introduced QS 
axios.defaults.baseURL = '/ apis' // requests a domain name address (here a proxy so direct fill / apis 

// interception response response, error processing 
axios.interceptors.response.use ( function (response) {
   // successfully processed 
  // code processing 
  response.code = response.data.code
   Switch (Response.Status) {
       Case 200 is :
         BREAK ;
     Case 400 : response.data.msg = 'bad request "
       BREAK ;
     Case 401: response.data.msg =' unauthorized, please re-log '
      BREAK ;
     Case 403: response.data.msg = 'access denied'
       BREAK ;
     Case 404: response.data.msg = 'request error, the resource is not found'
       BREAK ;
     Case 405: response.data.msg = 'request method is not allow '
       BREAK ;
     Case 408: response.data.msg =' request timeout '
       BREAK ;
     Case 500: response.data.msg =' server error '
       BREAK ;
     Case 501: response.data.msg =' network is not implemented '
       BREAK ;
     Case 502: response.data.msg = 'network error'
       BREAK ;
     Case503: response.data.msg = 'service is unavailable'
       BREAK ;
     Case 504: response.data.msg = 'network time'
       BREAK ;
     Case 505: response.data.msg = 'version does not support the HTTP request'
       BREAK ; 
  } 
     return Response; 
}, function (error) { 
  
  return Promise.reject (error); 
}); 

the async function requestGet (Options) {
 // this is the main method of packaging post, get Similarly method 
  options.method = 'post' IF (options.config === 'formData' ) { 
    options.headers = { 'the Type-the Content': 'multipart / form-Data'}
  } 
  the else { 
    options.data = qs.stringify (options.data) 
  } 
  return  new new Promise ((Resolve, Reject) => { 
    Axios (Options) .then (RES => {
     //   this is mainly based on the data returned for subsequent determination, according to the actual situation 
      IF (res.data.code == '200 is' ) { 
        Resolve (res.data) 
      } the else { 
        Reject (res.data) 
      } 
    }). the catch (error => {
     // display interceptors respone error handling readable after 
      the console.log (error) 
    }) 
  }) 
} 

Export default { requestGet }

main.js

Post from Import '../static/js/post.js' / * POST public * / 

const} {requestPost = Post / * POST * / 

Vue.prototype. $ requestPost = requestPost // POST mount globally

Page:

acceptlist(){
                   this.$requestGet({
                    url: this.http+'/cdk/paperTypeMobile/findList',
                    data: {}
                }).then(res => {
                    console.log(res)
                    this.columns=res.obj
                }).catch(err=>{
                    console.log(err)
                })
               }

Note: main.js and post.js to be introduced axios, qs

Guess you like

Origin www.cnblogs.com/weilizou/p/10937645.html