Axios Get 传参详解

一、基础使用

使用axios进行客户端请求，首先需要导入axios的库文件，可以使用CDN的方式引用也可以npm install之后import进来。

axios的基本用法是在axios.get()中传入请求地址url，然后返回一个Promise对象，使用.then()方法来处理请求的结果。


    axios.get('/api/user')
        .then(res => console.log(res.data))
        .catch(err => console.error(err));

除了url之外，axios.get()函数接受一个可选的对象参数，包括params、headers、timeout、withCredentials等参数，在后续的小标题中会详细介绍。

二、传递参数

在实际开发中，GET请求需要传递参数是非常常见的，比如传递用户名、密码、页码等信息。

以传递用户名为例，可以将用户名拼接在url路径后面，如下：


    axios.get('/api/user/' + username)
        .then(res => console.log(res.data))
        .catch(err => console.error(err));

这样的方式存在一些弊端，比如参数不安全、不方便等。因此，推荐使用params参数，例如：


    axios.get('/api/user', { params: { username: 'Tom' } })
        .then(res => console.log(res.data))
        .catch(err => console.error(err));

这里params参数为一个对象，其中的键值对表示请求的参数和对应的值。这种方式不仅是安全的，而且方便管理和维护。

三、URL编码

当使用params参数传递参数时，axios会将参数编码为url查询字符串，例如：/api/user?username=Tom。但是，在传递一些特殊字符时，可能需要使用URL编码。

可以使用encodeURIComponent()来编码参数，例如：


    const username = 'Tom & Jerry';
    axios.get('/api/user', { params: { username: encodeURIComponent(username) } })
        .then(res => console.log(res.data))
        .catch(err => console.error(err));

四、Headers参数

Headers参数用于设置请求头，通常用于身份验证等。可以使用headers参数传递一个对象，其中键值对表示请求头的名称和对应的值。


    axios.get('/api/user', { headers: { Authorization: 'Bearer ' + token } })
        .then(res => console.log(res.data))
        .catch(err => console.error(err));

这样可以在请求头中添加Authorization字段，使用Bearer + token的格式表示身份验证信息。

五、Timeout参数

Timeout参数用于指定请求的超时时间，单位为毫秒，默认值为0，表示没有超时时间限制。可以设置一个数字，表示超时时间的毫秒数。


    axios.get('/api/user', { timeout: 5000 })
        .then(res => console.log(res.data))
        .catch(err => console.error(err));

这里的timeout参数表示请求的最长等待时间为5秒，如果超过5秒服务器没有响应，则请求将被中止。

六、withCredentials参数

withCredentials参数用于指定是否在跨域请求时发送第三方cookie，默认值为false。


    axios.get('/api/user', { withCredentials: true })
        .then(res => console.log(res.data))
        .catch(err => console.error(err));

这里withCredentials参数设为true表示在跨域请求时发送第三方cookie。

七、多个参数

GET请求中同时传递多个参数时，可以将多个参数组合成一个对象，然后作为params参数的值传递。


    axios.get('/api/user', { params: { username: 'Tom', password: '123456' } })
        .then(res => console.log(res.data))
        .catch(err => console.error(err));

这里将用户名和密码都放在了params参数中，以对象形式传递。

八、取消请求

在实际开发中，有时需要取消正在进行的请求。可以使用axios.CancelToken来创建一个取消请求的令牌。


    const source = axios.CancelToken.source();
    axios.get('/api/user', { cancelToken: source.token })
        .then(res => console.log(res.data))
        .catch(thrown => {
            if (axios.isCancel(thrown)) {
                console.log('Request canceled', thrown.message);
            } else {
                // 处理其他错误
            }
        });

    // 取消请求
    source.cancel('Operation canceled by the user.');

这里使用axios.CancelToken.source()创建一个令牌作为参数传递给axios.get()函数。当需要取消请求时，调用source.cancel()即可。如果请求已经被取消，则将抛出一个错误。

九、总结

axios是一个非常强大的客户端HTTP库，使用起来非常方便，支持请求和响应拦截器、错误处理、取消请求等功能。在GET请求中，使用params、headers、timeout、withCredentials等参数能够非常方便地实现多种需求。

以上是关于axios GET请求传参的详细介绍，相信读完本文后对axios的使用有更深刻的理解。