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官方出品，質量沒得說。