Vue回爐重造之三次封裝axios

源碼目錄

在src目錄下建立一個request文件夾。里面建立兩個文件：

    http.js
    api.js

源碼內(nèi)容

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框架組件
// 環(huán)境的切換
if (process.env.NODE_ENV === 'development') {
  axios.defaults.baseURL = 'https://xxx/' // 開發(fā)環(huán)境
} else if (process.env.NODE_ENV === 'debug') {
  axios.defaults.baseURL = '' // 調試環(huán)境
} else if (process.env.NODE_ENV === 'production') {
  axios.defaults.baseURL = 'https://xxx/' // 生產(chǎn)環(huán)境
}
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'} // 根據(jù)參數(shù)是否啟用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
          });
          // 清除登錄狀態(tài)，返回首頁
          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
          });
          // 清除登錄狀態(tài)，返回首頁
          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)
    }
  },
  // 服務器狀態(tài)碼不是200的情況
  error => {
    if (error.response.status) {
      switch (error.response.status) {
        // 404請求不存在
        case 404:
          Message({
            message: '網(wǎng)絡請求不存在',
            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 [請求時攜帶的參數(shù)]
 * @param {Object} config [請求時url后直接加的參數(shù)，默認為空]
 */
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 [請求時攜帶的參數(shù)]
 * @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請求(直接在請求接口后加參數(shù)的情況，如：/api/{id})

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



get請求(需要傳一組參數(shù))

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



get請求(沒有參數(shù)直接請求即可)

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

作者：Vam的金豆之路

主要領域：前端開發(fā)

我的微信：maomin9761

微信公眾號：前端歷劫之路