安装axios组件替换vue-resource，ajax交互
vue 2017-10-16 14:44:26

安装：

JavaScript Code复制内容到剪贴板
  1. npm install axios --save-dev  

 

入口main.js：

JavaScript Code复制内容到剪贴板
  1. import axios from 'axios'  
  2. Vue.prototype.$http = axios //将$http定义为axios组件，与vue-resourse组件使用方法一致  

 

其他地方使用的话 如同使用 vue-resource 一样

JavaScript Code复制内容到剪贴板
  1. this.$http.get(URL).then(response => {  
  2.     // success callback  
  3. }, response => {  
  4.     // error callback  
  5. })  

 

 

JavaScript Code复制内容到剪贴板
  1. // 传统写法    
  2. this.$http.get('/someUrl', [options]).then(function(response){        
  3.     // 响应成功回调    
  4. }, function(response){        
  5.     // 响应错误回调    
  6. });    
  7.     
  8. // Lambda写法    
  9. this.$http.get('/someUrl', [options]).then((response) => {        
  10.     // 响应成功回调    
  11. }, (response) => {        
  12.     // 响应错误回调    
  13. });    

 

 

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     this.$indicator.open();  
  3.   
  4.     let params = {  
  5.         intro: intro,  
  6.         publish_id: publishId,  
  7.         userId: userId  
  8.     };  
  9.   
  10.     this.request.post('/cms/publish-success/', params).then(response => {  
  11.   
  12.         this.$indicator.close(); //关闭loading  
  13.         let res = response.data;  
  14.         /* 进入业务流程 */  
  15.         if(res.code == 0) {  
  16.             let data = JSON.parse(res.data);  
  17.             // 进入发布成功界面      
  18.             this.$router.push('/cms/publish-success/' + publishId);  
  19.         } else {  
  20.             this.$toast("参数不正确");  
  21.         }  
  22.         // success callback      
  23.   
  24.     }, response => {  
  25.         this.$indicator.close(); //关闭loading  
  26.         this.$toast("网络连接失败");  
  27.     })  
  28. </script>  

 

如果网络连接失败，建议返回上一页的路由或指定路由：

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     this.$indicator.open();  
  3.   
  4.     let params = {  
  5.         intro: intro,  
  6.         publish_id: publishId,  
  7.         userId: userId  
  8.     };  
  9.   
  10.     this.request.post('/cms/publish-success/', params).then(response => {  
  11.   
  12.         this.$indicator.close(); //关闭loading    
  13.         let res = response.data;  
  14.         /* 进入业务流程 */  
  15.         if(res.code == 0) {  
  16.             let data = JSON.parse(res.data);  
  17.             // 进入发布成功界面        
  18.             this.$router.push('/cms/publish-success/' + publishId);  
  19.         } else {  
  20.             this.$toast("参数不正确");  
  21.         }  
  22.         // success callback        
  23.   
  24.     }, response => {  
  25.         this.$indicator.close(); //关闭loading  
  26.           
  27. //      this.$toast("网络连接失败");  
  28.   
  29.         this.$messagebox({  
  30.             message: '网络连接失败',  
  31.         }).then(action => {  
  32.             this.$router.go(-1); //取消返回上一个路由地址            
  33.         });  
  34.   
  35.     })  
  36. </script>  

 

 

对axios进行二次封装，用于统一处理错误：

参考资料：https://github.com/heuuLZP/vue-axios

 

在utils目录下新建一个文件：http.vue

http.zip
文件类型: .zip 9568b8682323a6a1b40da0aea893ddd5.zip (1002 Bytes)

解压以下，放进去，源码：

