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);});
不管是何种请求,后端接收时需要保证属性名一致或者使用注解指定请求参数的名称。