aixos封装

前言

整理axios的封装，baseURL、token、请求前及请求后的处理。

封装

1.引入axios及element

import axios from 'axios'
import {Message} from 'element-ui';

2.设置变量

let fail = 0 //失败
let error = -1 //异常
let noLogin = -2 //未登录

3.创建axios实例

const service = axios.create({
    baseURL: process.env.VUE_APP_URL,//访问地址
    timeout: 60000, //设置请求超时时间
    withCredentials:true //设置跨域是否允许携带凭证(开发环境需要配置，因为要使用跨域；生产环境可能需要将其注释掉！)
})

4.请求前拦截，添加token

//拦截请求设置header，添加token
service.interceptors.request.use(request => {
   if (localStorage.getItem('Authorization')) {
       request.headers.Authorization = localStorage.getItem('Authorization');
   } 
    return request
}, error => {
    return Promise.reject(error)
})

5.请求后拦截，处理返回值

service.interceptors.response.use(response => {
    const res = response.data
    if (!res) {
        console.log("没有返回值")
        return
    }
    if (res.resCode == noLogin) {//未登录
        Message.error({
            message: res.resMsg,
            showClose: true
        })
        router.replace({path: '/login'});
        return Promise.reject(res)
    }
    return res.data
}, error => {
    return Promise.reject(error)
})

6.抛出

export default service

7.使用

import request from '@/utils/request'
//登录
export function login(data) {
    return request({
        url: "/api/user/login",
        method: "POST",
        data: data
    })
}