JavaScript Code复制内容到剪贴板
  1. <script>  
  2.     'use strict'  
  3.       
  4.     import axios from 'axios'  
  5.     import { MessageBox } from 'mint-ui'  
  6.     import { Indicator } from 'mint-ui';  
  7.     import router from '../router'  
  8.       
  9.     axios.interceptors.request.use(config => {  
  10.         // loading  
  11.         return config  
  12.     }, error => {  
  13.         return Promise.reject(error)  
  14.     })  
  15.   
  16.     axios.interceptors.response.use(response => {  
  17.         return response  
  18.     }, error => {  
  19.         return Promise.resolve(error.response)  
  20.     })  
  21.   
  22.     /* 检查http码 */  
  23.     function checkStatus(response) {  
  24.         // loading  
  25.         // 如果http状态码正常，则直接返回数据  
  26.         if(response && (response.status === 200 || response.status === 304 || response.status === 400)) {  
  27.             return response  
  28.             // 如果不需要除了data之外的数据，可以直接 return response.data  
  29.         }  
  30.         // 异常状态下，把错误信息返回去  
  31.         return {  
  32.             status: -404,  
  33.             msg: '网络异常'  
  34.         }  
  35.     }  
  36.   
  37.     function checkCode(res) {  
  38.         // 如果code异常(这里已经包括网络错误，服务器错误，后端抛出的错误)，可以弹出一个错误提示，告诉用户  
  39.         if(res.status === -404) {  
  40.             alert(res.msg)  
  41.         }  
  42.         let vm = this;  
  43.         // 判断返回参数规定的检测  
  44.         if(res.data.code != 0) {  
  45.               
  46. //          console.log(res.data)  
  47.             MessageBox.confirm('', {  
  48.                 title: '',    
  49.                 message: res.msg ? res.msg : "数据异常，请联系管理员",    
  50.                 confirmButtonText: '回首页',  
  51.                 cancelButtonText: '返回'  
  52.             }).then(action => {  
  53.                 router.push('/witsbox/witsbox-main');  
  54.             }).catch(err => {   
  55.                 router.back(-1);  
  56.             });  
  57.               
  58.         }else{  
  59.               
  60.             return res.data  
  61.         }  
  62.           
  63.     }  
  64.   
  65.     export default {  
  66.         post(url, data) {  
  67.             Indicator.open();  
  68.               
  69.             return axios({  
  70.                 method: 'post',  
  71.                 url,  
  72.                 data,  
  73.                 timeout: 10000,  
  74. //              headers: {  
  75. //                  'Token': '123'  
  76. //              }  
  77.             }).then(  
  78.                 (response) => {  
  79.                     Indicator.close();   
  80.                     return checkStatus(response)  
  81.                 }  
  82.             ).then(  
  83.                 (res) => {  
  84.                     Indicator.close();   
  85.                     return checkCode(res)  
  86.                 }  
  87.             )  
  88.         },  
  89.         get(url, params) {  
  90.             return axios({  
  91.                 method: 'get',  
  92.                 url,  
  93.                 params, // get 请求时带的参数  
  94.                 timeout: 10000,  
  95. //              headers: {  
  96. //                  'X-Requested-With': 'XMLHttpRequest'  
  97. //              }  
  98.             }).then(  
  99.                 (response) => {  
  100.                     return checkStatus(response)  
  101.                 }  
  102.             ).then(  
  103.                 (res) => {  
  104.                     return checkCode(res)  
  105.                 }  
  106.             )  
  107.         }  
  108.     }  
  109. </script>  

 

 

根据业务需求，解析即可，入口文件改一下：

main.js：

JavaScript Code复制内容到剪贴板
  1. import http from './utils/http'  
  2.   
  3. Vue.prototype.request = http  

 

 应用：

JavaScript Code复制内容到剪贴板
  1. this.request.post(this.$store.state.cms.api.getPublishList, params).then(response => {  
  2.     if(!response) {  
  3.         return false;  
  4.     }  
  5.   
  6.     // 开始处理业务：        
  7.     let instance = this.$toast('删除成功');  
  8.     setTimeout(() => {  
  9.         instance.close();  
  10.     }, 1000);  
  11.   
  12. })  

 

 

本文来自于：http://www.yoyo88.cn/study/vue/174.html

上一篇 利用npm 安装/卸载/删除模块
下一篇 mint-ui 手册
相关的文章
Powered by yoyo苏ICP备15045725号