axios + vue 最佳实践

1. 介绍

功能：

1. 更改默认 axios 实例的配置
2. 在非 vue 文件中使用 store、router
3. 全局 非业务错误的处理
4. 全局 业务错误的处理

2. 更改默认 axios 实例的配置

配置：

// http.js
import axios from 'axios';

axios.defaults.baseURL = '/api';
axios.defaults.timeout = 60 * 1000;
axios.defaults.headers['content-type'] = 'application/json';

使用：

<template>
  <div>...</div>
</template>
<script>
import axios from 'axios';

export default {
  mounted() {
    axios.post(url, data).then(/* ... */);
  },
};
</script>

3. 在非 vue 文件中使用 vuex

配置：

// http.js
import axios from 'axios';

export default function install(Vue, store) {
  axios.interceptors.request.use(
    (config) => {
      const token = store.state.token;
      
      if (token) {
        config.headers['X-Access-Token'] = token;
      }

      return config;
    },
    (error) => {
      return Promise.reject(error);
    },
  );
};

使用：

// main.js
import Vue from 'vue';

import store from './store';
import http from './plugins/http';

Vue.use(http, store);

new Vue({
  // ...
  store,
}).$mount('#app')

4. 非业务错误的处理

配置：

import axios from 'axios';

function showErrorToast(message) {
  // ...
}

defaultIns.interceptors.request.use(
  (config) => {
    // ...
    return config;
  },
  (error) => {
    showErrorToast(error.message);

    return Promise.reject(error);
  },
);

defaultIns.interceptors.response.use(
  (response) => {
    return response.data;
  },
  (error) => {
    showErrorToast(error.message);

    return Promise.reject(error);
  },
);

5. 业务错误的处理

配置：

import axios from 'axios';
import { MessageBox } from 'element-ui';

export default function (Vue, { router }) {
  const handleStatus401 = () => {
    // ...
  };

  axios.defaults.validateStatus = (status) => {
    let isOkStatus = status >= 200 && status < 300;
  
    if (status === '401') {
      isOkStatus = true;
    }
  
    return isOkStatus;
  };
  
  defaultIns.interceptors.response.use(
    (response) => {
      const { status } = response;
  
      if (status === '401') {
        handleStatus401();
        return Promise.reject(new Error('401'));
      }
  
      return response.data;
    },
    (error) => {
      return Promise.reject(error);
    },
  );
}