封装axios中的get请求传递params参数,对象的解构,扩展运算符

文章讲述了在封装fetch方法时,如何处理传入的params参数,以及在调用如getIntervieweeInfo等方法时如何传递对象。不正确地结构化params参数可能会导致请求失败或数据解析错误。示例代码中展示了如何正确构造axios的GET请求并设置Content-Type。

封装时候需要将传入的params参数进行结构

fetch: (url, params = {}, _ContentType = ContentType.urlencoded) => {
        return new Promise((resolve, reject) => {
            axios.get(url, {
                    //配置对象params
                    params:{
                        //传递过来请求参数params
                        ...params
                    }
                }
        })
    },

在定义方法的时候传递对象

getIntervieweeInfo: (id) => {
    let sid={'id':id}
    return http.fetch(API.getIntervieweeInfo,sid, 'application/json')
}

如果不结构的话会出现以下情况

### 如何在 async/await 语法中使用 axios.get() 进行 HTTP 请求 `axios.get()` 是一种用于发起 GET 请求的简洁方式,其本质是返回一个 Promise 对象[^4]。在 `async/await` 语法中,可以通过 `await` 关键字等待请求完成,并获取响应数据。 #### 基本用法 在 `async` 函数内部,可以使用 `await` 等待 `axios.get()` 的执行结果。以下是一个基本示例: ```javascript async function fetchData() { try { const response = await axios.get('https://api.example.com/data', { params: { ID: 123 } }); console.log(response.data); } catch (error) { console.error('Error fetching data:', error); } } ``` 在这个例子中,`axios.get()` 接收两个参数:目标 URL 和配置对象。配置对象中的 `params` 属性用于传递查询参数[^1]。 #### 在 Vue 中使用 在 Vue 应用中,通常通过 `this.$axios` 调用封装好的 Axios 实例。以下是一个 Vue 方法中使用 `async/await` 发起 GET 请求的示例: ```javascript async handler() { try { const { data: res } = await this.$axios.get( "http://www.liulongbin.top:3006/api/getbooks", { params: { id: 1, }, } ); console.log(res.data); } catch (error) { console.error('Error fetching data:', error); } } ``` 该方法通过解构赋值直接从响应中提取 `data` 属性,并将其重命名为 `res`。这种方式提高了代码的可读性[^1]。 #### 处理多个依赖请求 当需要顺序执行多个依赖的接口调用时,`async/await` 提供了更清晰的代码结构。例如,在第一个接口调用完成后,再发起第二个请求: ```javascript async exportData() { try { const firstResponse = await statisZanCaiExport({ statisDate: this.state.datePickValue.format('YYYYMMDD') }); console.log('First request completed:', firstResponse); const secondResponse = await anotherAPI({ param: firstResponse.someValue }); console.log('Second request completed:', secondResponse); } catch (error) { console.error('Error in requests:', error); } } ``` 在此示例中,`await` 确保第一个请求完成后再执行第二个请求,从而实现了顺序执行的需求[^5]。 #### 注意事项 - `await` 只能在 `async` 函数内部使用。 - 如果 `await` 后面不是一个 Promise 对象,则会直接返回该值。 - 使用 `try/catch` 结构来处理异常,以确保错误能够被捕获并妥善处理。 通过上述方式,可以在 `async/await` 语法中高效地使用 `axios.get()` 发起 HTTP 请求,同时保持代码的简洁性和可维护性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值