• 可以在代碼邏輯中寫axios請求，處理請求結(jié)果，但是隨著項目越來越大，代碼會很繁瑣，不容易維護，所以，可以把一些在所有請求中都要處理的邏輯抽取出來，封裝成api方法。比如每次請求中都要判斷是否有權(quán)限，每次請求都要攜帶token。

1. 建一個request.js文件

import axios from 'axios'

// create an axios instance
const service = axios.create({
    // baseURL: process.env.BASE_API, // api的base_url
    // timeout: 5000,
    //headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' },
    headers: { 'haha': 'kkkkkkkkkkkkkkk' },
    //method: 'get', //一般需要用post
    // request timeout
})

// request interceptor  請求之前的攔截器
service.interceptors.request.use(config => {
    // Do something before request is sent
    return config
}, error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
})

// respone interceptor 請求之后異常狀態(tài)攔截
service.interceptors.response.use(
    response => {
        const res = response.data;
        if (res.statusCode === 201 || res.statusCode === 400 || res.statusCode === 401 || res.statusCode === 403 || res.statusCode === 404) {
            return Promise.reject('error');
        } else {
            return response.data;
        }
    },
    error => {
        console.log('err' + error)// for debug
        return Promise.reject(error)
    }
)

export default service

2.添加auth.js文件，代碼：

//與用戶驗證相關(guān)的方法

export function getToken() {
    //從localstorage獲取token
    return localStorage.getItem('token');
}

export function setToken(token) {
    //本地緩存存儲token
    localStorage.setItem('token', token);
}

export function removeToken() {
    //本地緩存移除token
    localStorage.removeItem('token');
}

export function getUserId() {
    //從本地緩存中獲取userID
    return localStorage.getItem("userid");
}

export function setUserId(userid) {
    //本地緩存存儲userId
    localStorage.setItem('userid', userid);
}

export function removeUserId() {
    //本地緩存移除userId
    localStorage.removeItem('userid');
}

3.在store.js中，添加如下：

import Vue from 'vue'
import Vuex from 'vuex'
import { getToken, setToken, removeToken, getUserId, setUserId, removeUserId } from '../Utils/auth.js'

Vue.use(Vuex);

/*訪問狀態(tài)對象--存放變量*/
const state = {
    token: getToken(),
    userId: getUserId(),
}
/*訪問觸發(fā)對象--存放事件*/
const mutations = {
    SET_TOKEN: (state, token) => {
        setToken(token);
        //state.token = token;
        //localStorage.setItem('token', token);
    },
    SET_USER_ID: (state, m) => {
        setUserId(m);
    },

    //用戶注銷后刪除所有本地數(shù)據(jù)
    LOGOUT: (state) => {
        removeToken();
        removeUserId();
    }
}
export default new Vuex.Store({
    state,
    mutations
})

4.添加testapi.js

import request from './request'
export function getTest(apiRoute) {
    return request({
        url: apiRoute,
        method: 'get',
        params: { "ai": "ai" }
    })
}

5.使用api

//test,testapi
  created: function() {
    var _this = this;
    //test
    getTest("/project/test").then(response => {
      _this.testapi = response.data;
    });
  },