提供网站技术杭州建设网站官网
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);});
不管是何种请求，后端接收时需要保证属性名一致或者使用注解指定请求参数的名称。