vue-项目对axios进行封装

你的名字 2021-11-11 16:16 332阅读 0赞

##### 需求描述 #####

我们在做vue项目的时候，经常会遇到一个问题就是我们的请求需要加请求头，或者还不是一个请求头的情况，那么其实我们可以使用比较原始的办法，直接在我们写的时候就直接加上请求头，这样可以避免后期加不上的情况，但是有下面两种情况是我们很无奈的，第一是请求头信息改掉了，第二是开始的时候没有加，但是后面要求我们加上的时候，这两种情况如果我们的请求比较少的时候还是可以接受的，但是如果多的时候就比较恶心了，估计死的心都有了，还有就是我们版本迭代的时候，域名名字中间会加上对应的版本号，这个时候如果一个一个写的话，估计也够让人头疼的事情，等等情况，都是在接口名字上做的文章，那我们对请求的封装就显的尤为重要。那么其实我们如果前期没有封装请求的话，也是可以的统一配置的，只是这是不得已而为之的办法，[统一配置请求信息][Link 1]

##### 代码分析 #####

###### 看目录结构 ######

![目录结构][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jbGVhcmxvdmUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]

###### request.js ######

import axios from 'axios'
    import { Toast,Indicator} from 'mint-ui';
    
    function checkStatus (response) { 
      if (response.status === 200) { 
        return response
      } else { 
        console.log(response)
      }
    }
    // 共通请求头部
    function requestHeader (opt) { 
      let myHeaders = opt.headers;
      if (!myHeaders) { 
        myHeaders = { };
         myHeaders['Content-Type'] = "application/json;charset=utf-8";
      }
      myHeaders['authorization'] = sessionStorage.getItem('authorization');
      return myHeaders
    }
    //封装的请求体
    export function request (options) { 
      return axios({ 
        method: options.method,
        url: options.url,
        data: options.data,
        params:options.params,
        headers: requestHeader(options),
      })
        .then(checkStatus)
        .then(res => { 
          if (options.method.toUpperCase() === 'HEAD') { 
            return { success: true}
          } else { 
            if(res.status === 200){ 
               return res.data
            }else{ 
              Toast(res.statusText)
            }
          }
        }).catch(function (err){ 
          if (options.method.toUpperCase() === 'HEAD') { 
            return { success: false}
          } else { 
            Toast("后台处理发生异常，请稍后重试");
          }
        });
    }

> 这个文件是对axios的请求的封装，上面的注释写的很明白了，这里不做过多的注释。

###### Constants.js ######

export default { 
      // host_login:'http://www.crowncrystalhotel.com:9519', //线下模拟登陆的接口ip
      // host_submit:'http://47.98.113.173:9104', //线下的打扫任务
      host_login:'http://47.98.113.173:9022', //线上模拟登陆的接口ip
      host_submit:'http://service.crowncrystalhotel.com',//线上的公众号的打扫任务
    }

> 这个文件是统一配置域名信息，其实这个域名我们一般只有一个，那么这里就直接写一个就可以了，只是我的项目导致的，我这里会有很多的域名，因为后端比较多，服务都不一样，所以这里大家根据情况自己写适合自己的代码。

###### Config.js ######

module.exports = { 
      api : { 
         "clean_employee_login":'/v1/common/employee/login', //做授权，模拟登陆
         "clean_task_api" : '/v1/room_service/add_sweep/', //打扫的接口
      },
      roles: { 
    
      },
      authors: { 
      }
    };

> 这里的文件是接口的名字，一般来说是一个域名对应很多的接口的名字，所以不管上一个文件里面是不是多个的，这里一般都不会是一个文件，因为一个项目不会只有一个接口，这里不做赘述，自己看一下文件的写法就行了。

###### vue文件引用 ######

