一、基礎(chǔ)使用

使用axios進(jìn)行客戶端請求，首先需要導(dǎo)入axios的庫文件，可以使用CDN的方式引用也可以npm install之后import進(jìn)來。

axios的基本用法是在axios.get()中傳入請求地址url，然后返回一個Promise對象，使用.then()方法來處理請求的結(jié)果。

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

除了url之外，axios.get()函數(shù)接受一個可選的對象參數(shù)，包括params、headers、timeout、withCredentials等參數(shù)，在后續(xù)的小標(biāo)題中會詳細(xì)介紹。

二、傳遞參數(shù)

在實際開發(fā)中，GET請求需要傳遞參數(shù)是非常常見的，比如傳遞用戶名、密碼、頁碼等信息。

以傳遞用戶名為例，可以將用戶名拼接在url路徑后面，如下：

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

這樣的方式存在一些弊端，比如參數(shù)不安全、不方便等。因此，推薦使用params參數(shù)，例如：

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

這里params參數(shù)為一個對象，其中的鍵值對表示請求的參數(shù)和對應(yīng)的值。這種方式不僅是安全的，而且方便管理和維護(hù)。

三、URL編碼

當(dāng)使用params參數(shù)傳遞參數(shù)時，axios會將參數(shù)編碼為url查詢字符串，例如：/api/user?username=Tom。但是，在傳遞一些特殊字符時，可能需要使用URL編碼。

可以使用encodeURIComponent()來編碼參數(shù)，例如：

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

四、Headers參數(shù)

Headers參數(shù)用于設(shè)置請求頭，通常用于身份驗證等?？梢允褂胔eaders參數(shù)傳遞一個對象，其中鍵值對表示請求頭的名稱和對應(yīng)的值。

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

這樣可以在請求頭中添加Authorization字段，使用Bearer + token的格式表示身份驗證信息。

五、Timeout參數(shù)

Timeout參數(shù)用于指定請求的超時時間，單位為毫秒，默認(rèn)值為0，表示沒有超時時間限制?？梢栽O(shè)置一個數(shù)字，表示超時時間的毫秒數(shù)。

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

這里的timeout參數(shù)表示請求的最長等待時間為5秒，如果超過5秒服務(wù)器沒有響應(yīng)，則請求將被中止。

六、withCredentials參數(shù)

withCredentials參數(shù)用于指定是否在跨域請求時發(fā)送第三方cookie，默認(rèn)值為false。

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

這里withCredentials參數(shù)設(shè)為true表示在跨域請求時發(fā)送第三方cookie。

七、多個參數(shù)

GET請求中同時傳遞多個參數(shù)時，可以將多個參數(shù)組合成一個對象，然后作為params參數(shù)的值傳遞。

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

這里將用戶名和密碼都放在了params參數(shù)中，以對象形式傳遞。

八、取消請求

在實際開發(fā)中，有時需要取消正在進(jìn)行的請求。可以使用axios.CancelToken來創(chuàng)建一個取消請求的令牌。

    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()創(chuàng)建一個令牌作為參數(shù)傳遞給axios.get()函數(shù)。當(dāng)需要取消請求時，調(diào)用source.cancel()即可。如果請求已經(jīng)被取消，則將拋出一個錯誤。

九、總結(jié)

axios是一個非常強大的客戶端HTTP庫，使用起來非常方便，支持請求和響應(yīng)攔截器、錯誤處理、取消請求等功能。在GET請求中，使用params、headers、timeout、withCredentials等參數(shù)能夠非常方便地實現(xiàn)多種需求。

以上是關(guān)于axios GET請求傳參的詳細(xì)介紹，相信讀完本文后對axios的使用有更深刻的理解。