基于vue 编写一个axios的设置文件 里面设置拦截器 网络请求的公共配置并且举例其他页面js中如何调用post请求

好的，下面是一个基于Vue的axios设置文件：

// axios.js

import axios from 'axios'

// 创建一个axios实例
const instance = axios.create({
  baseURL: 'http://localhost:3000', // API的基础路径
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
instance.interceptors.request.use(config => {
  // 在请求发送之前做些什么
  // 添加token等公共请求头信息
  config.headers.Authorization = localStorage.getItem('token')
  return config
}, error => {
  // 处理请求错误
  return Promise.reject(error)
})

// 响应拦截器
instance.interceptors.response.use(response => {
  // 在响应数据之前做些什么
  return response.data
}, error => {
  // 处理响应错误
  return Promise.reject(error)
})

export default instance

这里我们创建了一个axios实例，设置了API基础路径和请求超时时间，并且添加了请求拦截器和响应拦截器。在请求拦截器中，我们可以添加一些公共请求头信息，比如token等。在响应拦截器中，我们可以对响应数据进行一些处理，比如只返回data数据。

接下来，我们可以在其他页面中调用这个axios实例来发起网络请求。举例来说，我们要在一个组件中使用POST请求，可以这样写：

// MyComponent.vue

<template>
  <div>{{message}}</div>
</template>

<script>
import axios from '@/utils/axios'

export default {
  data() {
    return {
      message: ''
    }
  },
  methods: {
    async fetchData() {
      try {
        const response = await axios.post('/api/data', { params: { id: 1 } })
        this.message = response.message
      } catch (error) {
        console.log(error)
      }
    }
  },
  mounted() {
    this.fetchData()
  }
}
</script>

在这个组件中，我们引入了上面创建的axios实例，并且在`fetchData`方法中使用了POST请求来获取数据。我们可以通过async/await来获取请求的响应数据，并且对错误进行了处理。在mounted钩子函数中，我们调用了`fetchData`方法来获取数据，并将数据绑定到页面中。