axios 封装及使用

许久没有更新文档，终于有时间来整理了！！！

在vue项目中使用封装后的 axios

项目中引用 axios 组件后，在 main.js 中定义全局headers、baseURL

       header：axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

       baseURL：axios.defaults.baseURL='http://xxx.xxx.x.xxx';

       解释：vue 项目如调用接口存在跨域或者后台无法接受到参数的情况时，请如上定义header

                  baseURL 方便修改开发、测试环境请求的公共路径

在使用 axios 的地方，传递参数要定义如下格式：     

            let postData = this.$qs.stringify({

                 test1:'111111',

                 test2:'222222',

            });   注意引用 import qs from 'qs';

最后就可以使用啦！  

          this.$axios({

                 url: 'xxxxxx',

                 method: 'post',

                 data: postData,

          }).then((response) =>{

                //请求成功返回的数据

          }).catch((error) =>{

               //请求失败返回的数据

         })

多说一句，如果需要存储 token ,需放在请求成功的响应里：localStorage.setItem('token','xxxx');

除去后台对 token 的验证外，前台需在 main.js 中使用钩子函数对路由进行权限跳转，如下：

       router.beforeEach((to, from, next) => {

            const token = localStorage.getItem('token');   //获取到存储的 token

            if (!token && to.path !== '/login') {

                    next('/login');

            } else {

            // 简单的判断IE10及以下不进入富文本编辑器，该组件不兼容

                      if (navigator.userAgent.indexOf('MSIE') > -1 && to.path === '/editor') {

                                 Vue.prototype.$alert('vue-quill-editor组件不兼容IE10及以下浏览器，请使用更高版本的浏览器查看'', {

                                  confirmButtonText: '确定'

                       });

                      } else {

                           next();

                      }

             }

      })

  

     axios 封装总结完成，不足之处，多多指教！！