當(dāng)前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

axios怎么安装及使用

發(fā)布時間：2023/12/19 综合教程 36 生活家

生活随笔收集整理的這篇文章主要介紹了 axios怎么安装及使用小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

這篇文章主要介紹“axios怎么安裝及使用”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“axios怎么安裝及使用”文章能幫助大家解決問題。

axios基于es6的promise機(jī)制。Axios是一個基于promise的HTTP庫，類似于jQuery的ajax，用于http請求。Axios支持Promise API，在瀏覽器中發(fā)送XMLHttpRequests請求，在node.js中發(fā)送http請求；也可以攔截請求與響應(yīng)，或轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)。

本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。

axios基本介紹

axios是目前前端使用非常廣泛的網(wǎng)絡(luò)請求庫，包括Vue作者也是推薦在vue中使用axios；

它是一個封裝好的http請求庫，他是基于es6的promise機(jī)制實(shí)現(xiàn)的。

瀏覽器基于XMLHttpRequest對象封裝的，跟Ajax一樣，只不過他們開放的API使用有差別而已；

主要特點(diǎn)包括：

在瀏覽器中發(fā)送 XMLHttpRequests 請求；
在 node.js 中發(fā)送 http請求；
支持 Promise API；
攔截請求與響應(yīng)，比如：在請求前添加授權(quán)和響應(yīng)前做一些事情。
轉(zhuǎn)換請求數(shù)據(jù)和響應(yīng)數(shù)據(jù)，比如：進(jìn)行請求加密或者響應(yīng)數(shù)據(jù)加密。
取消請求
自動轉(zhuǎn)換JSON數(shù)據(jù)
客戶端支持防御XSRF

項(xiàng)目環(huán)境介紹

使用 @vue/cli 4.5.13 版本創(chuàng)建一個只包含vue的項(xiàng)目，創(chuàng)建完成之后安裝npm install axios庫

所以整個項(xiàng)目的環(huán)境看起來就是這樣

當(dāng)然，并不是說axios不能夠在非 vue 的環(huán)境下使用，這里我只是為了寫代碼方便，普通的，使用瀏覽器 script 標(biāo)簽引入 axios ，在window對象上就會有一個 axios對象，這樣你在瀏覽器環(huán)境使用和我在vue中使用起來就是完全一致的了。

看起來就像這樣：

引入

效果

請求地址

httpbin.org/

這個網(wǎng)址學(xué)習(xí)http的時候大家應(yīng)該都會聽說，對這個網(wǎng)址發(fā)請求，你發(fā)送請求的內(nèi)容會原樣的響應(yīng)回來。

基本使用

第一個請求

我們先看一下官方文檔給我們介紹的 axios api 列表

axios(config)axios(url[,config])
----------------------分割線----------------------
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.options(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])

分割線前面的方法，官方給了示例，分割線后面的方法，官方只是提了一下。

看到這里可能還有點(diǎn)懵，寫點(diǎn)代碼就立刻能看清楚拉。

根據(jù)axios的官方文檔。我們先來簡單的發(fā)起一個 get 方法吧。

在app.vue中，我們引入axios，并且使用axios攜帶參數(shù)發(fā)送了一個get請求。

我們先來看一下瀏覽器的網(wǎng)絡(luò)請求

可以看到，我們發(fā)出的請求是成功了的。我們現(xiàn)在再來看一下我們 then中打印出來的響應(yīng)結(jié)果。

我們發(fā)現(xiàn)then中，打印出來的東西好像比我們網(wǎng)絡(luò)請求的返回值內(nèi)容要多。但是data這個對應(yīng)的值就是我們請求返回的結(jié)果。

ok。到現(xiàn)在，我們是可以使用axios發(fā)送網(wǎng)絡(luò)請求了。但是現(xiàn)在我們還是有很多的疑問。

axios({}) 這個方法能發(fā)出一個網(wǎng)絡(luò)請求，但是方法傳入的對象是什么意思呢？
then 打印出來的 res 返回值中，為什么會多了很多其他的參數(shù)？

axios的配置

axios 的官方文檔中已經(jīng)給出了很多的介紹了。當(dāng)然如果你是萌新，可能看起來會特別難受，啊，我就簡單學(xué)一個axios，有這么多東西要記嗎？

當(dāng)然不是啦！我現(xiàn)在就來簡單的使用我的理解翻譯一些常用的配置

{
//url(常用)表示我們用來發(fā)請求的地址
url:'/user',

//method(常用)表示我們用來發(fā)請求的方法，默認(rèn)是get
method:'get',

//baseURL(常用)表示我們用來發(fā)請求跟URL,最終發(fā)起請求的地址是baseURL+url
baseURL:'https://some-domain.com/api/',

//headers(常用)配置我們發(fā)起的網(wǎng)絡(luò)請求的請求頭，通常是攜帶token用來鑒權(quán)
headers:{'X-Requested-With':'XMLHttpRequest'},

//params(常用)這里配置的對象會作為參數(shù)拼接到url上?username=xiaomin&password=123456
//通常是get請求攜帶參數(shù)的地方(重要)
params:{username:'xiaomin',password:'123456'},

//data(常用)data中的參數(shù)會被放到請求體中
//通常是post,put,delete請求攜帶參數(shù)的地方(重要)
//可以傳輸二進(jìn)制，例如上傳圖片用的FormData對象就可以用data來傳輸
data:{
firstName:'Fred'
},

//timeout(常用)設(shè)置請求的超時時間，超過了時間請求還沒有響應(yīng)的會會報錯走到catch，默認(rèn)值是0表示一直等待響應(yīng)
timeout:1000,

//onUploadProgress用來監(jiān)聽上傳的進(jìn)度，一般圖片上傳時候的顯示進(jìn)度條這里會用上
onUploadProgress:function(progressEvent){
//Dowhateveryouwantwiththenativeprogressevent
},
}

上面是很常用的配置，推薦還是全部記住，當(dāng)然，我后面還會依據(jù)這些配置去做一些axios的高級用法

返回包裝對象介紹

axios在返回值的時候，是會默認(rèn)的對我們的這次請求進(jìn)行一次包裝。

官方文檔頁給了一個很詳細(xì)的說明，我再來用我的語言翻譯一下下吧。

{
//請求響應(yīng)的返回值
data:{},
//請求狀態(tài)
status:200,
//狀態(tài)說明文字
statusText:'OK',
//請求的請求頭
headers:{},
//這次請求用到的配置指剛剛問題一的配置
config:{},
//請求實(shí)例表示axios底層封裝的XMLHttpRequest的信息
request:{}
}

ok。現(xiàn)在我們從發(fā)起請求到響應(yīng)結(jié)果的這個過程中我們都有所了解了。

接下來我在介紹一些經(jīng)常忽略的地方和一些小技巧

小誤區(qū)

我們看到上面的代碼，因?yàn)槲覀儼l(fā)起請求，

get請求的參數(shù)一般是拼接到url上，所以我們在axios中會用 params這個配置來攜帶我們請求參數(shù)
post請求的參數(shù)一般是放在請求體里面的，所以我們會在axios中使用data這個配置來表示我們的請求參數(shù)

小技巧

在axios api介紹中，

針對get，我們發(fā)現(xiàn)還有這樣的一個api。 axios.get(url[, config])

我們來試一下怎么玩，改裝一下我們的 testGet方法

可以看出，axios.get 這個api只是把 url和method這兩個配置拆出來了。

注意啊，axios.get 這里有兩個參數(shù)，第一個是url，第二個是我們的配置選項(xiàng)。

注意

那么問題來了，這兩種寫法有什么區(qū)別呢？

直接翻看源碼找找定義。

axios包下的index.js引入了./lib/axios，這里又引入了一個./core/Axios

在這個 ./core/Axios中。我們就可以看到下面的內(nèi)容。

我們可以看到，他就是在原型上綁定了我們常用的 get post put .... 等常用方法，讓他去調(diào)this.request方法，參數(shù)就是把我們的配置信息給合并了，mergeConfig看方法名就知道這個是合并Config的一個方法，返回了最終的配置信息對象。

在29行這里還定義了 request方法，大致看一下就是根據(jù)配置，做一些優(yōu)化

比如方法名大小寫轉(zhuǎn)換。

比如最終給我們包裝成了一個 promise對象返回

所以本質(zhì)上，axios({}) 和我們的 axios.get(url,{})是兩個一模一樣的方法。

ok，axios.post axios.put 等用法，和get類似

這兩種方法可以說是蘿卜白菜，各有所愛。各有各的喜好，你自己使用那種方法就看你喜歡哪種啦。

文件上傳

話不多說貼代碼先，

uploadImg(){
console.log(this.file);
constformData=newFormData();
formData.append('file',this.file);
axios({
url:'XXXXXXXXXXXXXXXXXXXXXXXXXX',
method:'post',
data:formData,
onUploadProgress(progressEvent){
letcomplete=(((progressEvent.loaded/progressEvent.total)*100)|0)+'%';
console.log('上傳'+complete);
},
}).then((res)=>{
console.log('uploadImgres==>',res);
});
},

其中 this.file是我們 input type為file 選中文件后，e.target.files的值，當(dāng)然，這個值是數(shù)組，我們需要他的第一個

注意的就是使用 data 傳遞了一個參數(shù)，參數(shù)類型是 FromData。

好的到這里，我們就簡單的學(xué)習(xí)的axios的使用，當(dāng)然會有很多的小伙伴說，就這啊，這個東西不是看一眼就會的嗎？

既然看到了這里。我肯定不會讓你白來的。加下來我們說一下高級用法。

高級用法

學(xué)習(xí)高級用法之前，我們要問一下，為什么要這樣做。我們之前那樣做有哪些問題？

我們真實(shí)的開發(fā)環(huán)境中，會有線上地址，開發(fā)地址，測試地址。這些地址我們怎么樣能夠做到快速的切換呢？
我們發(fā)現(xiàn)在axios的配置中，我們每一次都會改變的是 url method data params ，很少改變的是 header baseurl timeout，那么針對很少變動的我們能不能統(tǒng)一的封裝一下。
每一次發(fā)請求的時候我想在控制臺上輸出一下我當(dāng)前請求的信息，能不能封裝起來，不要每一次都編寫。
axios的返回值里面，有太多東西是我們不需要的了，我們明明關(guān)注的只是返回的 data，每一次請求返回的時候我們都要 res.data 一下，很煩，這一步能不能省略呢？
請求往往會遇到一些錯誤，這些錯誤我每一次都需要在 catch 中處理，代碼寫的又臭又長，明明只是一個 log error 的功能，可是每一次請求的地方都需要寫 catch，這里能不能省略呢？

ok，有了問題，我們接下來寫代碼就會方便很多了。一個個解決，干就完事了。

axios對象

在解決上面的問題之前，我們先介紹一些axios的高級用法，一開始，我們引入了axios，直接使用 axios({})，方法傳遞配置的方式發(fā)起網(wǎng)絡(luò)請求，在axios中進(jìn)行配置的方法，一共有3總

全局默認(rèn)配置

我們可以直接在 axios.default上進(jìn)行默認(rèn)配置

//全局默認(rèn)配置
axios.defaults.baseURL='https://api.example.com';
axios.defaults.timeout=1000*5

axios實(shí)例配置

axios有一個create方法，返回的其實(shí)還是一個axios對象，但是我們在create中可以指定一些默認(rèn)配置，返回的實(shí)例對象使用的時候就會遵循這些默認(rèn)配置。

//axios實(shí)例默認(rèn)配置
constrequest=axios.create({
baseURL:'https://api.example.com',
timeout:1000*8
});

axios方法配置

這個我們見過了，就不多說了。

//方法配置
axios({url:'',baseURL:'https://api.example.com',timeout:1000*10})

ok，介紹了三種配置，我們說一下配置的優(yōu)先級

優(yōu)先是請求的config參數(shù)配置；
其次是實(shí)例的default中的配置；
最后是全局的配置；

生產(chǎn)環(huán)境，開發(fā)環(huán)境，測試環(huán)境。

可能很多小伙伴還不懂這三個環(huán)境有什么區(qū)別。

首先假設(shè)我們的三種環(huán)境對應(yīng)的地址如下

//生產(chǎn)環(huán)境
192.168.0.1:8080/
//開發(fā)環(huán)境
192.168.0.1:8080/dev/
//測試環(huán)境
192.168.0.1:8080/test-a/

首先，項(xiàng)目是前后端分離的，我們會先在測試環(huán)境下編寫代碼，測試環(huán)境的意思是，前端和后端的代碼都是在實(shí)時編寫的，比如我們前端對接的后端有2個人A,B，開發(fā)環(huán)境就有個一個功能發(fā)起的請求是要發(fā)送到A的電腦上的（A后端正在開發(fā)中），地址可能就是 192.168.0.1:8080/test-a，明天來編寫代碼又是要和B對接，這個時候的請求是會發(fā)送到B的電腦上，地址可能就是192.168.0.1:8080/test-b。測試環(huán)境的意思就是代碼實(shí)時在編寫，功能結(jié)構(gòu)是聯(lián)調(diào)到別人的本地。

現(xiàn)在代碼開發(fā)了一個星期，開發(fā)的差不多了，就會將代碼提交到開發(fā)環(huán)境。這個時候接口就是對接的 192.168.0.1:8080/dev這個地址

首先要明確，我們一直編寫代碼屬于測試環(huán)境，提交到開發(fā)環(huán)境是代碼的一個小版本編寫完成了，代碼在開發(fā)環(huán)境下是沒有我們本地測試環(huán)境變動的那么快，我們之后在編寫其他功能的時候又是對接的測試環(huán)境。

提交到開發(fā)環(huán)境之后，公司里面的產(chǎn)品呀，測試人員呀，就會在開發(fā)環(huán)境上，使用你的代碼，看看你的代碼有沒有什么bug，如果有bug，你就需要在你的測試環(huán)境去修改bug，修改完成之后在提交到開發(fā)環(huán)境讓他們?nèi)y試，直到最終沒有bug 了，開發(fā)環(huán)境的代碼就會被提交到生產(chǎn)環(huán)境，生產(chǎn)環(huán)境的意思是這里的代碼是面向用戶了，是讓哪些什么都不懂的用戶來使用了。

有點(diǎn)繞口，小總結(jié)一下。

生產(chǎn)環(huán)境是面向用戶的

開發(fā)環(huán)境是面向測試人員的，他們來找bug的

測試環(huán)境是面向我們這些coder的，我們在這里編寫代碼

當(dāng)然，有一些小公司是沒有測試環(huán)境的，每一次代碼都是后端編寫完成提交到開發(fā)環(huán)境，前端直接對接開發(fā)環(huán)境的，遇到問題了后端就去改代碼，改完之后需要打包發(fā)布到開發(fā)環(huán)境，這樣前端才能繼續(xù)對接，就沒有測試環(huán)境直接連接到后端開發(fā)的電腦上這么方便。

baseUrl

這個baseUrl是什么東東，第一次見的人可能有點(diǎn)迷惑。舉個栗子：

添加用戶功能的接口可能是下面這樣的：

//生產(chǎn)環(huán)境
192.168.0.1:8080/user/add
//開發(fā)環(huán)境
192.168.0.1:8080/dev/user/add
//測試環(huán)境
192.168.0.1:8080/test-a/user/add

我們很快就發(fā)現(xiàn)了，明明我們添加用戶只是關(guān)心 /user/add這個路徑，哪怕切換了環(huán)境后面的路徑也是不會修改的，那我們每次寫代碼能不能忽略前綴呢？

當(dāng)然可以，這就是 baseUrl的作用

可以理解成，真正的請求地址 = baseUrl + url

好的，了解這么多之后，我們就開始封裝我們的axios把

封裝axios默認(rèn)配置

我們優(yōu)先來改一下我們的文件目錄結(jié)構(gòu)。

在utils中有一個 request.js，在這里我們封裝我們的axios。

在api目錄中有user.js 在這里，我們使用我們封裝的request，管理和user有關(guān)的接口

在需要調(diào)接口的地方我們就直接引入api中的方法就好了。

首先在 utils/request.js中編寫以下代碼。

在api/user.js中編寫一下代碼

app.vue中調(diào)用

ok，這樣依賴我們就可以解決我們之前提出的問題1和問題2了

請求攔截器

官方文檔告訴我們，axios的實(shí)例是有請求攔截器的，在這里會對我們的請求做一些攔截。

我們編寫代碼試試看這個config是什么東東

打印結(jié)果

就是我們的congif啊，那我們根據(jù)這個定制一一下

這樣我們的問題3就解決了

添加token請求頭

在請求的時候我們往往會添加token字段來鑒權(quán)，添加token的方法有很多，下面我來介紹幾種常用的，只負(fù)責(zé)添加。不管有沒有添加成功，不成功后端會報錯的，之后我們在處理后端報錯的情況就好了。

api中手動添加，需要了我就添加，代碼如下

請求傳參的時候添加一個自定義的參數(shù)，表示token字段需不需要。

之后在我們的請求攔截器中判斷這個字段進(jìn)行處理

響應(yīng)方式

在解決問題4和5之前。我先總結(jié)一下我遇到過的響應(yīng)方式。

方式1：后端不解決報錯，直接丟給前端，這里我們最直觀的感受就是返回的狀態(tài)碼是500。

方式2：后端解決報錯，每次出錯包裝一下返回給前端，這里我們最直觀的感受是。每一次請求并不會出500錯誤都是狀態(tài)碼為200成功的請求，但是返回值會多一些東西，舉個返回值的栗子，當(dāng)然，下面的code,msg這個不同的公司有不同的規(guī)范。

{
//我們實(shí)際請求的返回值
	data:{....},
//我們實(shí)際請求的狀態(tài)碼，后端包裝報錯的花，這個code會改變，比如500，或者每一個公司有直接的狀態(tài)碼規(guī)范
code:200,
//服務(wù)器給我們的信息，一般成功的話沒有信息，出現(xiàn)異常了這個字段表示錯誤原因
msg:"請求成功"
}

響應(yīng)攔截器

先看一下官方文檔，如何我們寫道我們的代碼里面打印一下這個response看看。

因?yàn)闉楦鶕?jù)user編寫的接口地址是假的，為了展示效果我就切換成https://httpbin.org/get，不過這里的邏輯是不會變的哦，只是地址改變了

我們發(fā)現(xiàn)，響應(yīng)攔截器就是會過一邊我們的結(jié)果，這樣我們就可以在這里進(jìn)行一些代碼編寫。

比如問題4，我們只需要編寫成下面這樣就可以了。

現(xiàn)在我們來處理一下我們最棘手的問題。如何攔截錯誤？

我們先引入一下elementUI（npm i element-ui -S），在遇到錯誤的時候我們使用message組件進(jìn)行一個彈框提示。

攔截錯誤之前，需要了解我們自己公司對應(yīng)的一套響應(yīng)策略，針對策略我們進(jìn)行不同的處理。

首先我們處理一下請求報錯的情況，比如404，500等等

首行引入import { Message } from 'element-ui';

這個error還是要return一下，這樣才會被我們自己些的catch捕獲到，我們這里只是封裝了全局的報錯提示，有的時候針對某些請求報錯我們還需要自己catch處理。

請求正常的情況我們也還是要處理的，因?yàn)橛幸幌鹿竞蠖藭约簲r截錯誤，返回狀態(tài)碼還是200 但是這個時候數(shù)據(jù)不對并且有錯誤信息

這里我們規(guī)定，所有的請求都會有 data,code,msg字段，請求成功code是200，data返回正常數(shù)據(jù)，請求失敗了code是錯誤狀態(tài)碼，data沒有數(shù)據(jù)，并且有~錯誤提示。（自己封裝的時候根據(jù)自己公司的后臺接口規(guī)范來寫）

ok完整的代碼如下，首部引入的 Router

總結(jié)

以上是生活随笔為你收集整理的axios怎么安装及使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

axios

上一篇： ETAG is returned by
下一篇： sap-ui-core.js refer