溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“axios怎么安裝及使用”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“axios怎么安裝及使用”文章能幫助大家解決問題。
axios基于es6的promise機制。Axios是一個基于promise的HTTP庫，類似于jQuery的ajax，用于http請求。Axios支持Promise API，在瀏覽器中發送XMLHttpRequests請求，在node.js中發送http請求；也可以攔截請求與響應，或轉換請求數據和響應數據。
本教程操作環境：windows7系統、ECMAScript 6版、Dell G3電腦。
axios是目前前端使用非常廣泛的網絡請求庫，包括Vue作者也是推薦在vue中使用axios；
它是一個封裝好的http請求庫，他是基于es6的promise機制實現的。
瀏覽器基于XMLHttpRequest對象封裝的，跟Ajax一樣，只不過他們開放的API使用有差別而已；
主要特點包括：
在瀏覽器中發送 XMLHttpRequests 請求；
在 node.js 中發送 http請求；
支持 Promise API；
攔截請求與響應，比如：在請求前添加授權和響應前做一些事情。
轉換請求數據和響應數據，比如：進行請求加密或者響應數據加密。
取消請求
自動轉換JSON數據
客戶端支持防御XSRF
使用 @vue/cli 4.5.13 版本創建一個只包含vue的項目，創建完成之后安裝npm install axios庫
所以整個項目的環境看起來就是這樣
當然，并不是說axios不能夠在非 vue 的環境下使用，這里我只是為了寫代碼方便，普通的，使用瀏覽器 script 標簽 引入 axios ，在window對象上就會有一個 axios對象，這樣你在瀏覽器環境使用和我在vue中使用起來就是完全一致的了。
看起來就像這樣：
引入
效果
httpbin.org/
這個網址學習http的時候大家應該都會聽說，對這個網址發請求，你發送請求的內容會原樣的響應回來。
我們先看一下官方文檔給我們介紹的 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]])
分割線前面的方法，官方給了示例，分割線后面的方法，官方只是提了一下。
看到這里可能還有點懵，寫點代碼就立刻能看清楚拉。
根據axios的官方文檔。我們先來簡單的發起一個 get 方法吧。
在app.vue中，我們引入axios，并且使用axios攜帶參數發送了一個get請求。
我們先來看一下瀏覽器的網絡請求
可以看到，我們發出的請求是成功了的。我們現在再來看一下我們 then中打印出來的響應結果。
我們發現then中，打印出來的東西好像比我們網絡請求的返回值內容要多。但是data這個對應的值就是我們請求返回的結果。
ok。到現在，我們是可以使用axios發送網絡請求了。但是現在我們還是有很多的疑問。
axios({}) 這個方法能發出一個網絡請求，但是方法傳入的對象是什么意思呢？
then 打印出來的 res 返回值中，為什么會多了很多其他的參數？
axios 的官方文檔中已經給出了很多的介紹了。當然如果你是萌新，可能看起來會特別難受，啊，我就簡單學一個axios，有這么多東西要記嗎？
當然不是啦！我現在就來簡單的 使用我的理解翻譯一些 常用的配置
{
// url(常用) 表示我們用來發請求的地址
url: '/user',
// method(常用) 表示我們用來發請求的方法，默認是get
method: 'get',
// baseURL(常用) 表示我們用來發請求跟 URL,最終發起請求的地址是 baseURL+url
baseURL: 'https://some-domain.com/api/',
// headers(常用) 配置我們發起的網絡請求的請求頭，通常是攜帶token用來鑒權
headers: {'X-Requested-With': 'XMLHttpRequest'},
// params(常用) 這里配置的對象會作為參數拼接到url上 ?username=xiaomin&password=123456
// 通常是 get請求攜帶參數的地方(重要)
params: { username: 'xiaomin', password: '123456' },
// data(常用) data中的參數會被放到請求體中
// 通常是 post,put,delete請求攜帶參數的地方(重要)
// 可以傳輸二進制，例如上傳圖片用的 FormData對象就可以用data來傳輸
data: {
firstName: 'Fred'
},
// timeout(常用) 設置請求的超時時間，超過了時間請求還沒有響應的會會報錯走到catch，默認值是0 表示一直等待響應
timeout: 1000,
// onUploadProgress 用來監聽上傳的進度，一般圖片上傳時候的顯示進度條這里會用上
onUploadProgress: function (progressEvent) {
// Do whatever you want with the native progress event
},
}上面是很常用的配置，推薦還是全部記住，當然，我后面還會依據這些配置去做一些axios的高級用法
axios在返回值的時候，是會默認的對我們的這次請求進行一次包裝。
官方文檔頁給了一個很詳細的說明，我再來用我的語言翻譯一下下吧。
{
// 請求響應的返回值
data: {},
// 請求狀態
status: 200,
// 狀態說明文字
statusText: 'OK',
// 請求的請求頭
headers: {},
// 這次請求用到的 配置 指 剛剛問題一的配置
config: {},
// 請求實例 表示 axios 底層 封裝的 XMLHttpRequest 的信息
request: {}
}ok。現在我們從發起請求到響應結果的這個過程中我們都有所了解了。
接下來我在介紹一些經常忽略的地方和一些小技巧
我們看到上面的代碼，因為我們發起請求，
get請求的參數一般是拼接到url上，所以我們在axios中會用 params這個配置來攜帶我們請求參數
post請求的參數一般是放在請求體里面的，所以我們會在axios中使用data這個配置來表示我們的請求參數
在axios api介紹中，
針對get，我們發現還有這樣的一個api。 axios.get(url[, config])
我們來試一下怎么玩，改裝一下我們的 testGet方法
可以看出，axios.get 這個api只是把 url和method這兩個配置拆出來了。
注意啊，axios.get 這里有兩個參數，第一個是url，第二個是 我們的配置選項。
那么問題來了，這兩種寫法有什么區別呢？
直接翻看源碼找找定義。
axios包下的index.js引入了./lib/axios，這里又引入了一個./core/Axios
在這個 ./core/Axios中。我們就可以看到下面的內容。
我們可以看到，他就是在原型上綁定了 我們常用的 get post put .... 等常用方法，讓他去調this.request方法，參數就是把我們的配置信息給合并了，mergeConfig看方法名就知道這個是合并Config的一個方法，返回了最終的配置信息對象。
在29行這里還定義了 request方法，大致看一下就是根據配置，做一些優化
比如方法名大小寫轉換。
比如最終給我們包裝成了一個 promise對象返回
所以本質上，axios({}) 和我們的 axios.get(url,{})是兩個一模一樣的方法。
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的值，當然，這個值是數組，我們需要他的第一個
注意的就是使用 data 傳遞了一個參數，參數類型是 FromData。
好的到這里，我們就簡單的學習的axios的使用，當然會有很多的小伙伴說，就這啊，這個東西不是看一眼就會的嗎？
既然看到了這里。我肯定不會讓你白來的。加下來我們說一下高級用法。
學習高級用法之前，我們要問一下，為什么要這樣做。我們之前那樣做有哪些問題？
我們真實的開發環境中，會有線上地址，開發地址，測試地址。這些地址我們怎么樣能夠做到快速的切換呢？
我們發現在axios的配置中，我們每一次都會改變的是 url method data params ，很少改變的是 header baseurl timeout，那么針對很少變動的我們能不能統一的封裝一下。
每一次發請求的時候我想在控制臺上輸出一下我當前請求的信息，能不能封裝起來，不要每一次都編寫。
axios的返回值里面，有太多東西是我們不需要的了，我們明明關注的只是 返回的 data，每一次請求返回的時候我們都要 res.data 一下，很煩，這一步能不能省略呢？
請求往往會遇到一些錯誤，這些錯誤我每一次都需要在 catch 中處理，代碼寫的又臭又長，明明只是一個 log error 的功能，可是每一次請求的地方都需要寫 catch，這里能不能省略呢？
ok，有了問題，我們接下來寫代碼就會方便很多了。一個個解決，干就完事了。
在解決上面的問題之前，我們先介紹一些axios的高級用法，一開始，我們引入了axios，直接使用 axios({})，方法傳遞配置的方式發起網絡請求，在axios中進行配置的方法，一共有3總
我們可以直接在 axios.default上進行默認配置
// 全局默認配置 axios.defaults.baseURL = 'https://api.example.com'; axios.defaults.timeout = 1000 * 5
axios有一個create方法，返回的其實還是一個axios對象，但是我們在create中可以指定一些默認配置，返回的實例對象使用的時候就會遵循這些默認配置。
// axios實例默認配置
const request = axios.create({
baseURL: 'https://api.example.com',
timeout: 1000 * 8
});這個我們見過了，就不多說了。
// 方法配置
axios({url: '',baseURL: 'https://api.example.com', timeout: 1000 * 10})ok，介紹了三種配置，我們說一下配置的優先級
優先是請求的config參數配置；
其次是實例的default中的配置；
最后是全局的配置；
可能很多小伙伴還不懂這三個環境有什么區別。
首先假設我們的三種環境對應的地址如下
// 生產環境 192.168.0.1:8080/ // 開發環境 192.168.0.1:8080/dev/ // 測試環境 192.168.0.1:8080/test-a/
首先，項目是前后端分離的，我們會先在測試環境下編寫代碼，測試環境的意思是，前端和后端的代碼都是在實時編寫的，比如我們前端對接的后端有2個人A,B，開發環境就有個一個功能發起的請求是要發送到A的電腦上的（A后端正在開發中），地址可能就是 192.168.0.1:8080/test-a，明天來編寫代碼又是要和B對接，這個時候的請求是會發送到B的電腦上，地址可能就是192.168.0.1:8080/test-b。測試環境的意思就是代碼實時在編寫，功能結構是聯調到別人的本地。
現在代碼開發了一個星期，開發的差不多了，就會將代碼提交到開發環境。這個時候接口就是對接的 192.168.0.1:8080/dev這個地址
首先要明確，我們一直編寫代碼屬于測試環境，提交到開發環境是代碼的一個小版本編寫完成了，代碼在開發環境下是沒有我們本地測試環境變動的那么快，我們之后在編寫其他功能的時候又是對接的測試環境。
提交到開發環境之后，公司里面的產品呀，測試人員呀，就會在開發環境上，使用你的代碼，看看你的代碼有沒有什么bug，如果有bug，你就需要在你的測試環境去修改bug，修改完成之后在提交到開發環境讓他們去測試，直到最終沒有bug 了，開發環境的代碼就會被提交到生產環境，生產環境的意思是這里的代碼是面向用戶了，是讓哪些什么都不懂的用戶來使用了。
有點繞口，小總結一下。
生產環境是面向用戶的
開發環境是面向測試人員的，他們來找bug的
測試環境是面向 我們這些coder的，我們在這里編寫代碼
當然，有一些小公司是沒有測試環境的，每一次代碼都是后端編寫完成提交到開發環境，前端直接對接開發環境的，遇到問題了后端就去改代碼，改完之后需要打包發布到開發環境，這樣前端才能繼續對接，就沒有測試環境直接連接到后端開發的電腦上這么方便。
這個baseUrl是什么東東，第一次見的人可能有點迷惑。舉個栗子：
添加用戶功能的接口可能是下面這樣的：
// 生產環境 192.168.0.1:8080/user/add // 開發環境 192.168.0.1:8080/dev/user/add // 測試環境 192.168.0.1:8080/test-a/user/add
我們很快就發現了，明明我們添加用戶只是關心 /user/add這個路徑，哪怕切換了環境后面的路徑也是不會修改的，那我們每次寫代碼能不能忽略前綴呢？
當然可以，這就是 baseUrl的作用
可以理解成，真正的請求地址 = baseUrl + url
好的，了解這么多之后，我們就開始封裝我們的axios把
我們優先來改一下我們的文件目錄結構。
在utils中有一個 request.js，在這里我們封裝我們的axios。
在api目錄中有user.js 在這里，我們使用我們封裝的request，管理和user有關的接口
在需要調接口的地方我們就直接引入api中的方法就好了。
首先在 utils/request.js中編寫以下代碼。
在api/user.js中編寫一下代碼
app.vue中調用
ok，這樣依賴我們就可以解決我們之前提出的問題1和問題2了
官方文檔告訴我們，axios的實例是有請求攔截器的，在這里會對我們的請求做一些攔截。
我們編寫代碼試試看這個config是什么東東
打印結果
就是我們的congif啊，那我們根據這個定制一一下
這樣我們的問題3就解決了
在請求的時候我們往往會添加token字段來鑒權，添加token的方法有很多，下面我來介紹幾種常用的，只負責添加。不管有沒有添加成功，不成功后端會報錯的，之后我們在處理后端報錯的情況就好了。
api中手動添加，需要了我就添加，代碼如下
請求傳參的時候添加一個自定義的參數，表示token字段需不需要。
之后在我們的請求攔截器中判斷這個字段進行處理
在解決問題4和5之前。我先總結一下我遇到過的響應方式。
方式1：后端不解決報錯，直接丟給前端，這里我們最直觀的感受就是返回的狀態碼是500。
方式2：后端解決報錯，每次出錯包裝一下返回給前端，這里我們最直觀的感受是。每一次請求并不會出500錯誤都是狀態碼為200成功的請求，但是返回值會多一些東西，舉個返回值的栗子，當然，下面的code,msg這個不同的公司有不同的規范。
{
// 我們實際請求的返回值
data:{....},
// 我們實際請求的狀態碼，后端包裝報錯的花，這個code會改變，比如500，或者每一個公司有直接的狀態碼規范
code:200,
// 服務器給我們的信息，一般成功的話沒有信息，出現異常了這個字段表示錯誤原因
msg:"請求成功"
}
先看一下官方文檔，如何我們寫道我們的代碼里面打印一下這個response看看。
因為為根據
user編寫的接口地址是假的，為了展示效果我就切換成https://httpbin.org/get，不過這里的邏輯是不會變的哦，只是地址改變了
我們發現，響應攔截器就是會過一邊我們的結果，這樣我們就可以在這里進行一些代碼編寫。
比如問題4，我們只需要編寫成下面這樣就可以了。
現在我們來處理一下我們最棘手的問題。如何攔截錯誤？
我們先引入一下elementUI（npm i element-ui -S），在遇到錯誤的時候我們使用message組件進行一個彈框提示。
攔截錯誤之前，需要了解我們自己公司對應的一套響應策略，針對策略我們進行不同的處理。
首先我們處理一下請求報錯的情況，比如404，500等等
首行引入import { Message } from 'element-ui';
這個error還是要return一下，這樣才會被我們自己些的catch捕獲到，我們這里只是封裝了全局的報錯提示，有的時候針對某些請求報錯我們還需要自己catch處理。
請求正常的情況我們也還是要處理的，因為有一下公司后端會自己攔截錯誤，返回狀態碼還是200 但是這個時候數據不對并且有錯誤信息
這里我們規定，所有的請求都會有
data,code,msg字段，請求成功code是200，data返回正常數據，請求失敗了code是錯誤狀態碼，data沒有數據，并且有~錯誤提示。（自己封裝的時候根據自己公司的后臺接口規范來寫）
ok完整的代碼如下，首部引入的 Router
關于“axios怎么安裝及使用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
