Vue回炉重造之三次封装axios

川长思鸟来 2021-08-29 02:17 461阅读 0赞

> 你好，我是**Vam的金豆之路**，可以叫我豆哥。2019年年度博客之星、技术领域博客专家。主要领域：**前端开发**。我的微信是 **maomin9761**，有什么疑问可以加我哦，自己创建了一个微信技术交流群，可以加我邀请你一起交流学习。最后自己也创建了一个微信公众号：**前端历劫之路**，欢迎关注。

--------------------

> 欢迎阅读本博文，本博文主要讲述【Vue回炉重造之三次封装axios（二次封装axios下加入更多功能）】，文字通俗易懂，如有不妥，还请多多指正。

## 源码目录 ##

--------------------

在`src目录`下建立一个`request`文件夹。里面建立两个文件：

*  http.js
 *  api.js

## 源码内容 ##

--------------------

`http.js`

import axios from 'axios' // 引入axios
    import store from '../store/index' // 引入Vuex
    import router from '../router' // 引入vue-router
    import {  Message } from 'element-ui' //局部引入UI框架组件
    // 环境的切换
    if (process.env.NODE_ENV === 'development') { 
      axios.defaults.baseURL = 'https://xxx/' // 开发环境
    } else if (process.env.NODE_ENV === 'debug') { 
      axios.defaults.baseURL = '' // 调试环境
    } else if (process.env.NODE_ENV === 'production') { 
      axios.defaults.baseURL = 'https://xxx/' // 生产环境
    }
    axios.defaults.timeout = 10000;
    // 请求拦截器
    axios.interceptors.request.use(
      config => { 
      if (localStorage.getItem('Authorization')) { 
        config.headers.Authorization = `Bearer` + " " + localStorage.getItem('Authorization'); //查看是否存在token
        return config;
      } else if (config.isUpload) { 
        config.headers = {  'Content-Type': 'multipart/form-data'} // 根据参数是否启用form-data方式
        return config;
      } else { 
        config.headers = {  'Content-Type': 'application/json' }
        return config;
    }
    },
      error => { 
        return Promise.error(error)
      })
    
    // 响应拦截器
    axios.interceptors.response.use(
      // 服务码是200的情况
      response => { 
        if (response.status === 200) { 
          switch (response.data.code) { 
            // 未登录
            case 3:
              Message({ 
                message: '未登录',
                type: 'error',
                offset:380,
                duration:1000
              });
              // 清除登录状态，返回首页
              localStorage.removeItem('Authorization')
              localStorage.removeItem('info')
              store.commit("changeNull")
              if (router.app._route.name != 'home') { 
                setTimeout(() => { 
                  router.push({ 
                    path: '/',
                  })
                }, 1000)
              }
              break;
            // 课程已添加
            case 100:
                Message({ 
                  message: '课程已添加',
                  type: 'error',
                  offset:380,
                  duration:1000
                });
            break;
            // token过期
            case 5:
              Message({ 
                message: '登录过期，请重新登录',
                type: 'error',
                offset:380,
                duration:1000
              });
              // 清除登录状态，返回首页
              localStorage.removeItem('Authorization')
              localStorage.removeItem('info')
              store.commit("changeNull")
              if (router.app._route.name != 'home') { 
                setTimeout(() => { 
                  router.push({ 
                    path: '/',
                  })
                }, 1000)
              }
              break;
          }
          return Promise.resolve(response);
        } else { 
          return Promise.reject(response)
        }
      },
      // 服务器状态码不是200的情况
      error => { 
        if (error.response.status) { 
          switch (error.response.status) { 
            // 404请求不存在
            case 404:
              Message({ 
                message: '网络请求不存在',
                type: 'error',
                offset:380,
                duration:1000
              });
              break;
            // 其他错误，直接抛出错误提示
            default:
              Message({ 
                message: error.response.data.message,
                type: 'error',
                offset:380,
                duration:1000
              });
          }
          return Promise.reject(error.response)
        }
      }
    )
    
    /** * get方法，对应get请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] * @param {Object} config [请求时url后直接加的参数，默认为空] */
    export function get(url, params,config = { add: '' }) { 
      return new Promise((resolve, reject) => { 
        axios.get(url,{ 
          params: params
        },config).then(res => { 
          resolve(res.data)
        }).catch(err => { 
          reject(err.data)
        })
      })
    }
    /** * post方法，对应post请求 * @param {String} url [请求的url地址] * @param {Object} params [请求时携带的参数] * @param {Object} config [是否启用multipart/form-data格式请求，默认为false] */
    export function post(url, params,config = { isUpload: false }) { 
      return new Promise((resolve, reject) => { 
        axios.post(url, params,config)
          .then(res => { 
            resolve(res.data)
          })
          .catch(err => { 
            reject(err.data)
          })
      })
    }

`api.js`

import { get,post} from './http';
    // post格式
    export const register = p => post('/api/user/register', p);
    export const login = p => post('/api/user/login', p); 
    // get格式
    export const courses = g => get('/api/courses', g);
    export const coursesXq = (g,q) => get('/api/courses/'+q.add, g); 
    export const getList = g => get('/api/list', g);

## 请求示例 ##

--------------------

**post请求(不需要form-data方式)**

**post请求(需要form-data方式)**

**get请求(直接在请求接口后加参数的情况，如：/api/\{id\})**

coursesXq(null,{ add:this.$route.params.id}).then(res=>{ 
          console.log(res)
        }).catch(err => { 
          console.log(err);
        });

**get请求(需要传一组参数)**

**get请求(没有参数直接请求即可)**

getList()
         .then(res => { 
           console.log(res);
         })
         .catch(err => { 
           console.log(err);
         });

> 谢谢阅读，如果觉得有感触，麻烦帮忙点个赞，关个注吧！

## 广告时间 ##

--------------------

豆哥打广告啦！有兴趣的同学可以看看哦，**CSDN官方出品**，质量没得说。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70]: /images/20210813/a20bab80c9cb426caad3f71a842a19b6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 1]: /images/20210813/fa6b0f5ab4ba4a14a30975e66b02f1f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MDQ1NjQ1_size_16_color_FFFFFF_t_70 2]: /images/20210813/c7690fa8bd9449bf907aecf48d8cf0eb.png