axios封装

1.安装axios

npm i -D axios

2.根目录新建request文件夹，创建http.js，api.js

http.js

import axios from 'axios';
import { getToken, clearSessionStorage } from '@/utils/storage'
import router from '../router/index.js'
import { Message } from 'element-ui';

// 根据环境变量区分接口地址
switch (process.env.NODE_ENV) {
  case 'production':
    axios.defaults.baseURL = '';
    break;
  case 'test':
    axios.defaults.baseURL = '';
    break;
  default:
    axios.defaults.baseURL = '';
    break;
}

// 设置超时时间
axios.defaults.timeout = 10000;

// 跨域是否允许携带凭证
axios.defaults.withCredentials = true;

let flag = false
function alertMessage(error) {
  if (error.toString().indexOf('Error: timeout') !== -1) {
    Message.error("网络超时,请稍后重试")
  }
}

// 设置请求拦截器
axios.interceptors.request.use(config => {
  let token = getToken();
  token && (config.headers.accessToken = token);
  return config;
}, error => {
  return Promise.reject(error);
})

// 响应拦截器
axios.interceptors.response.use(response => {
  let { code } = response.data;
  if (code === 401) {
    // Message.success('token过期')
    Message.error("登录失效")
    clearSessionStorage()
    router.replace({
      path: "/login"
    })
  }
  return response.data
}, error => {
  if (!flag) {
    flag = true
    alertMessage(error)
    return setTimeout(() => {
      flag = false
    }, 5000)
  }
  let { response } = error;
  if (response) {
    // 服务器最起码返回了结果
    switch (response.status) {
      case 401: // 当前请求需要用户验证（一般是未登陆）
        break;
      case 403: // 服务器已经理解请求，但是拒绝执行它（一般是token过期）
        // localStorage.removeItem('token');
        break;
      case 404: // 请求失败，请求所希望得到的资源未被在服务器上发现
        router.replace({
          path: "/404"
        })
        break;
    }
  } else {
    // 服务器结果都没有返回
    if (!window.navigator.onLine) {
      // 断网处理：可以跳转到断网页面
      return
    }
    return Promise.reject(error)
  }
})

export default axios;

api.js

import { axios } from './http.js'

export function api1(parameter) {
  return axios({
    url: '/xxx/xxx',
    method: 'post',
    data: parameter,
  })
}

export function api2() {
  return axios({
    url: '/xxx/xxx',//参数按需拼接
    method: 'get',
  })
}

3.页面引用

<template>
  <div>
    <button @click="api1">接口二</button>
    <button @click="api2">接口二</button>
  </div>
</template>
<script>
import { api1, api2 } from '@/request/api'
export default {
  name: 'app',
  data () {},
  methods: {
  // get方法
    api1 () {
      // 调用api接口
      api1({
        type: 0,
        sort: 1
      }).then(res => {
        // success
        console.log(res)
      }).catch((error) => {
        // error
        console.log(error)
      })
    },
    api2 () {
      api2().then(res => {
        // success
        console.log(res)
      }).catch((error) => {
        // error
        console.log(error)
      })
     },
    }
   }
}
</script>