Axios 的 使用

在until文件夹 新建request.js 文件,文件内容如下：

引入相关文件

import axios from 'axios'

import { Notification, MessageBox } from 'element-ui'

import store from '@/store'

import router from '@/router'

import { getToken } from '@/utils/auth'

设置全局默认头部

axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8' || axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8'axios.defaults.headers['Access-Control-Allow-Origin'] = '*' 访问控制允许来源

创建axios示例

const request = axios.create({

  // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。

    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL

  baseURL: 'https://some-domain.com/api/',

  // `timeout` 指定请求超时的毫秒数(0 表示无超时时间)

  // 如果请求话费了超过 `timeout` 的时间，请求将被中断

  timeout: 1000

})

添加拦截器

// 添加请求拦截器

axios.interceptors.request.use(function (config) {

    // 在发送请求之前做些什么

    return config;

  }, function (error) {

    // 对请求错误做些什么

    return Promise.reject(error);

  });

例如：

  service.interceptors.request.use(

    config => {

      if (getToken()) {

        config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改

    }

    return config

  },

  error => {

    // console.log(error)

    Promise.reject(error)

  }

)

添加响应拦截器

axios.interceptors.response.use(function (response) {

    // 对响应数据做点什么

    return response;

  }, function (error) {

    // 对响应错误做点什么

    return Promise.reject(error);

  });

例如：

  service.interceptors.response.use(res => {

  const code = res.data.code

    if (code === 401) {

      MessageBox.confirm(

        '登录状态已过期，您可以继续留在该页面，或者重新登录',

        '系统提示',

        {

          confirmButtonText: '重新登录',

          cancelButtonText: '取消',

          type: 'warning'

        }

      ).then(() => {

        store.dispatch('LogOut').then(() => {

          location.reload() // 为了重新实例化vue-router对象 避免bug

        })

        router.push('/login')//跳转到登录页

      })

    } else if (code !== 200 && code !== 0 && code !==200000 && code!=="200000" && code!=="500000") {

      Notification.error({

        title: res.data.msg

      })

      return Promise.reject('error')

    } else {

      return res.data

    }

  },

    error => {

      /** 暂时注释、屏蔽退出报错和有时刷新报错 NetWork Error

      console.log('err' + error)

      Message({

        message: error.message,

        type: 'error',

        duration: 5 * 1000

      })

      return Promise.reject(error)

      **/

    }

  )

export default request

// 创建axios实例文件下载

export const excalService = axios.create({

  baseURL: process.env.VUE_APP_BASE_API,

  timeout: 100000,

  // headers: { 'Authorization': 'Bearer ' + getToken() }

})

// request拦截器

excalService.interceptors.request.use(

  config => {

    if (getToken()) {

      config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改

    }

    return config

  },

  error => {

    // console.log(error)

    Promise.reject(error)

  }

)