1. 程式人生 > 實用技巧 >axios請求介面封裝

axios請求介面封裝

配置頁:

import axios from "axios";
import mconfig from "./config"
import {Message} from "element-ui"
import router from "../router"
axios.defaults.baseURL = mconfig.hosts;
axios.defaults.headers["Content-Type"] = "application/json";
axios.interceptors.request.use(
    function(config) {
        let token = JSON.parse(sessionStorage.getItem("token"));
        token && (config.headers.cnm = token);
        return config;
    },
    function(err) {
        //console.error(err);
    }
);
axios.interceptors.response.use(function(res){
    if(res.status==200){
        switch(res.data.code){
            case 200:
                return res;
                break;
            case 300:
                Message({
                    type:"error",
                    message:res.data.message?res.data.message:res.data.msg
                })
                break;
            case 500:
                Message({
                    type:"error",
                    message:res.data.message?res.data.message:res.data.msg
                })
                break;
            case 400:
                Message({
                    type:"error",
                    message:"請完整填寫表單"
                })
                break;
            case 401:
                Message({
                    type:"error",
                    message:res.data.message?res.data.message:res.data.msg
                })
                sessionStorage.removeItem("token");
                sessionStorage.removeItem("store");
                router.push("/login")
                break;
            case 403:
                Message({
                    type:"error",
                    message:res.data.message?res.data.message:res.data.msg
                })
                break;
            case 406:
                Message({
                    type:"error",
                    message:res.data.message?res.data.message:res.data.msg
                })
                break;
        }
        return Promise.reject(res)
    }else
    {
    }
    return res
},error=>{
    Message({
        type:"error",
        message:"網路出現波動,請稍後重試"
    })
    return Promise.reject(error)
})
export default axios;

  

封裝:

import promise from 'es6-promise'
promise.polyfill()
import "core-js/stable";
import "regenerator-runtime/runtime";
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import './routerConfig'
import "@/assets/css/global.css"
import './plugins/element.js'
import 'element-ui/lib/theme-chalk/index.css'
import axios from '@/utils/axiosConfig.js'
// import CookieJs from '@/utils/Cookie.js'
import mconfig from  "@/utils/config.js"
Vue.prototype.$http = axios
Vue.prototype.mconfig=mconfig
Vue.config.productionTip = false

new Vue({
  router,
  store,
  created() {
    // 通過sessionStorage進行狀態儲存
    sessionStorage.getItem('originStore') || sessionStorage.setItem('originStore', JSON.stringify(this.$store.state))
    sessionStorage.getItem('store') && this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem('store'))));
    window.addEventListener('beforeunload', () => {
      sessionStorage.setItem('store', JSON.stringify(this.$store.state))
    });
  },
  mounted() {
    // CookieJs.generateCookie()
  },
  render: function (h) {
    return h(App)
  }
}).$mount('#app')