一般我們會新建2個文件，request.js用于封裝axios，api用來統一管理我們的接口

request.js（封裝axios）

安裝
npm install axios; // 安裝axios
引入
import axios from 'axios';
環境的切換

var API_PREFIX = '';
if (process.env.NODE_ENV == 'development') {
    API_PREFIX = '';
}else{
    var idx = location.href.indexOf("/site");
    API_PREFIX = location.href.substr(0,idx)
}
//如果接口地址不是http開頭的
if(options.url.indexOf('http') == -1){
        options.url = API_PREFIX + options.url;
    }

options.method = options.method?options.method:'get';

定義heders

• 如果存在，則統一在http請求的header都加上token，這樣后臺根據token判斷你的登錄情況
• 即使本地存在token，也有可能token是過期的，所以在響應攔截器中要對返回狀態進行判斷

   var hearders = {
        'Content-Type': 'application/json'
    };
    if(TOKEN) {
        var hearders = {
            'Content-Type': 'application/json',
            'token': TOKEN,
        };
     }

創建axios實例
axios.create([config])

const instance = axios.create({
            headers: hearders,
            timeout:options.timeout === undefined?5000:options.timeout
        });

封裝get方法和post方法

export default function(options) {
  return new Promise((resolve, reject) => {
        const instance = axios.create({
            headers: hearders,
            timeout: options.timeout === undefined?5000:options.timeout
        });
        instance(options)
            .then(response => { 
                //請求成功后 更新前端token的有效時間
                updateTokenExpire();
                resolve(response.data); 
            })
            .catch(error => {   
                if (error.response) {
                    //api 登錄重試
                    switch (error.response.data.status_code){
                        case 401:
                            if (process.env.NODE_ENV == 'development') {
                                store.commit('set_toast_msg','dev token 失效');
                            }else{
                                //需要登錄
                                //清除當前token 信息
                                clearToken(store.state.token.account_id);
                                goLogin();
                            }
                            reject({status_code:401,message:''});
                            return ;
                            break;
                        default:
                            break;
                    }   
                }
                reject(error.response?error.response.data:error);
                

            });
    });
}

api的統一管理

• 首先我們創建一個api文件夾來管理接口
• 在api文件夾里面新建一個index.js文件，所有的關于首頁的接口都房子這個里面
• 然后我們引入request.js import request from '@/utils/request'
• 向外暴露接口方法
  -- get方法

export default {
    home:function(){
        return request({
            url:'/api/site/home',
            method:'get',
        });
    },
}

-- post 方法

export default {
    getWxsdk:function(account_id,url){
        return request({
            url:'/api/system/jssdk',
            method:'post',
            data:{
                url:url,
                mid:account_id
            }
        });
    },
}

在頁面中如何調用

• 引入接口 import api from '../api/index.js'
• 調取接口方法

api.home().then(function(res){
  console.log('success');
}).catch(function(err){
  console.log('error');         
})