npm install axios; // 安裝axios

// 在http.js中引入axios
import axios from 'axios'; // 引入axios
import QS from 'qs'; // 引入qs模塊，用來序列化post類型的數(shù)據(jù)，后面會(huì)提到
// vant的toast提示框組件，大家可根據(jù)自己的ui組件更改。
import { Toast } from 'vant'; 

// 環(huán)境的切換
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';

// 先導(dǎo)入vuex,因?yàn)槲覀円褂玫嚼锩娴臓顟B(tài)對(duì)象
// vuex的路徑根據(jù)自己的路徑去寫
import store from '@/store/index';

// 請(qǐng)求攔截器axios.interceptors.request.use(    
    config => {        
        // 每次發(fā)送請(qǐng)求之前判斷vuex中是否存在token        
        // 如果存在，則統(tǒng)一在http請(qǐng)求的header都加上token，這樣后臺(tái)根據(jù)token判斷你的登錄情況
        // 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷 
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => {        
        return Promise.error(error);    
})

// 響應(yīng)攔截器
axios.interceptors.response.use(    
    response => {   
        // 如果返回的狀態(tài)碼為200，說明接口請(qǐng)求成功，可以正常拿到數(shù)據(jù)     
        // 否則的話拋出錯(cuò)誤
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }    
    },    
    // 服務(wù)器狀態(tài)碼不是2開頭的的情況
    // 這里可以跟你們的后臺(tái)開發(fā)人員協(xié)商好統(tǒng)一的錯(cuò)誤狀態(tài)碼    
    // 然后根據(jù)返回的狀態(tài)碼進(jìn)行一些操作，例如登錄過期提示，錯(cuò)誤提示等等
    // 下面列舉幾個(gè)常見的操作，其他需求可自行擴(kuò)展
    error => {            
        if (error.response.status) {            
            switch (error.response.status) {                
                // 401: 未登錄
                // 未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當(dāng)前頁面的路徑
                // 在登錄成功后返回當(dāng)前頁面，這一步需要在登錄頁操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { 
                            redirect: router.currentRoute.fullPath 
                        }
                    });
                    break;

                // 403 token過期
                // 登錄過期對(duì)用戶進(jìn)行提示
                // 清除本地token和清空vuex中token對(duì)象
                // 跳轉(zhuǎn)登錄頁面                
                case 403:
                     Toast({
                        message: '登錄過期，請(qǐng)重新登錄',
                        duration: 1000,
                        forbidClick: true
                    });
                    // 清除token
                    localStorage.removeItem('token');
                    store.commit('loginSuccess', null);
                    // 跳轉(zhuǎn)登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉(zhuǎn)需要訪問的頁面 
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 

                // 404請(qǐng)求不存在
                case 404:
                    Toast({
                        message: '網(wǎng)絡(luò)請(qǐng)求不存在',
                        duration: 1500,
                        forbidClick: true
                    });
                    break;
                // 其他錯(cuò)誤，直接拋出錯(cuò)誤提示
                default:
                    Toast({
                        message: error.response.data.message,
                        duration: 1500,
                        forbidClick: true
                    });
            }
            return Promise.reject(error.response);
        }
    }    
});

/**
 * get方法，對(duì)應(yīng)get請(qǐng)求
 * @param {String} url [請(qǐng)求的url地址]
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)]
 */
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方法，對(duì)應(yīng)post請(qǐng)求 
 * @param {String} url [請(qǐng)求的url地址] 
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)] 
 */
export function post(url, params) {
    return new Promise((resolve, reject) => {
         axios.post(url, QS.stringify(params))
        .then(res => {
            resolve(res.data);
        })
        .catch(err =>{
            reject(err.data)
        })
    });
}

/**   
 * api接口統(tǒng)一管理
 */
import { get, post } from './http'

http://www.baiodu.com/api/v1/users/my_address/address_edit_before

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

import { apiAddress } from '@/request/api';// 導(dǎo)入我們的api接口
export default {        
    name: 'Address',    
    created () {
        this.onLoad();
    },
    methods: {            
        // 獲取數(shù)據(jù)            
        onLoad() {
            // 調(diào)用api接口，并且提供了兩個(gè)參數(shù)                
            apiAddress({                    
                type: 0,                    
                sort: 1                
            }).then(res => {
                // 獲取數(shù)據(jù)成功后的其他操作
                ………………                
            })            
        }        
    }
}

/**axios封裝
 * 請(qǐng)求攔截、相應(yīng)攔截、錯(cuò)誤統(tǒng)一處理
 */
import axios from 'axios';import QS from 'qs';
import { Toast } from 'vant';
import store from '../store/index'