import data from '../../utils/date'; //引入时间格式化js
      import {api} from '../../utils/Config' //引入接口配置文件
      import {request} from '../../utils/request' //引入封装的接口
      import Constants from '../../utils/Constants' //引入封装的接口ip
      import {Toast,Indicator} from 'mint-ui'; //安装提示信息
      import md5 from 'js-md5';//引入需要加密的MD5js
      export default {
        data() {
          return {
            clean_time : '',   //绑定时间
            clean_new_Time: "", //绑定的选择的时间
            clean_Room: "", //绑定房间号
            clean_new_Room: "", //绑定的选择的房间号
            isShowClean_Room: false, //是否显示房间号蒙层
            authorization : '',//模拟登陆的授权信息
            homeCodeList: [{
              flex: 1,
              values: ['8501', '8502', '8503', '8504', '8505', '8506', '8507', '8508'],
              className: 'homeCode',
              textAlign: 'center'
            }],
          }
        },
        created(){
            /**
             * @simulation_login 模拟登陆拿授权信息
             */
            let that = this;
            //that.simulation_login;
            this.simulation_login();
            console.info('passing....');
        },
        methods: {
            /**
             * @homeCloseClick 点击选择房间号
             */
          homeCloseClick() {
            this.isShowClean_Room = true;
            console.log("选择房间号")
          },
            /**
             * @timeCloseClick 点击选择时间
             */
          timeCloseClick() {
            this.clean_new_Time = new  Date(); //将时间重置为当前的时间
            this.$refs.picker.open(); //打开时间选择器
            this.isShowHome_Time = true;
            console.log("选择时间");
          },
            /**
             * @onValuesChange 选择选项的函数
             * @param values 被选择的选项
             */
          onValuesChange(values) {
            console.log(values.values[0]);
            this.clean_new_Room = values.values[0];//将选择的数据给homeNewCode
          },
            /**
             * @clean_RoomCancel 点击房间号的取消
             */
          clean_RoomCancel() {
            this.clean_new_Room = this.clean_Room;
            this.isShowClean_Room = false;
          },
            /**
             * @clean_RoomConfirm 点击房间号确定
             */
          clean_RoomConfirm() {
            this.clean_Room = this.clean_new_Room;
            this.isShowClean_Room = false;
          },
            /**
             * @select_Time  选择时间
             */
          select_Time(){
              this.isShowHome_Time = false;
              console.info(this.clean_new_Time);
              this.clean_time = this.clean_new_Time.format('yyyy-MM-dd HH:mm:ss'); //将时间格式化
          },
            /**
             * @confirm_clean 点击确认打扫
             * @Constants.host_submit 提交的接口
             */
          confirm_clean(){
               if(this.clean_Room && this.clean_time){
                    request({
                         method : 'post',
                         url : Constants.host_submit + api.clean_task_api, //发送提交打扫的请求
                         data : {
                             room_no : this.clean_Room,
                             sweep_type : 0,
                             sweep_time : this.clean_time,
                             card_id : null,
                             remark : '',
                         },
                         /*headers : {
                             authorization : this.authorization
                         }*/
                    }).then((res)=>{
                        console.info(res);
                       if(res.message === 'success'){
                           Toast({
                               message: '操作成功',
                               iconClass: 'mint-toast-icon mintui mintui-success'
                           });
                       }else{
                           let instance = Toast(res.message);
                           setTimeout(() => {
                               instance.close();
                           }, 2000);
                       }
                    }).catch((err)=>{
                        let instance = Toast('系统异常');
                        setTimeout(() => {
                            instance.close();
                        }, 2000);
                        console.error(err);
                    });
               }else{
                   let instance = Toast('请完善信息');
                   setTimeout(() => {
                       instance.close();
                   }, 2000);
               }
          },
            /**
             * @simulation_login 模拟登陆获取授权
             */
            simulation_login() {
                 let username = 'hotel_root';
                 let pwd = '123456';
                 let code = 'SHJKJD-HND';
                 let shift_name = 'morning_shift';
                 request({
                     method : 'post',
                     url : Constants.host_login + api.clean_employee_login,
                     data : {
                         code: code,
                         user_name: username,
                         password: md5(pwd),
                         shift_name : shift_name
                     }
                 }).then((res)=>{
                     console.info(res);
                    if(res.message === 'success'){
                       //this.authorization = res.new_authorization;
                       sessionStorage.setItem('authorization',res.new_authorization); //将最新的授权信心放到缓存中
                    } else{
                       console.error('模拟登陆失败');
                    }
                 }).catch((err)=>{
                       console.error(err);
                 })
            },
        }
      }

> 这里需要使用的地方直接就可以import引入，当然您也可以全局引用，都是可以的，这里只是写怎么使用的，不做过多的赘述，只是一个例子。

到这里基本就结束了，封装一个请求不难，熟悉这个过程就好了。我也是在别人的帮助下实现的，多写写就好了，感谢一路以来帮助我的人。vue的路上祝我和朋友们一路顺风。

[Link 1]: https://blog.csdn.net/qq_41485414/article/details/90755711
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9jbGVhcmxvdmUuYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20211109/536993605c3249cd84ebc922069e03a2.png