上传和下载的进度监控
上传和下载的进度监控需求分析有些时候，当我们上传文件或者是请求一个大体积数据的时候，希望知道实时的进度，甚至可以基于此做一个进度条的展示。 我们希望给 axios 的请求配置提供 onDownloadProgress 和 onUploadProgress 2 个函数属性，用户可以通过这俩函数实现对下载进度和上传进度的监控。 1234567891011axios.get('/more/get',{ onDownloadProgress(progressEvent) { // 监听下载进度 }})axios.post('/more/post',{ onUploadProgress(progressEvent) { // 监听上传进度 }}) xhr 对象提供了一个 progress 事件，我们可以监听此事件对数据的下载进度做监控；另外，xhr.uplaod 对象也提供了 progress 事件，我们可以基于此对上传进度做监控。 代码实现首先修改...
自定义合法状态码
自定义合法状态码需求分析之前 ts-axios 在处理响应结果的时候，认为 HTTP status 在 200 和 300 之间是一个合法值，在这个区间之外则创建一个错误。有些时候我们想自定义这个规则，比如认为 304 也是一个合法的状态码，所以我们希望 ts-axios 能提供一个配置，允许我们自定义合法状态码规则。如下： 123456789axios.get('/more/304', { validateStatus(status) { return status >= 200 && status < 400 }}).then(res => { console.log(res)}).catch((e: AxiosError) => { console.log(e.message)}) 通过在请求配置中配置一个 validateStatus 函数，它可以根据参数 status 来自定义合法状态码的规则。 代码实现首先修改一下...
自定义参数序列化
自定义参数序列化需求分析在之前的章节，我们对请求的 url 参数做了处理，我们会解析传入的 params 对象，根据一定的规则把它解析成字符串，然后添加在 url 后面。在解析的过程中，我们会对字符串 encode，但是对于一些特殊字符比如 @、+ 等却不转义，这是 axios 库的默认解析规则。当然，我们也希望自己定义解析规则，于是我们希望 ts-axios 能在请求配置中允许我们配置一个 paramsSerializer 函数来自定义参数的解析规则，该函数接受 params 参数，返回值作为解析后的结果，如下： 123456789101112axios.get('/more/get', { params: { a: 1, b: 2, c: ['a', 'b', 'c'] }, paramsSerializer(params) { return qs.stringify(params, { arrayFormat: &#...
HTTP 授权
HTTP 授权需求分析HTTP 协议中的 Authorization 请求 header 会包含服务器用于验证用户代理身份的凭证，通常会在服务器返回 401 Unauthorized 状态码以及 WWW-Authenticate 消息头之后在后续请求中发送此消息头。 axios 库也允许你在请求配置中配置 auth 属性，auth 是一个对象结构，包含 username 和 password 2 个属性。一旦用户在请求的时候配置这俩属性，我们就会自动往 HTTP 的 请求 header 中添加 Authorization 属性，它的值为 Basic 加密串。这里的加密串是 username:password base64 加密后的结果。 12345678910axios.post('/more/post', { a: 1}, { auth: { username: 'Yee', password: '123456' }}).then(res =...
静态方法扩展
静态方法扩展需求分析官方 axios 库实现了 axios.all、axios.spread 等方法，它们的用法如下： 123456789101112function getUserAccount() { return axios.get('/user/12345');}function getUserPermissions() { return axios.get('/user/12345/permissions');}axios.all([getUserAccount(), getUserPermissions()]) .then(axios.spread(function (acct, perms) { // Both requests are now complete })); 实际上，axios.all 就是 Promise.all 的封装，它返回的是一个 Promise 数组，then 函数的参数本应是一个参数为 Promise resolves（数组）...
