vue项目封装axios

废话不多说直接上代码 ! ! !

在src目录下创建http文件夹 然后创建env.js、request.js、api.js
1、在env.js 封装环境地址

const env = {
    // 线上环境
    prod: {
        baseURL: "https://www.liulongbin.top:8888"
    },
}
export default env

2、在request.js 封装axios

//引入axios实例
import axios from "axios";
//引入Element UI组件
import { Message } from 'element-ui';

//引入env.js
import baseURL from "./env";
// 创建axios实例 写入baseURL和超时器
const service = axios.create({
    baseURL: `${baseURL.prod.baseURL}/api/private/v1`,
    timeout: 2000,
});
//添加请求拦截
service.interceptors.request.use(function (config) {
    console.log('请求拦截:', config);
    if (config.url !== 'login') {
        const token = sessionStorage.getItem('token');
        if (token) {
            config.headers['Authorization'] = token
        }
    }
    return config;
}, function (error) {
    return Promise.reject(error);
});

//添加响应拦截
service.interceptors.response.use(function (response) {
    //成功
    // console.log(response);
    const res = response.data;
    const resultOk = [200, 201, 204]
    if (resultOk.includes(res.meta.status)) {
        Message({
            message: res.meta.msg,
            type: 'success'
        })
        return res.data;
    }
    return Promise.reject('返回数据有误，请检查');
}, function (error) {
    return Promise.reject(error);
});

export default service

3、在api.js //封装接口

import request from "./request";
//封装登录接口
export function login(data) {
    return request({
        url: "/login",
        method: 'POST',
        data
    })
}
export function menus(data) {
    console.log(data);
    return request({
        url: "/menus",
        method: 'GET',
        data
    })
}
export function users(params) {
    // console.log(data);
    return request({
        url: "/users",
        method: 'GET',
        params
    })
}

4、在需要的组件中引入 例如

import { login } from "../http/api";

 this.$refs.loginFrom.validate(async (valid) => {
        if (!valid) return;
        const res = await login(this.loginFrom);
        console.log("await结果:", res);
        sessionStorage.setItem("token", res.token);

        console.log(this.$route.query.redirect);
        this.$router.push({ path: "/home" });
      });