// 環(huán)境的切換
if (process.env.NODE_ENV == 'development') {    
    axios.defaults.baseURL = '/api';
} else if (process.env.NODE_ENV == 'debug') {    
    axios.defaults.baseURL = '';
} else if (process.env.NODE_ENV == 'production') {    
    axios.defaults.baseURL = 'http://api.123dailu.com/';
}

// 請(qǐng)求超時(shí)時(shí)間
axios.defaults.timeout = 10000;

// post請(qǐng)求頭
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';

// 請(qǐng)求攔截器
axios.interceptors.request.use(    
    config => {
        // 每次發(fā)送請(qǐng)求之前判斷是否存在token，如果存在，則統(tǒng)一在http請(qǐng)求的header都加上token，不用每次請(qǐng)求都手動(dòng)添加了
        // 即使本地存在token，也有可能token是過期的，所以在響應(yīng)攔截器中要對(duì)返回狀態(tài)進(jìn)行判斷
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => {        
        return Promise.error(error);    
    })

// 響應(yīng)攔截器
axios.interceptors.response.use(    
    response => {        
        if (response.status === 200) {            
            return Promise.resolve(response);        
        } else {            
            return Promise.reject(response);        
        }    
    },
    // 服務(wù)器狀態(tài)碼不是200的情況    
    error => {        
        if (error.response.status) {            
            switch (error.response.status) {                
                // 401: 未登錄                
                // 未登錄則跳轉(zhuǎn)登錄頁面，并攜帶當(dāng)前頁面的路徑                
                // 在登錄成功后返回當(dāng)前頁面，這一步需要在登錄頁操作。                
                case 401:                    
                    router.replace({                        
                        path: '/login',                        
                        query: { redirect: router.currentRoute.fullPath } 
                    });
                    break;
                // 403 token過期                
                // 登錄過期對(duì)用戶進(jìn)行提示                
                // 清除本地token和清空vuex中token對(duì)象                
                // 跳轉(zhuǎn)登錄頁面                
                case 403:                     
                    Toast({                        
                        message: '登錄過期，請(qǐng)重新登錄',                        
                        duration: 1000,                        
                        forbidClick: true                    
                    });                    
                    // 清除token                    
                    localStorage.removeItem('token');                    
                    store.commit('loginSuccess', null);                    
                    // 跳轉(zhuǎn)登錄頁面，并將要瀏覽的頁面fullPath傳過去，登錄成功后跳轉(zhuǎn)需要訪問的頁面
                    setTimeout(() => {                        
                        router.replace({                            
                            path: '/login',                            
                            query: { 
                                redirect: router.currentRoute.fullPath 
                            }                        
                        });                    
                    }, 1000);                    
                    break; 
                // 404請(qǐng)求不存在                
                case 404:                    
                    Toast({                        
                        message: '網(wǎng)絡(luò)請(qǐng)求不存在',                        
                        duration: 1500,                        
                        forbidClick: true                    
                    });                    
                break;                
                // 其他錯(cuò)誤，直接拋出錯(cuò)誤提示                
                default:                    
                    Toast({                        
                        message: error.response.data.message,                        
                        duration: 1500,                        
                        forbidClick: true                    
                    });            
            }            
            return Promise.reject(error.response);        
        }       
    }
);
/** 
 * get方法，對(duì)應(yīng)get請(qǐng)求 
 * @param {String} url [請(qǐng)求的url地址] 
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)] 
 */
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方法，對(duì)應(yīng)post請(qǐng)求 
 * @param {String} url [請(qǐng)求的url地址] 
 * @param {Object} params [請(qǐng)求時(shí)攜帶的參數(shù)] 
 */
export function post(url, params) {    
    return new Promise((resolve, reject) => {         
        axios.post(url, QS.stringify(params))        
        .then(res => {            
            resolve(res.data);        
        })        
        .catch(err => {            
            reject(err.data)        
        })    
    });
}

/**
 * axios封裝
 * 請(qǐng)求攔截、響應(yīng)攔截、錯(cuò)誤統(tǒng)一處理
 */
import axios from 'axios';
import router from '../router';
import store from '../store/index';
import { Toast } from 'vant';

/** 
 * 提示函數(shù) 
 * 禁止點(diǎn)擊蒙層、顯示一秒后關(guān)閉
 */
const tip = msg => {    
    Toast({        
        message: msg,        
        duration: 1000,        
        forbidClick: true    
    });
}

/** 
 * 跳轉(zhuǎn)登錄頁
 * 攜帶當(dāng)前頁面路由，以期在登錄頁面完成登錄后返回當(dāng)前頁面
 */
const toLogin = () => {
    router.replace({
        path: '/login',        
        query: {
            redirect: router.currentRoute.fullPath
        }
    });
}

/** 
 * 請(qǐng)求失敗后的錯(cuò)誤統(tǒng)一處理 
 * @param {Number} status 請(qǐng)求失敗的狀態(tài)碼
 */
const errorHandle = (status, other) => {
    // 狀態(tài)碼判斷
    switch (status) {
        // 401: 未登錄狀態(tài)，跳轉(zhuǎn)登錄頁
        case 401:
            toLogin();
            break;
        // 403 token過期
        // 清除token并跳轉(zhuǎn)登錄頁
        case 403:
            tip('登錄過期，請(qǐng)重新登錄');
            localStorage.removeItem('token');
            store.commit('loginSuccess', null);
            setTimeout(() => {
                toLogin();
            }, 1000);
            break;
        // 404請(qǐng)求不存在
        case 404:
            tip('請(qǐng)求的資源不存在'); 
            break;
        default:
            console.log(other);   
        }}

// 創(chuàng)建axios實(shí)例
var instance = axios.create({    timeout: 1000 * 12});
// 設(shè)置post請(qǐng)求頭
instance.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
/** 
 * 請(qǐng)求攔截器 
 * 每次請(qǐng)求前，如果存在token則在請(qǐng)求頭中攜帶token 
 */ 
instance.interceptors.request.use(    
    config => {        
        // 登錄流程控制中，根據(jù)本地是否存在token判斷用戶的登錄情況        
        // 但是即使token存在，也有可能token是過期的，所以在每次的請(qǐng)求頭中攜帶token        
        // 后臺(tái)根據(jù)攜帶的token判斷用戶的登錄情況，并返回給我們對(duì)應(yīng)的狀態(tài)碼        
        // 而后我們可以在響應(yīng)攔截器中，根據(jù)狀態(tài)碼進(jìn)行一些統(tǒng)一的操作。        
        const token = store.state.token;        
        token && (config.headers.Authorization = token);        
        return config;    
    },    
    error => Promise.error(error))

// 響應(yīng)攔截器
instance.interceptors.response.use(    
    // 請(qǐng)求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
    // 請(qǐng)求失敗
    error => {
        const { response } = error;
        if (response) {
            // 請(qǐng)求已發(fā)出，但是不在2xx的范圍 
            errorHandle(response.status, response.data.message);
            return Promise.reject(response);
        } else {
            // 處理斷網(wǎng)的情況
            // eg:請(qǐng)求超時(shí)或斷網(wǎng)時(shí)，更新state的network狀態(tài)
            // network狀態(tài)在app.vue中控制著一個(gè)全局的斷網(wǎng)提示組件的顯示隱藏
            // 關(guān)于斷網(wǎng)組件中的刷新重新獲取數(shù)據(jù)，會(huì)在斷網(wǎng)組件中說明
            if (!window.navigator.onLine) {
               store.commit('changeNetwork', false);
            } else {
                return Promise.reject(error);
            }
        }
    });

export default instance;

/** 
 * api接口的統(tǒng)一出口
 */
// 文章模塊接口
import article from '@/api/article';
// 其他模塊的接口……

// 導(dǎo)出接口
export default {    
    article,
    // ……
}

/**
 * 接口域名的管理
 */
const base = {    
    sq: 'https://xxxx111111.com/api/v1',    
    bd: 'http://xxxxx22222.com/api'
}

export default base;

/**
 * article模塊接口列表
 */

import base from './base'; // 導(dǎo)入接口域名列表
import axios from '@/utils/http'; // 導(dǎo)入http中創(chuàng)建的axios實(shí)例
import qs from 'qs'; // 根據(jù)需求是否導(dǎo)入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' // 導(dǎo)入路由文件
import store from './store' // 導(dǎo)入vuex文件
import api from './api' // 導(dǎo)入api接口

Vue.prototype.$api = api; // 將api掛載到vue的原型上

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

<template>  
    <div id="app">    
        <div v-if="!network">      
            <h3>我沒網(wǎng)了</h3>      
            <div @click="onRefresh">刷新</div>      
        </div>    
        <router-view/>      
    </div>
</template>

<script>
    import { mapState } from 'vuex';
    export default {  
        name: 'App',  
        computed: {    
            ...mapState(['network'])  
        },  
        methods: {    
            // 通過跳轉(zhuǎn)一個(gè)空頁面再返回的方式來實(shí)現(xiàn)刷新當(dāng)前頁面數(shù)據(jù)的目的
            onRefresh () {      
                this.$router.replace('/refresh')    
            }  
        }
    }
</script>

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