axios 请求响应拦截 和 请求的封装

文件部署

 

 

 

request.js 代码

import axios from 'axios'; //引入axios
// import qs from 'qs'; //引入qs模块，用来序列化Post类型的数据
// 生成例如： admin=123&passwd=123  这种from表单格式
import store from '@/store/index'; //引入vuex
import router from '../../router';
import { tip } from '../Tip/tip'; // 提示框

/**
 * 跳转登录页
 * 携带当前页面路由，一变玩成登录后跳转回当前页面
 */
const toLogin = () => {
    router.replace({
        path: '/login',
        query: {
            redirect: router.currentRoute.fullPath
        }
    })
}

var request =  axios.create({
    baseURL: 'https://some-domain.com/api/',
    timeout: 10000, //设置请求超时
})

//post 请求的时候，我们需要加上一个请求头
request.defaults.headers.post['Content-Type'] = 'application/json;'

//发送请求之前进行拦截
//请求拦截
request.interceptors.request.use(
    config => {
        //每次发送请求之前判断 vuex 中是否存在token
        //如果存在，则统一在 http 请求的请求头 header 都加上 toeken
        //及时本地存在 token, 也有可能 token 是过期的，所以要在响应拦截器中对返回的状态进行判断
        // const token = store.state.token;
        const token = sessionStorage.getItem('Token')
        token && (config.headers['X-Access-Token'] = token); //['X-Access-Token']不是固定写法，是后端那边是啥你就天杀
        return config;
    },
    error => {
        return Promise.reject(error);
    }
)
//这里说一下token，一般是在登录完成之后，将用户的token通过localStorage或者cookie存在本地，然后用户每次在进入页面的时候（即在main.js中）,会首先从本地存储中读取token，如果token存在说明用户已经登陆过，则更新vuex中的token状态。

//响应拦截
request.interceptors.response.use(
    response => {
        // 如果返回的状态码为 200，说明接口请求成功，可以正常拿到数据
        // 否则抛出错误
        if(response.status === 200) {
            return Promise.resolve(response);
        }else{
            return Promise.reject(response);
        }
    },
    error => {
        if(error.responese.status) {
            switch(error.responese.status) {
                case 401: //没有登陆
                    //跳转回login路由，并把目标路由的url路径保存在login的query中,以便登陆后跳回来
                    toLogin();
                    break;
                case 403:
                    tip('登陆过期，请重新登录');
                    //清除 token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    setTimeout(() => {
                        toLogin();
                    }, 1000);
                    break;
                case 500:
                    tip('报了500 没有token那种')
                    break;
            }
        }else{
            throw(error)
        }
    }
)

/**
 * 封装post 和 get 方法
 * @param { string } url [接口地址]
 * @param { object } data [参数]
 * @param { string } method [请求方式]
 * @param { any } option [可选项]
 */
export function http ( url, data, method = 'get', option ) {
    return new Promise ( (resolve, reject) => {
        request({
            method,
            url,
            data,
            ...option
        }).then(
            res => {
                resolve(res.data)
            }
        ).catch(
            err => {
                reject(err.data)
            }
        )
    } )
}

export default request

 

当然 request.js 依赖 tip 的提示框

/**
 * 提示框的封装
 * 这里使用了vantUi
 */
import { Toast } from 'vant'; // vant的toast提示框组件

/**
 * vant 提示框
 * 禁止点击蒙层，现实一秒后关闭
 * @param { string } msg [提示的信息]
 */
export const tip = msg => {
    Toast({
        message: msg,
        duration: 1000,
        forbidClick: true
    })
}

 

为了将 api 请求 统一管理

import { http } from './request'
import base from './base.js'

//登录
const login = function(params) {
    return http(base.mytest+'sys/mLogin', params, 'post')
}

const add = function(params) {
    return http(base.mytest+'wechat/plaOperationInfo/list', params, 'get')
}
export default {
    login,
    add
}

 

然后到 main.js 入口文件，为了不用在每个页面引入 api

便将其挂在 Vue 类的原型上面

import Vue from 'vue'
import App from './App.vue'
import router from '@/router'
import store from './store/index'
import api from './utils/request/api'

// import './promission'

Vue.prototype.$api = api
Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store,
  router,
}).$mount('#app')

 

api.js 依赖的 base.js 根路径

export default {
    dev: 'http://vm.boy.com/cms_ipk',
    pru: 'http://www.boy.com',
    mytest: 'http://121.191.152.68:8000/jee-bot/'
}