手把手带你使用 typescript 实现一个 axios 库（二）url 参数处理

最新推荐文章于 2023-05-22 21:21:17 发布

weixin_33912246

最新推荐文章于 2023-05-22 21:21:17 发布

阅读量1.2k

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5cd2aa6de51d45475f4de2c0

版权

本文手把手教你使用typescript完善axios库的URL参数处理，特别是针对get请求的参数拼接。通过需求分析、思路解析和代码实现，展示了如何处理数组类型的参数，并提供了一个简单的buildURL函数的实现。文章最后提到，虽然已经实现了一部分功能，但仍有待进一步完善。

摘要由CSDN通过智能技术生成

主要内容：对 get 请求参数的处理

需求分析

看下面这个请求

axios({
  method: 'get',
  url: '/base/get',
  params: {
    a: 1,
    b: 2
  }
})
复制代码

系列一实现了axios的基本请求，但是如果你细心会发现还存在问题，就是我们的请求url其实是不全的。具体看下图

图片占位

可以看到我们并没有将params的参数拼接到url尾部，so 我们这一节要做的事情就是完善 url。

在axios中参数params可以有多重，如下所示

// 为数组
axios({
  method: 'get',
  url: '/base/get',
  params: {
    foo: ['aaa', 'bbb']
  }
})
// url: /base/get?foo[]=aaa&foo[]=bbb

// 为对象
axios({
  method: 'get',
  url: '/base/get',
  params: {
    foo: {
      bar: 'baz'
    }
  }
})
// url: /base/get?foo=%7B%22bar%22:%22baz%22%7D, foo 后面拼接的是 {
   "bar":"baz"} e