Vue回炉重造之三次封装axios

你好,我是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方式)

    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);
     });

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

广告时间


豆哥打广告啦!有兴趣的同学可以看看哦,CSDN官方出品,质量没得说。
Vue回炉重造之三次封装axios_第1张图片
Vue回炉重造之三次封装axios_第2张图片
Vue回炉重造之三次封装axios_第3张图片

你可能感兴趣的:(Vue.js)