Vue回炉重造之三次封装axios

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

---

欢迎阅读本博文，本博文主要讲述【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方式)​

let postData = {
      phone: this.loginForm.account.toString(),
      password: this.loginForm.pass
    };
    login(postData)
      .then(res => {
        if (res.code == 0) {
          console.log(res);
        } 
      })
      .catch(err => {
        console.log(err);
      });

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

let formData = new FormData();
     formData.append("phone", this.ruleForm.phone.toString());
     formData.append("password", this.ruleForm.pass);
     register(formData, { isUpload: true })
       .then(res => {
         console.log(res);
       })
       .catch(err => {
         console.log(err);
       });

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

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

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

let postData = {
     page: page,
     size: size
   };
   courses(postData)
     .then(res => {
       console.log(res);
     })
     .catch(err => {
       console.log(err);
     });

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

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

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