axios 模塊化管理接口

// Http.js
// 在http.js文件中,處理axios
import axios from 'axios'
// 引入qs模塊,用來序列化post類型的數據
import QS from 'qs'
import { Http2SecureServer } from 'http2';
// 環境的切換
// 我們的項目環境可能有開發環境、測試環境和生產環境。我們通過node的環境變量來匹配我們的默認的接口url前綴。axios.defaults.baseURL可以設置axios的默認請求地址就不多說了。
 
    axios.defaults.baseURL = 'aaa/aaa/';
    // 通過axios.defaults.timeout設置默認的請求超時時間。例如超過了10s，就會告知用戶當前請求超時，請刷新等。
    axios.defaults.timeout = 10000
    // post請求的時候，我們需要加上一個請求頭，所以可以在這裏進行一個默認的設置，即設置post的請求頭爲application/x-www-form-urlencoded;charset=UTF-8
    // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    withCredentials:true 
// 請求攔截器
axios.interceptors.request.use(
    config => {
        // 如果存在，則統一在http請求的header都加上token，這樣後臺根據token判斷你的登錄情況
        // 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷 
        config.headers = {
            'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8'
        }
        // debugger
        const token = 'abcdefg';
        token && (config.headers.Authorization = token);
        return config;
    },
    error => {
        return Promise.error(error);
    },

    // 響應攔截器
    response => {
        console.log(23131)
        // 如果返回的狀態碼爲200，說明接口請求成功，可以正常拿到數據     
        // 否則的話拋出錯誤
        if (response.status === 200) {
            return Promise.resolve(response);
        } else {
            return Promise.reject(response);
        }
    },
    // 服務器狀態碼不是2開頭的的情況
    // 這裏可以跟你們的後臺開發人員協商好統一的錯誤狀態碼    
    // 然後根據返回的狀態碼進行一些操作，例如登錄過期提示，錯誤提示等等
    // 下面列舉幾個常見的操作，其他需求可自行擴展
    error => {
        if (error.response.status) {
            switch (error.response.status) {
                case 404:
                    console.log('未找到')
                    break;

                // 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
                    });
            }
            return Promise.reject(error.response);
        }
    }


)



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)
        })
    });
}

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.js
// 用於統一管理我們的接口

import { get, post } from './http'

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

created (){
        // console.log(this.$store.state.count)\
        
          //發送請求return new Promise((resolve, reject) => {
             apiAddress({                    
                type: 0,                    
                sort: 1                
            }).then(res => {
                // 獲取數據成功後的其他操作
               console.log(res)              
            })            

          
       
    },