axios学习

json-server

快速搭建HTTP服务，我们使用axios发送请求时，需要一个服务端的角色。

axios 介绍

基于promise的HTTP客户端，可以在浏览器和node.js中运行。向服务端发送AJAX请求/HTTP请求

简单的使用

发送一个请求

const btns = document.querySelectorAll('button')
btns[0].onclick = () => {
    // 发送AJAX请求
    axios({
        method: 'GET',
        url: 'http://localhost:3000/posts/2',
    }).then(response => {
        console.log(response);
    })
}

axios 相应后的结果为其中的 request 是原生的AJAX请求实例对象，是axios在发送请求时创建的，也就是axios的底层以来还是AJAX。

axios请求对象[Config]

配置对象，包括 url(baseURL可以免去url前面一大串相同的，预先设置好即可)、method、transformRequest(对请求的数据进行处理后再发送)、transformResponse(对响应结果进行处理)、headers(配置请求头信息)、params(设置url参数)、data

axios拦截器

它是一些函数，分为两大类，请求拦截器与响应拦截器。前者是在发送请求之前对请求做一些处理，后者对相应进行处理。

拦截器的原理： 其实很简单，就是把拦截的回调一个个都保存起来，请求拦截器放在前面，请求函数 dispatchRequest 放在中间，响应拦截器放在后面，最后从前往后用promise串成一条链挨个执行，如果一路成功了，则回返回最终执行的结果，整个过程都是以一个 promise 传递，传来传去。

请求取消

使用方法： 往配置对象config上添加一个属性cancelToken，这东西其实是一个对象，里面存有一个维护该请求状态的promise，在源码中将该promise的成功的回调resolve暴露出来，交到我们手上（我们爱存哪就存哪），等到哪天我们去调用这个resolve的时候，回产生链式的反应，promise被改成了成功的状态，而在AJAX请求的地方我们提前安排了这个promise的成功的回调——取消请求 xhr.abort()。最终也就实现了调用某函数，请求取消，这样一个简单的效果。

这里有一处设计的很精妙 就是如何把 resolve 函数从 axios 内部暴露出来到外部供我们自由使用，具体参见源码。

let cancel = null
btns[0].onclick = () => {
    // 检测上一次请求是否已经完成
    if (cancel !== null) {
        cancel()
    }
    axios({
        method: 'GET',
        url: 'http://localhost:3000/posts',
        // 添加配置对象的属性 cancelToken
        cancelToken: new axios.CancelToken(function(c){
            cancel = c
        })
    }).then(r => {
        console.log(r);
        cancel = null
    })
}

总结

整体学完了一遍，历时三天（22.3.3-22.3.5），很快乐，基本搞懂了每一处的含义，并且能够写清楚。

axios学习记录