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);

      });

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

  • 6
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue3 中,可以使用 Axios 库来进行 HTTP 请求。如果你想要在全局范围内引入 Axios 并且能够在 Vue 组件中直接使用它,可以按照以下步骤进行操作: 1. 安装 Axios 在终端中执行以下命令安装 Axios: ``` npm install axios ``` 2. 创建 axios 实例 在项目根目录下创建一个 `http.js` 文件,用来创建 axios 实例并进行全局配置。 ```javascript import axios from 'axios' // 创建 axios 实例 const http = axios.create({ baseURL: 'http://localhost:3000/api', timeout: 5000 }) // 请求拦截器 http.interceptors.request.use( config => { // 在发送请求之前做些什么 return config }, error => { // 对请求错误做些什么 return Promise.reject(error) } ) // 响应拦截器 http.interceptors.response.use( response => { // 对响应数据做些什么 return response }, error => { // 对响应错误做些什么 return Promise.reject(error) } ) export default http ``` 上述代码中,我们通过 `axios.create` 方法创建了一个 axios 实例,并进行了全局配置,包括设置了请求的基础 URL 和超时时间。同时,我们还设置了请求拦截器和响应拦截器,用于在请求和响应时进行一些处理。 3. 注册为 Vue 插件 在 `main.js` 中注册 `http.js` 为 Vue 插件,这样就可以在 Vue 组件中直接使用 `$http` 对象进行请求了。 ```javascript import { createApp } from 'vue' import App from './App.vue' import http from './http' const app = createApp(App) // 注册为 Vue 插件 app.config.globalProperties.$http = http app.mount('#app') ``` 现在,你就可以在 Vue 组件中直接使用 `$http` 对象进行请求了。例如: ```javascript export default { mounted() { this.$http.get('/users') .then(response => { console.log(response.data) }) .catch(error => { console.log(error) }) } } ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值