Vue项目 axios请求封装+接口封装

前言： 接口进行封装，方便后期维护

先封装axios ( utils => axios.js )

import axios from "axios"
import router from '../router'
import store from '../store';

axios.defaults.baseURL = process.env.NODE_ENV == 'development' ? 'XXXXX' : 'XXX'  //根据环境判断接口
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.interceptors.request.use(
    config => {
        if (localStorage.getItem('token')) {
            //token字段是要和后端协商好的
            config.headers.common["token"] = localStorage.getItem('token');
            // debugger
        }
        return config;
    },
    error => {
        return Promise.reject(error);
    });

// http response 拦截器
axios.interceptors.response.use(
    response => {
        if (response.data.code == 999) {
            localStorage.clear()
            router.replace({
                path: "/login",
                query: {
                    redirect: router.currentRoute.fullPath
                } //从哪个页面跳转
            })
        }
        // }
        return response;
    },
    error => {
        return Promise.reject(error)
    }
)

// 请求拦截器
axios.interceptors.request.use(

    config => {
        // 改变vuex中的isLoading状态数据，当为true，loading显示
        store.state.isLoading = true //我增加了全局loading，不需要可以删除
        return config;
    },
    error => {
        return Promise.error(error);
    }
);

// 响应拦截器
axios.interceptors.response.use(
    response => {
        // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
        // 否则的话抛出错误
        if (response.status === 200) {
            //loading隐藏
            store.state.isLoading = false //我增加了全局loading，不需要可以删除
            return Promise.resolve(response.data);
        } else {
            return Promise.reject(response.data);
        }
    },
    error => {
        if (error.response.status) {
            return Promise.reject(error.response);
        }
    }
);



export default axios

接口文件 （ service=> home.js ）

// 接口封装 需要的接口都放在js里面
import axios from '../utils/axios'

export function getHome() {
  return axios.post('/merber/index');
}

页面使用

<template>
  <div class="home">
    <button @click="getData">点击测试接口</button>
  </div>
</template>

<script>
import { getHome } from "@/service/home";
export default {
  name: "Home",
  methods: {
    async getData() {
      const data = await getHome();
      console.log(data);
    },
  },
};
</script>

完成 ！