asyncData axios 封装好的请求

以下是一个简单的封装好的 axios 请求的示例代码，可以在 Vue.js 项目中使用：

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 5000, // 请求超时时间
})

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 可在此处添加 token 等请求头信息
    return config
  },
  error => {
    console.log(error)
    return Promise.reject(error)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  response => {
    const res = response.data
    // 在此处可对响应数据进行统一的处理，例如错误码判断等
    return res
  },
  error => {
    console.log(`err：${error}`)
    return Promise.reject(error)
  }
)

export default {
  get(url, params) {
    return instance({
      method: 'get',
      url,
      params,
    })
  },
  post(url, data) {
    return instance({
      method: 'post',
      url,
      data,
    })
  },
  put(url, data) {
    return instance({
      method: 'put',
      url,
      data,
    })
  },
  delete(url, data) {
    return instance({
      method: 'delete',
      url,
      data,
    })
  },
}

在 `asyncData` 中使用该封装后的 axios 请求，可以参考以下代码：

import request from '@/utils/request'

export default {
  asyncData({ params }) {
    return request.get('/api/data', { id: params.id })
  },
}

这样就可以在组件中使用 `this.$data` 获取请求到的数据了。