vue.js - Vue开源框架中axios参数的封装方式?

Question

在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 instanceconst 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 interceptorservice.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} 转为路径参数的代码,是怎样转化的呢?
有用过这个框架的请回答下谢谢.

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

Answer 1

首先，理解Vue.js中的axios参数封装方式是很重要的。在Vue.js中，我们通常会使用axios库来发送HTTP请求，而参数的封装方式取决于你的具体需求。

对于你给出的两种方式，一种是在URL后面直接附加路径参数，另一种是使用params对象传递参数。这两种方式都是可行的，但是它们的使用场景和效果是不同的。

1. 直接在URL后面附加路径参数（例如：https://api.spacexdata.com/v4/capsules/62615d180ec008379be596f1）这种方式常见于API设计，特别是在RESTful API中。在这种情况下，路径参数通常表示资源的特定实例。例如，在这个例子中，路径参数62615d180ec008379be596f1可能表示一个特定的太空舱。
2. 使用params对象传递参数（例如：params: { id: 123 }）这种方式允许你在GET、POST等请求中传递数据。这些数据会被添加到URL的查询字符串中。这种方式通常用于传递一些键值对参数。

至于你提到的vue-element-admin框架中的代码，它实际上是在使用axios库创建一个http客户端，并在该客户端上添加了一些自定义的配置和拦截器。其中，拦截器被用来在每个请求发送之前做一些处理，比如添加token等。在这个例子中，fetchArticle(id)函数返回的是一个已经配置好的axios请求。这个请求的URL是固定的，而参数是通过在params对象中传递的。当你调用这个函数并传入一个id时，这个id会被自动转化为查询字符串的一部分，比如/vue-element-admin/article/detail?id=123。

总的来说，这两种方式都可以用来传递参数，但是具体使用哪一种方式取决于你的具体需求和API的设计。如果你正在设计自己的API或者正在使用别人的API，你需要查看API的文档来确定哪种方式最适合你的需求。