下一节:

  Vue axios 封装



  • 安装

    使用npm:
    npm i axios
    使用yarn:
    yarn add axios
    使用cdn:
    <script scr="src="https://unpkg.com/axios/dist/axios.min.js""></script>
    
  • 示例

    发起一个GET请求:
    //发起一个user请求,参数为给定的ID
    axios.get('/user?ID=1234')
    .then(function(respone){
          console.log(response);
    })
    .catch(function(error){
          console.log(error);
    });
    
    //上面的请求也可选择下面的方式来写
    axios.get('/user',{
          params:{
             ID:12345
          }
    })
    .then(function(response){
       console.log(response);
    })
    .catch(function(error){
       console.log(error)
    });
    
    发起一个POST请求:
    axios.post('/user',{
       firstName:'friend',
       lastName:'Flintstone'
    })
    .then(function(response){
       console.log(response);
    })
    .catch(function(error){
       console.log(error);
    });
    
    发起一个多重并发请求:
    function getUserAccount(){
       return axios.get('/user/12345');
    }
    
    function getUserPermissions(){
       return axios.get('/user/12345/permissions');
    }
    
    axios.all([getUerAccount(),getUserPermissions()])
    .then(axios.spread(function(acc,pers){
          //两个请求现在都完成,返回一个数组
    }));
    
  • 项目应用

    http.js 中 axios 封装,先直接贴代码:
    import axios from 'axios';
    import store from '../store'  //vuex
    import {ToastError} from 'assets/js/toast.js'  //提示语,可自行封装
    axios.defaults.timeout = 5000;  //超时时间设置
    axios.defaults.withCredentials = true;  //true允许跨域
    //Content-Type 响应头
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    
    if (process.env.NODE_ENV === 'production') {
       /*第二层if,根据.env文件中的VUE_APP_FLAG判断是生产环境还是测试环境*/
       if (process.env.VUE_APP_FLAG === 'pro') {
          //production 生产环境
          axios.defaults.baseURL = 'https://www.xxx.com';
       } else {
          //test 测试环境
          axios.defaults.baseURL = '';
       }
    } else {
       //dev 开发环境
       axios.defaults.baseURL = 'http://www.xxx1.com';
    }
    
    // 响应拦截器
    axios.interceptors.response.use(
       response => {
          // 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据     
          // 否则的话抛出错误
          if (response.status === 200) {
          return Promise.resolve(response);
          } else {
          return Promise.reject(response);
          }
       },
       // 服务器状态码不是2开头的的情况
       error => {
          if (error.response.status) {
          switch (error.response.status) {
             // 401: 未登录               
             case 401:
                router.replace({
                path: '/login',
                query: {
                   redirect: router.currentRoute.fullPath
                }
                });
                break;             
             case 403:
             ToastError('管理员权限已修改请重新登录')
                // 清除sessionStorage
                store.commit("qiut")
                // 跳转登录页面,并将要浏览的页面fullPath传过去,登录成功后跳转需要访问的页面 
                setTimeout(() => {
                router.replace({
                   path: '/login',
                   query: {
                      redirect: router.currentRoute.fullPath
                   }
                });
                }, 1000);
                break;
    
             // 404请求不存在
             case 404:
             ToastError('请求页面飞到火星去了')
                break;
          }
          return Promise.reject(error.response);
          }
       });
    
    
    
    /**
       * 封装get方法
       * @param url
       * @param data
       * @returns {Promise}
       */
    
    export function get(url, params = {}) {
       return new Promise((resolve, reject) => {
          axios.get(url, {
             params: params
          })
          .then(response => {
             resolve(response.data);
          })
          .catch(err => {
             reject(err)
          })
       })
    }
    
    
    /**
       * 封装post请求
       * @param url
       * @param data
       * @returns {Promise}
       */
    
    export function post(url, data = {}) {
       return new Promise((resolve, reject) => {
          axios.post(url, data)
          .then(response => {
             resolve(response.data);
          }, err => {
             reject(err)
          })
       })
    }
    
    /**
       * 封装delete请求
       * @param url
       * @param data
       * @returns {Promise}
       */
    
    export function deletes(url, data = {}) {
       return new Promise((resolve, reject) => {
          axios.delete(url, data)
          .then(response => {
             resolve(response.data);
          }, err => {
             reject(err)
          })
       })
    }
    
    /**
       * 封装put请求
       * @param url
       * @param data
       * @returns {Promise}
       */
    
    export function put(url, data = {}) {
       return new Promise((resolve, reject) => {
          axios.put(url, data)
          .then(response => {
             resolve(response.data);
          }, err => {
             reject(err)
          })
       })
    }  
    
    这里新建了一个api文件夹,里面有一个index.js来管理接口
    //引用上面的http.js文件
    import {get, post, put, deletes} from './http'
    //登录接口
    export const getLogin = (fromData)=> post('user/login',fromData)
    //退出登录接口
    export const getLoginOut = ()=> get('user/logout')
    //图片上传接口 参数 ${type},fileData
    export const SaveImg = (type,fileData)=> post(`goods/save_img/${type}`,fileData)
    
    在登录页 login.vue 中应用 axios 的封装:
    <template>
    <div class="login-big-bg">
       <div class="login-content-box">
             <div class="login-box">
                <el-alert :title="errorTip" :closable="false" v-show="errorTip" type="error" show-icon></el-alert>
                <div class="label-item">
                   <i class="user-icon"></i>
                   <input @keyup.enter="Login" class="input" type="text" placeholder="请输入用户名" v-model.trim="loginForm.username" />
                </div>
                <div class="label-item">
                   <i class="password-icon"></i>
                   <input @keyup.enter="Login" class="input" type="password" placeholder="请输入密码" v-model.trim="loginForm.password" />
                </div>
                <el-button type="primary" class="login-btn" @click="Login()">登录</el-button>
             </div>
       </div>
    </div>
    </template>
    
    <script>
    import qs from "qs"; // qs库可以表单序列化提交
    import { Message } from "element-ui"; //vue element-ui 框架
    import { getLogin } from "api";  // 调用api 登录接口
    export default {
       name: "login",
       data() {
          return {
          loginForm: {
             username: "",
             password: ""
          },
          errorTip: ""
          };
       },
       methods: {
          Login() {
             if (this.loginForm.username === "") {
                this.errorTip = "账号不能为空";
             } else if (this.loginForm.password === "") {
                this.errorTip = "密码不能为空";
             } else {
                let fromData = decodeURI(qs.stringify(this.loginForm));
                getLogin(fromData)
                .then(res => {
                   if (res.success) {
                      this.$store.commit("login", res.data); //把登录返回的数据存在vuex里
                      this.$router.push("/goods/add");  //登录成功后跳转页面
                      this.loginForm.username='';
                      this.loginForm.password='';
                   } else {
                      this.errorTip = res.data.msg;
                   }
                })
                .catch(error => {
                   this.errorTip = error;
                });
             }
          }
       }
    };
    </script>
    <style lang="less" scoped>
    //....写自己的样式
    </style>
    
下一节: