這篇文章主要介紹“axios怎么安裝及使用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“axios怎么安裝及使用”文章能幫助大家解決問題。
創(chuàng)新互聯(lián)建站專注于武平網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供武平營銷型網(wǎng)站建設(shè)，武平網(wǎng)站制作、武平網(wǎng)頁設(shè)計(jì)、武平網(wǎng)站官網(wǎng)定制、微信平臺(tái)小程序開發(fā)服務(wù)，打造武平網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供武平網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
axios基于es6的promise機(jī)制。Axios是一個(gè)基于promise的HTTP庫，類似于jQuery的ajax，用于http請(qǐng)求。Axios支持Promise API，在瀏覽器中發(fā)送XMLHttpRequests請(qǐng)求，在node.js中發(fā)送http請(qǐng)求；也可以攔截請(qǐng)求與響應(yīng)，或轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)。
本教程操作環(huán)境：windows7系統(tǒng)、ECMAScript 6版、Dell G3電腦。
axios是目前前端使用非常廣泛的網(wǎng)絡(luò)請(qǐng)求庫，包括Vue作者也是推薦在vue中使用axios；
它是一個(gè)封裝好的http請(qǐng)求庫，他是基于es6的promise機(jī)制實(shí)現(xiàn)的。
瀏覽器基于XMLHttpRequest對(duì)象封裝的，跟Ajax一樣，只不過他們開放的API使用有差別而已；
主要特點(diǎn)包括：
在瀏覽器中發(fā)送 XMLHttpRequests 請(qǐng)求；
在 node.js 中發(fā)送 http請(qǐng)求；
支持 Promise API；
攔截請(qǐng)求與響應(yīng)，比如：在請(qǐng)求前添加授權(quán)和響應(yīng)前做一些事情。
轉(zhuǎn)換請(qǐng)求數(shù)據(jù)和響應(yīng)數(shù)據(jù)，比如：進(jìn)行請(qǐng)求加密或者響應(yīng)數(shù)據(jù)加密。
取消請(qǐng)求
自動(dòng)轉(zhuǎn)換JSON數(shù)據(jù)
客戶端支持防御XSRF
使用 @vue/cli 4.5.13 版本創(chuàng)建一個(gè)只包含vue的項(xiàng)目，創(chuàng)建完成之后安裝npm install axios庫
所以整個(gè)項(xiàng)目的環(huán)境看起來就是這樣
當(dāng)然，并不是說axios不能夠在非 vue 的環(huán)境下使用，這里我只是為了寫代碼方便，普通的，使用瀏覽器 script 標(biāo)簽 引入 axios ，在window對(duì)象上就會(huì)有一個(gè) axios對(duì)象，這樣你在瀏覽器環(huán)境使用和我在vue中使用起來就是完全一致的了。
看起來就像這樣：
引入
效果
httpbin.org/
這個(gè)網(wǎng)址學(xué)習(xí)http的時(shí)候大家應(yīng)該都會(huì)聽說，對(duì)這個(gè)網(wǎng)址發(fā)請(qǐng)求，你發(fā)送請(qǐng)求的內(nèi)容會(huì)原樣的響應(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ā)起一個(gè) get 方法吧。
在app.vue中，我們引入axios，并且使用axios攜帶參數(shù)發(fā)送了一個(gè)get請(qǐng)求。
我們先來看一下瀏覽器的網(wǎng)絡(luò)請(qǐng)求
可以看到，我們發(fā)出的請(qǐng)求是成功了的。我們現(xiàn)在再來看一下我們 then中打印出來的響應(yīng)結(jié)果。
我們發(fā)現(xiàn)then中，打印出來的東西好像比我們網(wǎng)絡(luò)請(qǐng)求的返回值內(nèi)容要多。但是data這個(gè)對(duì)應(yīng)的值就是我們請(qǐng)求返回的結(jié)果。
ok。到現(xiàn)在，我們是可以使用axios發(fā)送網(wǎng)絡(luò)請(qǐng)求了。但是現(xiàn)在我們還是有很多的疑問。
axios({}) 這個(gè)方法能發(fā)出一個(gè)網(wǎng)絡(luò)請(qǐng)求，但是方法傳入的對(duì)象是什么意思呢？
then 打印出來的 res 返回值中，為什么會(huì)多了很多其他的參數(shù)？
axios 的官方文檔中已經(jīng)給出了很多的介紹了。當(dāng)然如果你是萌新，可能看起來會(huì)特別難受，啊，我就簡單學(xué)一個(gè)axios，有這么多東西要記嗎？
當(dāng)然不是啦！我現(xiàn)在就來簡單的 使用我的理解翻譯一些 常用的配置
重慶分公司
重慶分公司
{
// url(常用) 表示我們用來發(fā)請(qǐng)求的地址
url: '/user',
// method(常用) 表示我們用來發(fā)請(qǐng)求的方法，默認(rèn)是get
method: 'get',
// baseURL(常用) 表示我們用來發(fā)請(qǐng)求跟 URL,最終發(fā)起請(qǐng)求的地址是 baseURL+url
baseURL: 'https://some-domain.com/api/',
// headers(常用) 配置我們發(fā)起的網(wǎng)絡(luò)請(qǐng)求的請(qǐng)求頭，通常是攜帶token用來鑒權(quán)
headers: {'X-Requested-With': 'XMLHttpRequest'},
// params(常用) 這里配置的對(duì)象會(huì)作為參數(shù)拼接到url上 ?username=xiaomin&password=123456
// 通常是 get請(qǐng)求攜帶參數(shù)的地方(重要)
params: { username: 'xiaomin', password: '123456' },
// data(常用) data中的參數(shù)會(huì)被放到請(qǐng)求體中
// 通常是 post,put,delete請(qǐng)求攜帶參數(shù)的地方(重要)
// 可以傳輸二進(jìn)制，例如上傳圖片用的 FormData對(duì)象就可以用data來傳輸
data: {
firstName: 'Fred'
},
// timeout(常用) 設(shè)置請(qǐng)求的超時(shí)時(shí)間，超過了時(shí)間請(qǐng)求還沒有響應(yīng)的會(huì)會(huì)報(bào)錯(cuò)走到catch，默認(rèn)值是0 表示一直等待響應(yīng)
timeout: 1000,
// onUploadProgress 用來監(jiān)聽上傳的進(jìn)度，一般圖片上傳時(shí)候的顯示進(jìn)度條這里會(huì)用上
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
}上面是很常用的配置，推薦還是全部記住，當(dāng)然，我后面還會(huì)依據(jù)這些配置去做一些axios的高級(jí)用法
axios在返回值的時(shí)候，是會(huì)默認(rèn)的對(duì)我們的這次請(qǐng)求進(jìn)行一次包裝。
官方文檔頁給了一個(gè)很詳細(xì)的說明，我再來用我的語言翻譯一下下吧。
{
// 請(qǐng)求響應(yīng)的返回值
data: {},
// 請(qǐng)求狀態(tài)
status: 200,
// 狀態(tài)說明文字
statusText: 'OK',
// 請(qǐng)求的請(qǐng)求頭
headers: {},
// 這次請(qǐng)求用到的 配置 指 剛剛問題一的配置
config: {},
// 請(qǐng)求實(shí)例 表示 axios 底層 封裝的 XMLHttpRequest 的信息
request: {}
}ok。現(xiàn)在我們從發(fā)起請(qǐng)求到響應(yīng)結(jié)果的這個(gè)過程中我們都有所了解了。
接下來我在介紹一些經(jīng)常忽略的地方和一些小技巧
我們看到上面的代碼，因?yàn)槲覀儼l(fā)起請(qǐng)求，
get請(qǐng)求的參數(shù)一般是拼接到url上，所以我們?cè)赼xios中會(huì)用 params這個(gè)配置來攜帶我們請(qǐng)求參數(shù)
post請(qǐng)求的參數(shù)一般是放在請(qǐng)求體里面的，所以我們會(huì)在axios中使用data這個(gè)配置來表示我們的請(qǐng)求參數(shù)
在axios api介紹中，
針對(duì)get，我們發(fā)現(xiàn)還有這樣的一個(gè)api。 axios.get(url[, config])
我們來試一下怎么玩，改裝一下我們的 testGet方法
可以看出，axios.get 這個(gè)api只是把 url和method這兩個(gè)配置拆出來了。
注意啊，axios.get 這里有兩個(gè)參數(shù)，第一個(gè)是url，第二個(gè)是 我們的配置選項(xiàng)。
那么問題來了，這兩種寫法有什么區(qū)別呢？
直接翻看源碼找找定義。
axios包下的index.js引入了./lib/axios，這里又引入了一個(gè)./core/Axios
在這個(gè) ./core/Axios中。我們就可以看到下面的內(nèi)容。
我們可以看到，他就是在原型上綁定了 我們常用的 get post put .... 等常用方法，讓他去調(diào)this.request方法，參數(shù)就是把我們的配置信息給合并了，mergeConfig看方法名就知道這個(gè)是合并Config的一個(gè)方法，返回了最終的配置信息對(duì)象。
在29行這里還定義了 request方法，大致看一下就是根據(jù)配置，做一些優(yōu)化
比如方法名大小寫轉(zhuǎn)換。
比如最終給我們包裝成了一個(gè) promise對(duì)象返回
所以本質(zhì)上，axios({}) 和我們的 axios.get(url,{})是兩個(gè)一模一樣的方法。
ok，axios.post axios.put 等用法，和get類似
這兩種方法 可以說是蘿卜白菜，各有所愛。各有各的喜好，你自己使用那種方法就看你喜歡哪種啦。
話不多說貼代碼先，
uploadImg() {
console.log(this.file);
const formData = new FormData();
formData.append('file', this.file);
axios({
url: 'XXXXXXXXXXXXXXXXXXXXXXXXXX',
method: 'post',
data: formData,
onUploadProgress(progressEvent) {
let complete = (((progressEvent.loaded / progressEvent.total) * 100) | 0) + '%';
console.log('上傳 ' + complete);
},
}).then((res) => {
console.log('uploadImg res==>', res);
});
},其中 this.file是我們 input type為file 選中文件后，e.target.files的值，當(dāng)然，這個(gè)值是數(shù)組，我們需要他的第一個(gè)
注意的就是使用 data 傳遞了一個(gè)參數(shù)，參數(shù)類型是 FromData。
好的到這里，我們就簡單的學(xué)習(xí)的axios的使用，當(dāng)然會(huì)有很多的小伙伴說，就這啊，這個(gè)東西不是看一眼就會(huì)的嗎？
既然看到了這里。我肯定不會(huì)讓你白來的。加下來我們說一下高級(jí)用法。
學(xué)習(xí)高級(jí)用法之前，我們要問一下，為什么要這樣做。我們之前那樣做有哪些問題？
我們真實(shí)的開發(fā)環(huán)境中，會(huì)有線上地址，開發(fā)地址，測試地址。這些地址我們?cè)趺礃幽軌蜃龅娇焖俚那袚Q呢？
我們發(fā)現(xiàn)在axios的配置中，我們每一次都會(huì)改變的是 url method data params ，很少改變的是 header baseurl timeout，那么針對(duì)很少變動(dòng)的我們能不能統(tǒng)一的封裝一下。
每一次發(fā)請(qǐng)求的時(shí)候我想在控制臺(tái)上輸出一下我當(dāng)前請(qǐng)求的信息，能不能封裝起來，不要每一次都編寫。
axios的返回值里面，有太多東西是我們不需要的了，我們明明關(guān)注的只是 返回的 data，每一次請(qǐng)求返回的時(shí)候我們都要 res.data 一下，很煩，這一步能不能省略呢？
請(qǐng)求往往會(huì)遇到一些錯(cuò)誤，這些錯(cuò)誤我每一次都需要在 catch 中處理，代碼寫的又臭又長，明明只是一個(gè) log error 的功能，可是每一次請(qǐng)求的地方都需要寫 catch，這里能不能省略呢？
ok，有了問題，我們接下來寫代碼就會(huì)方便很多了。一個(gè)個(gè)解決，干就完事了。
在解決上面的問題之前，我們先介紹一些axios的高級(jí)用法，一開始，我們引入了axios，直接使用 axios({})，方法傳遞配置的方式發(fā)起網(wǎng)絡(luò)請(qǐng)求，在axios中進(jìn)行配置的方法，一共有3總
我們可以直接在 axios.default上進(jìn)行默認(rèn)配置
// 全局默認(rèn)配置 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.timeout = 1000 * 5
axios有一個(gè)create方法，返回的其實(shí)還是一個(gè)axios對(duì)象，但是我們?cè)?code>create中可以指定一些默認(rèn)配置，返回的實(shí)例對(duì)象使用的時(shí)候就會(huì)遵循這些默認(rèn)配置。
// axios實(shí)例默認(rèn)配置
const request = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000 * 8
});這個(gè)我們見過了，就不多說了。
// 方法配置
axios({url: '',baseURL: 'https://api.example.com', timeout: 1000 * 10})ok，介紹了三種配置，我們說一下配置的優(yōu)先級(jí)
優(yōu)先是請(qǐng)求的config參數(shù)配置；
其次是實(shí)例的default中的配置；
最后是全局的配置；
可能很多小伙伴還不懂這三個(gè)環(huán)境有什么區(qū)別。
首先假設(shè)我們的三種環(huán)境對(duì)應(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ì)先在測試環(huán)境下編寫代碼，測試環(huán)境的意思是，前端和后端的代碼都是在實(shí)時(shí)編寫的，比如我們前端對(duì)接的后端有2個(gè)人A,B，開發(fā)環(huán)境就有個(gè)一個(gè)功能發(fā)起的請(qǐng)求是要發(fā)送到A的電腦上的（A后端正在開發(fā)中），地址可能就是 192.168.0.1:8080/test-a，明天來編寫代碼又是要和B對(duì)接，這個(gè)時(shí)候的請(qǐng)求是會(huì)發(fā)送到B的電腦上，地址可能就是192.168.0.1:8080/test-b。測試環(huán)境的意思就是代碼實(shí)時(shí)在編寫，功能結(jié)構(gòu)是聯(lián)調(diào)到別人的本地。
現(xiàn)在代碼開發(fā)了一個(gè)星期，開發(fā)的差不多了，就會(huì)將代碼提交到開發(fā)環(huán)境。這個(gè)時(shí)候接口就是對(duì)接的 192.168.0.1:8080/dev這個(gè)地址
首先要明確，我們一直編寫代碼屬于測試環(huán)境，提交到開發(fā)環(huán)境是代碼的一個(gè)小版本編寫完成了，代碼在開發(fā)環(huán)境下是沒有我們本地測試環(huán)境變動(dòng)的那么快，我們之后在編寫其他功能的時(shí)候又是對(duì)接的測試環(huán)境。
提交到開發(fā)環(huán)境之后，公司里面的產(chǎn)品呀，測試人員呀，就會(huì)在開發(fā)環(huán)境上，使用你的代碼，看看你的代碼有沒有什么bug，如果有bug，你就需要在你的測試環(huán)境去修改bug，修改完成之后在提交到開發(fā)環(huán)境讓他們?nèi)y試，直到最終沒有bug 了，開發(fā)環(huán)境的代碼就會(huì)被提交到生產(chǎn)環(huán)境，生產(chǎn)環(huán)境的意思是這里的代碼是面向用戶了，是讓哪些什么都不懂的用戶來使用了。
有點(diǎn)繞口，小總結(jié)一下。
生產(chǎn)環(huán)境是面向用戶的
開發(fā)環(huán)境是面向測試人員的，他們來找bug的
測試環(huán)境是面向 我們這些coder的，我們?cè)谶@里編寫代碼
當(dāng)然，有一些小公司是沒有測試環(huán)境的，每一次代碼都是后端編寫完成提交到開發(fā)環(huán)境，前端直接對(duì)接開發(fā)環(huán)境的，遇到問題了后端就去改代碼，改完之后需要打包發(fā)布到開發(fā)環(huán)境，這樣前端才能繼續(xù)對(duì)接，就沒有測試環(huán)境直接連接到后端開發(fā)的電腦上這么方便。
這個(gè)baseUrl是什么東東，第一次見的人可能有點(diǎn)迷惑。舉個(gè)栗子：
添加用戶功能的接口可能是下面這樣的：
// 生產(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這個(gè)路徑，哪怕切換了環(huán)境后面的路徑也是不會(huì)修改的，那我們每次寫代碼能不能忽略前綴呢？
當(dāng)然可以，這就是 baseUrl的作用
可以理解成，真正的請(qǐng)求地址 = baseUrl + url
好的，了解這么多之后，我們就開始封裝我們的axios把
我們優(yōu)先來改一下我們的文件目錄結(jié)構(gòu)。
在utils中有一個(gè) 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í)例是有請(qǐng)求攔截器的，在這里會(huì)對(duì)我們的請(qǐng)求做一些攔截。
我們編寫代碼試試看這個(gè)config是什么東東
打印結(jié)果
就是我們的congif啊，那我們根據(jù)這個(gè)定制一一下
這樣我們的問題3就解決了
在請(qǐng)求的時(shí)候我們往往會(huì)添加token字段來鑒權(quán)，添加token的方法有很多，下面我來介紹幾種常用的，只負(fù)責(zé)添加。不管有沒有添加成功，不成功后端會(huì)報(bào)錯(cuò)的，之后我們?cè)谔幚砗蠖藞?bào)錯(cuò)的情況就好了。
api中手動(dòng)添加，需要了我就添加，代碼如下
請(qǐng)求傳參的時(shí)候添加一個(gè)自定義的參數(shù)，表示token字段需不需要。
之后在我們的請(qǐng)求攔截器中判斷這個(gè)字段進(jìn)行處理
在解決問題4和5之前。我先總結(jié)一下我遇到過的響應(yīng)方式。
方式1：后端不解決報(bào)錯(cuò)，直接丟給前端，這里我們最直觀的感受就是返回的狀態(tài)碼是500。
方式2：后端解決報(bào)錯(cuò)，每次出錯(cuò)包裝一下返回給前端，這里我們最直觀的感受是。每一次請(qǐng)求并不會(huì)出500錯(cuò)誤都是狀態(tài)碼為200成功的請(qǐng)求，但是返回值會(huì)多一些東西，舉個(gè)返回值的栗子，當(dāng)然，下面的code,msg這個(gè)不同的公司有不同的規(guī)范。
{
// 我們實(shí)際請(qǐng)求的返回值
data:{....},
// 我們實(shí)際請(qǐng)求的狀態(tài)碼，后端包裝報(bào)錯(cuò)的花，這個(gè)code會(huì)改變，比如500，或者每一個(gè)公司有直接的狀態(tài)碼規(guī)范
code:200,
// 服務(wù)器給我們的信息，一般成功的話沒有信息，出現(xiàn)異常了這個(gè)字段表示錯(cuò)誤原因
msg:"請(qǐng)求成功"
}
先看一下官方文檔，如何我們寫道我們的代碼里面打印一下這個(gè)response看看。
因?yàn)闉楦鶕?jù)
user編寫的接口地址是假的，為了展示效果我就切換成https://httpbin.org/get，不過這里的邏輯是不會(huì)變的哦，只是地址改變了
我們發(fā)現(xiàn)，響應(yīng)攔截器就是會(huì)過一邊我們的結(jié)果，這樣我們就可以在這里進(jìn)行一些代碼編寫。
比如問題4，我們只需要編寫成下面這樣就可以了。
現(xiàn)在我們來處理一下我們最棘手的問題。如何攔截錯(cuò)誤？
我們先引入一下elementUI（npm i element-ui -S），在遇到錯(cuò)誤的時(shí)候我們使用message組件進(jìn)行一個(gè)彈框提示。
攔截錯(cuò)誤之前，需要了解我們自己公司對(duì)應(yīng)的一套響應(yīng)策略，針對(duì)策略我們進(jìn)行不同的處理。
首先我們處理一下請(qǐng)求報(bào)錯(cuò)的情況，比如404，500等等
首行引入import { Message } from 'element-ui';
這個(gè)error還是要return一下，這樣才會(huì)被我們自己些的catch捕獲到，我們這里只是封裝了全局的報(bào)錯(cuò)提示，有的時(shí)候針對(duì)某些請(qǐng)求報(bào)錯(cuò)我們還需要自己catch處理。
請(qǐng)求正常的情況我們也還是要處理的，因?yàn)橛幸幌鹿竞蠖藭?huì)自己攔截錯(cuò)誤，返回狀態(tài)碼還是200 但是這個(gè)時(shí)候數(shù)據(jù)不對(duì)并且有錯(cuò)誤信息
這里我們規(guī)定，所有的請(qǐng)求都會(huì)有
data,code,msg字段，請(qǐng)求成功code是200，data返回正常數(shù)據(jù)，請(qǐng)求失敗了code是錯(cuò)誤狀態(tài)碼，data沒有數(shù)據(jù)，并且有~錯(cuò)誤提示。（自己封裝的時(shí)候根據(jù)自己公司的后臺(tái)接口規(guī)范來寫）
ok完整的代碼如下，首部引入的 Router
關(guān)于“axios怎么安裝及使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。
