axios封装实例

研究一段时间总结一下,各位大神指点一下
https.js (axios封装的文件)

import axios from 'axios'
import store from './store.js'
// 创建axios的一个实例
const instance = axios.create({
    baseURL: 'http://api.jkw.ltd/api/v1/',
    headers:{
       //增加headers 的相关信息
        'Content-Type': 'application/x-www-form-urlencoded',
        'Access-Control-Allow-Origin':'*',//跨域
    }
})
// 一、请求拦截器 忽略
instance.interceptors.request.use(function (config) {
    if (store.state.token) {  
    // 判断是否存在token，如果存在的话，则每个http header都加上token
        config.headers.Authorization=`${store.state.token}`;
    }
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});
// 二、响应拦截器 忽略
instance.interceptors.response.use(function (response) {
    return response.data;
}, function (error) {
    // 对响应错误做点什么
    try {
        if (error.response) {
            switch (error.response.status) {
                //放各种错误验证
                case 401:
                    // 返回 401 清除token信息并跳转到登录页面
                    sessionStorage.clear()
                    this.$router.replace({
                        path: 'login',
                        query: {redirect: this.$router.currentRoute.fullPath}
                    })
                   
            }
        }
        return Promise.reject(error.response);
    } catch (e) {
        console.log(e)
    }

});
//axios的方法调用
export default function (method, url, data = null) {
    method = method.toLowerCase();
    if (method === 'post') {
        return instance.post(url, data);
    } else if (method === 'get') {
        return instance.get(url, {params: data});
    } else if (method === 'delete') {
        return instance.delete(url, {params: data});
    } else if (method === 'put') {
        return instance.put(url, data);
    } else {
        console.error('未知的method' + method);
        return false;
    }
}

route.js

import Vue from 'vue';
import Router from 'vue-router';
import store from './store.js';
// 引用组件
import home from "./view/index/home.vue"
const routes= [
		    {
		        name: 'home',
		        path: '/home',
		        component: home,
		        meta: {requireAuth: true}
		    }
    ]
    
// 页面刷新时,重新赋值token
if (sessionStorage.getItem('token')) {
    store.commit('set_token', sessionStorage.getItem('token'))
}
const router = new Router({
    routes  //页面的调用
});
router.beforeEach((to, from, next) => {
    if (to.matched.some((r) => r.meta.requireAuth)) {
        if (store.state.token) {   //判断是否已经登录
            next();
        } else {
            next({
                path: '/login',
                query: {redirect: to.fullPath}   //登录成功后重定向到当前页面
            });
        }
    } else {
        next();
    }
});

export default router;

store.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
    state:{
        token:''
    },
    mutations:{
        set_token(state, token) {
            state.token = token
            sessionStorage.token = token
        },
        del_token(state) {
            state.token = ''
            sessionStorage.removeItem('token')
        }
    }
});

main.js

import Vue from 'vue';
import store from './store.js'
import App from './view/app';
import router from './router.js';

new Vue({
    el: '#app',
    router,
    store,
    components: {App},
    template: '<App/>',
});

home.js()

import req from './http.js'  //对http.js的调用
export const OPEN_COURSE = params => req('get', 'urlXXXX', params);

app.vue

<template>
<div>
	<ul>
		 <li v-for="(item,index) in openClass" :key="index">
	                  <div @click="$router.push({path:'/course/show/'+item.id})">
	                         <div class="card-img">
	                             <img v-lazy="item.image" alt="" width="100%">
	                       </div>
	                        <div class="card-body">
	                              <p class="card-title">{{item.title}}</p>
	                              <p class="free" v-if="item.is_free">免费</p>
	                             <p class="price" v-else>￥{{item.price}}</p>
	                     </div>
	                 </div>
	        </li>	
	   </ul>
</div>
</template>
<script>
	import {OPEN_COURSE} from '../api/home'
	export default{
		name:'home',
		data(){
			return{ openClass: []}
		},
		methods:{
			 async getOpenClass() {
		        let res = await OPEN_COURSE();
		        this.openClass = res.data;
		     },
		}
	}
</script>