Vue开源框架中axios参数的封装方式?

  • Z时代
  • 2024-02-13
  • 分类：IT

在Vue的一些开源框架中,我发现很多有封装了axios,但是我有个疑问,如果不是封装的话,调用路径参数一般是这样的:

  methods: {
    async requestTransaction() {
      this.transactionList = (await axios.get('https://api.spacexdata.com/v4/capsules/62615d180ec008379be596f1')).data
      console.log("this.transactionList >> ", JSON.stringify(this.transactionList))
     }
  },

就是说get请求的https://api.spacexdata.com/v4/capsules/,附加了路径参数62615d180ec008379be596f1,是直接拼到后面的,而对于如vue-element-admin,他们的
封装是这样的:

export function fetchArticle(id) {
  return request({
    url: '/vue-element-admin/article/detail',
    method: 'get',
    params: { id }
  })
}
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})
// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)

我没有看到任何将params: {id} 转为路径参数的代码,是怎样转化的呢?
有用过这个框架的请回答下谢谢.

尝试使用一样的代码去做,但效果不同.

以上是 Vue开源框架中axios参数的封装方式? 的全部内容， 来源链接： utcz.com/p/935279.html

回到顶部