vue中Axios的封装和接口管理基本上就是参照着大佬的代码进行的，自己多理解多写几遍就能好很多。项目的src目录下建

基本上就是参照着大佬的代码进行的，自己多理解多写几遍就能好很多。

1.结构：

项目的src目录下建立一个request的文件夹。

src                        
├─ plugins            
│  └─ element.js      
├─ request            
│  ├─ api.js          
│  └─ http.js         
├─ router             
│  └─ index.js        
├─ store              
│  └─ index.js        
├─ views              
│  ├─ About.vue       
│  ├─ Home.vue        
│  ├─ Login.vue       
│  ├─ Notes.vue       
│  ├─ Test.vue        
│  └─ User.vue        
├─ App.vue            
└─ main.js

2.Axios封装代码：

axios.get()方法和axios.post()在提交数据时参数的书写方式还是有区别的。

get:get的第2个参数是一个{}，然后这个对象的params属性值是一个参数对象。
post:post的第2个参数就是一个参数对象。

//http.js

import axios from "axios";
import QS from "qs";//引入qs模块，用来序列化post类型的数据
import store from "../store/index";
import router from "../router";
import { Message } from 'element-ui';

//完整的接口连接
// https://free-api.heweather.net/s6/weather/now?location=dalian&key=c56d9631e4b24ccca21a6e096b12c8a4

// axios.defaults.baseURL = "https://free-api.heweather.net";

//环境的切换

if (process.env.NODE_ENV == "development") {
    axios.defaults.baseURL = "https://free-api.heweather.net";
} else if (process.env.NODE_ENV == "debug") {
    axios.defaults.baseURL = "https://www.ceshi.com";
} else if (process.env.NODE_ENV == "production") {
    axios.defaults.baseURL = "https://www.production.com";
}
// 请求超时时间
axios.defaults.timeout = 10000;
// 设置post请求头
axios.defaults.headers.post["Content-Type"] = 'application/x-www-form-urlencoded;charset=UTF-8';

//请求拦截器
axios.interceptors.request.use(
    config => {
        console.log("我是请求拦截器的config", config);
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
        // const token = store.state.token;        
        // token && (config.headers.Authorization = token);  
        return config
    },
    error => {
        return Promise.error(error);
    }
);
// 响应拦截器
axios.interceptors.response.use(
    response => {
        console.log("我是响应拦截器",response)
        if (response.status == 200) {
            return Promise.resolve(response)
        } else {
            return Promise.reject(response);
        }
    },
// 服务器状态码不是2开头的的情况
// 这里可以跟你们的后台开发人员协商好统一的错误状态码    
// 然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
// 下面列举几个常见的操作，其他需求可自行扩展

    error => {
        if (error.response.status) {
            switch (error.response.status) {
                case 401:
                    router.replace({
                        path: "/login",
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                    break;
                case 403:
                    //弹出窗口
                    Message({
                        message:"您的token过期了"
                    })
                    //清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                    setTimeout(() => {
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        })
                    }, 1500)
                    break;
                case 404:
                    Message({
                        message:"404 not found ^_^ ！"
                    })
                    break;
                default:
                    Message({
                        message:"error.response.data.message"
                    })
            }
            //该返回的错误信息还是要返回的
            return Promise.reject(error.response);
        }
    }
)
//封装的get请求
export function get(url, params) {
    return new Promise((resolve, reject) => {
        axios.get(url, {
            params: params
        }).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data)
        })
    })
}
// 封装的post请求
export function post(url, params) {
    return new Promise((resolve, reject) => {
        //这里QS的序列化
        axios.post(url, QS.stringify(params)).then(res => {
            resolve(res.data)
        }).catch(err => {
            reject(err.data);
        })
    })
}

3.api.js文件的接口管理及其使用

a):api.js文件的接口封装：

//api.js
// api接口统一管理
import {get} from "./http";

//  /s6/weather/now
export const apiWeather = p => get("s6/weather/now",p);

b):apiweather天气接口的使用：

//Home.vue
<template>
<div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <router-view></router-view>
</div>
</template>

<script>
// @ is an alias to /src
import {
    apiWeather
} from '@/request/api.js';
export default {
    name: 'Home',
    components: {},
    created() {
      //这里面调用apiWeather的方法
        apiWeather({
            location: "dalian",
            key: "c56d9631e4b24ccca21a6e096b12c8a4"
        }).then(res => {
            console.log("我是请求回包", res)
        })
    }
};
</script>

文章中后续的axios更新的封装思路也都大同小异，这里就没有记录。加油~！奥利给！