Vue3实践之全局请求URL配置和请求参数说明

Vue3实践之全局请求URL配置和请求参数说明

全局请求URL配置

1、首先需要导入router和axios

import router from "@/router";

2、创建app，将router挂载到app上

const app = createApp(App)
app.use(router).use(elementIcons).mount('#app')

3、设置全局请求路径以及

//设置全局请求地址
let VUE_APP_BASE_DEV_API = 'http://localhost:8092'
let VUE_APP_BASE_PRODUCT_API = "http://localhost:8092"

//将axios实例绑定到$http属性上
app.config.globalProperties.$http = axios

//设置请求url
axios.defaults.baseURL = VUE_APP_BASE_DEV_API
//设请求头
axios.defaults.headers.common['Content-Type'] = 'application/json;charset=UTF-8'
//
axios.defaults.headers.post['Accept'] = 'application/json'

4、在vue中使用

	 //post请求
      this.$http.post('/scheduler/add-task', this.myJobData).then(reponse => {
        console.log('response:', reponse);
      }, error => {
        console.log('error', error)
      });
		

请求参数说明

• Params对象
  • 当需要向 URL 查询字符串添加参数时，可以使用 params 字段。这些参数会被序列化并附加到请求 URL 的末尾。适用于 GET 请求等不支持在请求体中传递数据的方法
  • 对于数组或对象类型的参数，Axios 内部使用 URLSearchParams 或 qs 库（如果已配置）进行序列化。默认情况下，数组会以 arr[]=value1&arr[]=value2 的形式传递。如果需要自定义序列化规则，可以使用第三方库（如 qs）自行处理
• data对象（适用于 POST、PUT、PATCH 请求）
  • 对于需要在请求体中传递数据的 HTTP 方法（如 POST、PUT、PATCH），可以使用 data 字段。数据可以是 JSON 对象、FormData 对象、字符串或者其他格式，具体取决于 Content-Type 设置

Post请求示例

	 //this.myJobData就是上面所说的data对象
      this.$http.post('/scheduler/add-task', this.myJobData).then(reponse => {
        console.log('response:', reponse);
      }, error => {
        console.log('error', error)
      });

Get请求示例

      this.$http.get('/scheduler/list', {params: {id: '123', name: '张三'}}).then(response => {
        console.log('data:', response.data.data)
        console.log('data:', response.data)
        this.tableData = response.data
      }, error => {
        console.log(error.message);

      });

不管是何种请求，后端接收时需要保证属性名一致或者使用注解指定请求参数的名称。