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

我会带着你远行 2023-01-18 04:08 245阅读 0赞

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

> 先封装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>

完成 ！