Vue之api统一管理设计

骑猪看日落 2021-05-03 05:45 550阅读 0赞

## 1、基本思路： ##

首先将axios导出，再将axios导入到一个独立的api文件夹中，在api文件夹j建立一个js文件，在这个js文件中将登录，增删改查操作封装起来，在这些封装起来的方法中传入部分参数，然后在所需要这些方法的地方将这个js文件引入即可；  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70]

## 2、核心代码实现： ##

（1）axios:

import axios from 'axios'
    import { Message} from 'element-ui'
    // 创建实例时设置配置的默认值
    var instance = axios.create({ 
        baseURL: 'http://123.57.7.108:1024/emall',
        timeout:'3000'
      });
    //定义拦截器
        
    //给创建的实例添加请求拦截器
    instance.interceptors.request.use(function (config) { 
        // 在发送请求之前做些什么
        var token=window.localStorage.getItem("token");
        if(token){ 
          config.headers['Authorization']="Bearer "+token;
        }
        //例子
        if(config.methods=='post'){ 
           config.headers[' contentType']='application/json;charset=utf-8'
        }
        return config;
      }, function (error) { 
        // 对请求错误做些什么
        return Promise.reject(error);
      });
    
    // 给创建的实例添加响应拦截器
    instance.interceptors.response.use(function (response) { 
        // 对响应数据做点什么
        const data=response.data;//从数据接口中返回的json对象 
        switch(data.code){ 
              case 200:
              case 201:
              case 204:
                //收到以上端口号信息进入.then
                return data;//返回的是data,而不是respons
    
                default:
                  //其它情况，弹框就可以了,进入.catch
                  Message({ 
                    message: data.message,
                    type: 'warning'
                      });
                  return Promise.reject(data.message);
        }
        return response;
      }, function (error) {        
        // 对响应错误做点什么
        return Promise.reject(error);
      });
    
      //导出实例，供其他模块导入使用
      export default instance;

(2)api里面的封装方法的js：

import axios from '../util/axios.js'
    export default{ 
    
        /** * 登录方法 * @param {*} params */
         __api_login:function(params){ 
            return  axios({ 
                 url:"/login",
                 method:'post',
                 data:params
             });
         },
    
         __api_register:function(){ 
              return axios({ 
                  url:"/users",
                  method:'POST',
                  data:params
              });
         },
    
         __api_listUers:function(){ 
             return axios({ 
    
             });
         }
    }

（3）在所需要的地方引入封装好方法的js:

<template>
       <div>
          <el-card class="box-card">
             <div slot="header" class="clearfix">
                 <span>用户登录</span>
              </div>
    
              <div >
                 <el-form :model="ruleForm"  label-width="100px" class="demo-ruleForm">
                     <el-form-item label="用户名" prop="pass">
                       <el-input type="text" v-model="ruleForm.username" autocomplete="off"></el-input>
                     </el-form-item>
    
                     <el-form-item label="密码" prop="pass">
                         <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
                     </el-form-item>
    
                     <el-form-item>
                         <el-button type="primary" @click="login">提交</el-button>
                         <el-button >重置</el-button>
                    </el-form-item>
                 </el-form>
              </div>
           </el-card>
        </div>
    </template>
    
    <script>
    export default { 
        data(){ 
          return{ 
             ruleForm:{ 
               username:" ",
               password:" "
             }
          }
        },
        methods:{ 
            login:function(){ 
              var _this=this;
              /* _this.$axios({ method:"post", url:"http://123.57.7.108:1024/emall/login", data:{ username:this.ruleForm.username, password:this.ruleForm.password } }).then(function(response){ if(response.data.code=="200"){ window.localStorage.setItem("token",response.data.data.token);//永久存储令牌 _this.$message({ message: '登录成功', type: 'info' }); }else{ _this.$message({ showClose: true, message: '用户名或者密码错误', type: 'warning' }); } }).catch(function(error){ _this.$alert(error); });*/
                      //改写axios
                //data就是从数据接口中获取数据对象
              _this.$api.__api_login( _this.ruleForm).then(function(data){ 
                        _this.$message({ 
                          message:'登录成功哦',
                          type:'info'
                        });
              }).catch(function(error){ 
                         _this.$message({ 
                          message:'我是catch,登录失败',
                          type:'info'
                        });
              });
            }
        }
    }
    </script>
    
    <style >
            .box-card{ 
              width: 500px;
            }
    </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lZQkRFU0hJSklF_size_16_color_FFFFFF_t_70]: /images/20210502/0021d0069cc240ad9a12f432b8bedc67.png