Vue axios simple application of (a)

1, the installation axios:

npm install --save axios vue-axios

2, installation qs:

qs.stringify (data) data format can solve data problems

npm install --save axios vue-axios qs

3, cited in main.js page:

1 import Vue from 'vue'
2 import axios from 'axios'
3 import qs from 'qs'
4 
5 Vue.prototype.$http = axios
6 Vue.prototype.qs = qs

4, in the vue

 1 <script>
 2 export default{
 3     data(){
 4         return {
 5             msg:'axios使用'
 6         }
 7     },
 8     created(){
 9         this.axios({
10                 method:'post',
11                 url:'',
12                 data:this.qs.stringify({
13                     msg:this.msg
14             })
15         }).then((response)=>{
16             console.log(response)
17         })
18     }
19 }
20 </script>                            

These are axios in vue in a simple application, in actual projects, we also need to consider the request times out, is logged and so on, then you need to add the http request interceptors, plus token in the request header

Here is a axios tool interceptAxios.js

. 1  // HTTP Configuration 
2  // introduced and Axios element ui of loading and message component 
. 3 Import from Axios' Axios'
 . 4 Import from Store '../../store/store'
 . 5 Import types from AS * '.. /../store/types'
 . 6 Import from Router '../../routes'
 . 7 Import Loading {,} from the Message' UI-Element '
 . 8  // timeout 
. 9 axios.defaults.timeout 500000 =
 10  // http request interceptors, plus token in the request header 
. 11  var loadinginstace
 12 is axios.interceptors.request.use (config => {
 13 is      IF (store.state.token) {
 14       = config.headers.Authorization `` $ {store.state.token}
 15      }
 16      // Element Loading UI method 
. 17      // loadinginstace = Loading.service ({Fullscreen: to true}) 
18 is      return config
 . 19 }, error => {
 20 is      // loadinginstace.close () 
21 is      Message.Error an ({
 22 is          Message: 'loading timeout'
 23 is      })
 24      return Promise.reject (error)
 25  })
 26 is  // HTTP response blocker 
27 axios.interceptors.response.use (response => { // response to successful loading Close
28      // loadinginstace.close () 
29      return Response
 30 }, error => {
 31 is      IF (error.response) {
 32        Switch (error.response.status) {
 33 is          Case 401 :
 34 is            // 401 clear the token information and jump to the login page 
35            store.commit (types.LOGOUT)
 36            store.commit (delPermission)
 37 [            the console.log ( "invalid token ----------------------- ----------- " )
 38            // only jump in the current route is not the login page 
39            router.currentRoute.path! == 'the Login' &&
 40             router.replace ({
 41 is                path: 'Login' ,
 42 is                Query: the redirect {:} router.currentRoute.path,
 43 is              })
 44 is        }
 45      }
 46 is      // loadinginstace.close () 
47      Message.Error An ({
 48          Message: ' load failure '
 49      })
 50      return Promise.reject (error) // returns the error message returned by the interface 
51 is  })
 52 is Export default Axios

In main.js configure:

. 1 Import from Vue 'VUE'
 2 Import from Axios './assets/js/interceptAxios'
 . 3 Import VueAxios from 'VUE-Axios'
 . 4 Import from Store './store/store'
 . 5 Import Qs is from 'QS'
 . 6  
. 7  
. 8 = Vue.prototype.HOST "/ API" // solve cross-domain problems, do a reverse proxy 
9  // will axios mounted to the prototype, can be used directly this.axios access assembly 
10 Vue.prototype. $ HTTP = Axios
 . 11 Vue.prototype.qs = Qs is
 12 is Vue.prototype.store = Store
 13 is  
14 Vue.use (VueAxios, Axios)

 

Vue applications in:

 1 <script>
 2 export default {
 3     data(){
 4 　　　　　return {
 5　　　　　　　msg:''
 6　　　　　}　
 7     },
 8     methods:{
 9         tool(data){
 10             this.axios.post(this.HOST+'/vueHome/QueryTourOrigin.vue',this.qs.stringify(data))
 11                 .then(function(res){
 12                     console.log(res);
 13            })
 14          }
 15     }
 16 }
 17 </script>    

These are just some simple applications, there should be a deeper level of use, continued ......