处理请求 url 参数
处理请求 url 参数需求分析还记得我们上节课遗留了一个问题，再来看这个例子： 12345678axios({ method: 'get', url: '/base/get', params: { a: 1, b: 2 }}) 我们希望最终请求的 url 是 /base/get?a=1&b=2，这样服务端就可以通过请求的 url 解析到我们传来的参数数据了。实际上就是把 params 对象的 key 和 value 拼接到 url 上。 再来看几个更复杂的例子。 参数值为数组1234567axios({ method: 'get', url: '/base/get', params: { foo: ['bar', 'baz'] }}) 最终请求的 url 是 /base/get?foo[]=bar&foo[]=baz'。 ...
处理响应 data
处理响应 data需求分析在我们不去设置 responseType 的情况下，当服务端返回给我们的数据是字符串类型，我们可以尝试去把它转换成一个 JSON 对象。例如： 1data: "{"a":1,"b":2}" 我们把它转换成： 1234data: { a: 1, b: 2} transformResponse 函数实现及应用根据需求分析，我们要实现一个 transformResponse 工具函数。 helpers/data.ts： 12345678910export function transformResponse(data: any): any { if (typeof data === 'string') { try { data = JSON.parse(data) } catch (e) { // do nothing } }...
获取响应数据
获取响应数据需求分析在前面的章节中，我们发送的请求都可以从网络层面接收到服务端返回的数据，但是代码层面并没有做任何关于返回数据的处理。我们希望能处理服务端响应的数据，并支持 Promise 链式调用的方式，如下： 12345678910axios({ method: 'post', url: '/base/post', data: { a: 1, b: 2 }}).then((res) => { console.log(res)}) 我们可以拿到 res 对象，并且我们希望该对象包括：服务端返回的数据 data，HTTP 状态码status，状态消息 statusText，响应头 headers、请求配置对象 config 以及请求的 XMLHttpRequest 对象实例 request。 定义接口类型根据需求，我们可以定义一个 AxiosResponse 接口类型，如下： 12345678export interface AxiosResponse...
