国产一区二区精品-国产一区二区精品久-国产一区二区精品久久-国产一区二区精品久久91-免费毛片播放-免费毛片基地

千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁(yè)  >  技術(shù)干貨  > Axios Get 傳參詳解

Axios Get 傳參詳解

來源:千鋒教育
發(fā)布人:xqq
時(shí)間: 2023-11-23 13:58:27 1700719107

一、基礎(chǔ)使用

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

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


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

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

二、傳遞參數(shù)

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

以傳遞用戶名為例,可以將用戶名拼接在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ù)為一個(gè)對(duì)象,其中的鍵值對(duì)表示請(qǐng)求的參數(shù)和對(duì)應(yīng)的值。這種方式不僅是安全的,而且方便管理和維護(hù)。

三、URL編碼

當(dāng)使用params參數(shù)傳遞參數(shù)時(shí),axios會(huì)將參數(shù)編碼為url查詢字符串,例如:/api/user?username=Tom。但是,在傳遞一些特殊字符時(shí),可能需要使用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è)置請(qǐng)求頭,通常用于身份驗(yàn)證等。可以使用headers參數(shù)傳遞一個(gè)對(duì)象,其中鍵值對(duì)表示請(qǐng)求頭的名稱和對(duì)應(yīng)的值。


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

這樣可以在請(qǐng)求頭中添加Authorization字段,使用Bearer + token的格式表示身份驗(yàn)證信息。

五、Timeout參數(shù)

Timeout參數(shù)用于指定請(qǐng)求的超時(shí)時(shí)間,單位為毫秒,默認(rèn)值為0,表示沒有超時(shí)時(shí)間限制。可以設(shè)置一個(gè)數(shù)字,表示超時(shí)時(shí)間的毫秒數(shù)。


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

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

六、withCredentials參數(shù)

withCredentials參數(shù)用于指定是否在跨域請(qǐng)求時(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表示在跨域請(qǐng)求時(shí)發(fā)送第三方cookie。

七、多個(gè)參數(shù)

GET請(qǐng)求中同時(shí)傳遞多個(gè)參數(shù)時(shí),可以將多個(gè)參數(shù)組合成一個(gè)對(duì)象,然后作為params參數(shù)的值傳遞。


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

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

八、取消請(qǐng)求

在實(shí)際開發(fā)中,有時(shí)需要取消正在進(jìn)行的請(qǐng)求。可以使用axios.CancelToken來創(chuàng)建一個(gè)取消請(qǐ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 {
                // 處理其他錯(cuò)誤
            }
        });

    // 取消請(qǐng)求
    source.cancel('Operation canceled by the user.');

這里使用axios.CancelToken.source()創(chuàng)建一個(gè)令牌作為參數(shù)傳遞給axios.get()函數(shù)。當(dāng)需要取消請(qǐng)求時(shí),調(diào)用source.cancel()即可。如果請(qǐng)求已經(jīng)被取消,則將拋出一個(gè)錯(cuò)誤。

九、總結(jié)

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

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

聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT