vue中Axios的封装和API接口的管理

npm install axios --save-dev; //安装axios

//在http.js中引入axios
import axios from 'axios'; //引入axios
import QS from 'qs'; //引入qs模块，用来序列化post类型的数据，后面会提到
//vant的toast提示框组件，大家可根据自己的ui组件更改。
import { Toast } from 'vant';

//环境的切换
if (process.env.NODE_ENV == 'development') {
    axios.defaults.baseURL = 'https://www.baidu.com';}
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

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

//先导入vuex,因为我们要使用到里面的状态对象
//vuex的路径根据自己的路径去写
import store from '@/store/index';
//请求拦截器axios.interceptors.request.use(
    config =>{
        //每次发送请求之前判断vuex中是否存在token
        //如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
        //即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断
        const token =store.state.token;
        token && (config.headers.Authorization =token);
        returnconfig;
    },
    error =>{
        returnPromise.error(error);
})

//响应拦截器
axios.interceptors.response.use(
    response =>{
        //如果返回的状态码为200，说明接口请求成功，可以正常拿到数据
        //否则的话抛出错误
        if (response.status === 200) {
            returnPromise.resolve(response);
        } else{
            returnPromise.reject(response);
        }
    },
    //服务器状态码不是2开头的的情况
    //这里可以跟你们的后台开发人员协商好统一的错误状态码
    //然后根据返回的状态码进行一些操作，例如登录过期提示，错误提示等等
    //下面列举几个常见的操作，其他需求可自行扩展
    error =>{
        if(error.response.status) {
            switch(error.response.status) {
                //401: 未登录
                //未登录则跳转登录页面，并携带当前页面的路径
                //在登录成功后返回当前页面，这一步需要在登录页操作。
                case 401:
                    router.replace({
                        path: '/login',
                        query: {
                            redirect: router.currentRoute.fullPath
                        }
                    });
                    break;
                //403 token过期
                //登录过期对用户进行提示
                //清除本地token和清空vuex中token对象
                //跳转登录页面
                case 403:
                      Toast({
                        message: '登录过期，请重新登录',
                        duration: 1000,
                        forbidClick: true
                    });
                    //清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    //跳转登录页面，并将要浏览的页面fullPath传过去，登录成功后跳转需要访问的页面
                    setTimeout(() =>{
                        router.replace({
                            path: '/login',
                            query: {
                                redirect: router.currentRoute.fullPath
                            }
                        });
                    }, 1000);
                    break;
                //404请求不存在
                case 404:
                    Toast({
                        message: '网络请求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                //其他错误，直接抛出错误提示
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            returnPromise.reject(error.response);
        }
    }
});

/**
  * get方法，对应get请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export functionget(url, params){
    return new Promise((resolve, reject) =>{
        axios.get(url, {
            params: params
        }).then(res =>{
            resolve(res.data);
        }).catch(err =>{
            reject(err.data)
    })
});}

/**
  * post方法，对应post请求
  * @param {String} url [请求的url地址]
  * @param {Object} params [请求时携带的参数]
  */
export functionpost(url, params) {
    return new Promise((resolve, reject) =>{
          axios.post(url, QS.stringify(params))
        .then(res =>{
            resolve(res.data);
        })
        .catch(err =>{
            reject(err.data)
        })
    });
}

举个例子：
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(）
-------------
axios.post('/user', {
    ID: 12345
  })
  .then(）
不过没关系在我们暴露出去的 get 和 post 函数中，这里已经封装好了，传参的格式都为对象，
get('/user', {
    ID: 12345
  })
  .then(）
-----------
post('/user', {
    ID: 12345
  })
  .then(）
*/

/**
* api接口统一管理
*/
import { get, post } from './http'

export const apiAddress = p => post('api/v1/users/my_address/address_edit_before', p);

import { apiAddress } from '@/request/api';//导入我们的api接口
export default{
    name: 'Address',
    created () {
        this.onLoad();
    },
    methods: {
        //获取数据
onLoad() {
            //调用api接口，并且提供了两个参数
apiAddress({
                type: 0,
                sort: 1
            }).then(res =>{
                //获取数据成功后的其他操作
………………
            })
        }
    }
}

import { apiAddress } from '@/request/api';//导入我们的api接口
export default{
    name: 'Address',
    created () {
        this.onLoad();
    },
    methods: {
        //获取数据
async onLoad() {
            //调用api接口，并且提供了两个参数
            let data =await apiAddress({
                type: 0,
                sort: 1
            });
            //data 就是获取到的数据
             //获取数据成功后的其他操作
………………
        }
    }
}
        

/**
  * api接口的统一出口
  */
//文章模块接口
import article from '@/api/article';
//其他模块的接口……
//导出接口
export default{
    article,
    //……
}

/**
  * 接口域名的管理
  */
const base ={
    sq: 'https://xxxx111111.com/api/v1',
    bd: 'http://xxxxx22222.com/api',
    proxy: '/api' //这个地方也可以用来写你反向代理的暗号
}
export default base;

/**
  * article模块接口列表
  */
import base from './base'; //导入接口域名列表
import axios from '@/utils/http'; //导入http中创建的axios实例
import qs from 'qs'; //根据需求是否导入qs模块

const article ={
    //新闻列表
articleList () {
        return axios.get(`${base.sq}/topics`);
},
    //新闻详情,演示
articleDetail (id, params) {
        return axios.get(`${base.sq}/topic/${id}`, {
            params: params
        });
    },
    //post提交
login (params) {
        return axios.post(`${base.sq}/accesstoken`, qs.stringify(params));
}
    //其他接口…………
}
export default article;

import Vue from 'vue'
import App from './App'
import router from './router' //导入路由文件
import store from './store' //导入vuex文件
import api from './api' //导入api接口

Vue.prototype.$api = api; //将api挂载到vue的原型上

methods: {
    onLoad(id) {
        this.$api.article.articleDetail(id, {
            api: 123
        }).then(res=>{
            //执行某些操作
})
    }
}

<template>
    <div id="app">
        <div v-if="!network">
            <h3>我没网了</h3>
            <div @click="onRefresh">刷新</div>
        </div>
        <router-view/>
    </div>
</template>
<script>
    import { mapState } from 'vuex';
    export default{
        name: 'App',
        computed: {
            ...mapState(['network'])
        },
        methods: {
            //通过跳转一个空页面再返回的方式来实现刷新当前页面数据的目的
onRefresh () {
                this.$router.replace('/refresh')
            }
        }
    }
</script>

//refresh.vue
beforeRouteEnter (to, from, next) {
    next(vm =>{
        vm.$router.replace(from.fullPath)
    })
}