前言
Axios是前端最流行的交互工具。所以本節(jié)內(nèi)容將對Axios進行詳細講解。
本節(jié)內(nèi)容需要由Ajax的基礎及Promise的基礎。這兩篇文章可以參考：
前端后端交互系列之原生Ajax的使用
前后端交互系列之promise詳解
如果想快速了解axios也可以查看（本篇文章的深度是更高的）：
淺析axios原理與使用（包括axios的優(yōu)雅寫法與res的解構(gòu)賦值）
一，服務器的搭建
我們用nodejs中的express框架來搭建一個服務器。如果想深度學習可以去了解nodejs。本節(jié)內(nèi)容只需要懂得nodejs的基本用法即可。
首先第一步，創(chuàng)建一個寫nodejs的文件，并打開該文件的終端：
在終端下載nodejs的包express，下載完畢后左邊會出現(xiàn)npm包管理文件：
npm i express
最后書寫代碼，代碼的含義可以不明白，后面套用即可：
const express = require('express')
const app = new express();
app.listen(8000, () => {
console.log('服務器在8000端口運行，地址127.0.0.1')
})
上面這段代碼的意思是，引用express包，express包是通過nodejs的http模塊封裝的。通過express我們可以在自己的電腦上，以自己的電腦創(chuàng)建一臺服務器。
在終端運行上述代碼，服務器創(chuàng)建成功。
后面我們還需要在代碼中加上接口，現(xiàn)在以一個get接口為例子，后面都是這樣的形式：
//引入express
const express = require('express')
//創(chuàng)建express的實例對象app
const app = new express();
//接口部分，設置路由規(guī)則
app.get('/server', (request, response) => {
//在后臺解決跨域問題
response.setHeader('Access-Control-Allow-Origin', '*');
//返回值
response.send('hello axios')
})
//監(jiān)聽app實例對象，開啟服務器
app.listen(8000, () => {
console.log('服務器在8000端口運行，地址127.0.0.1')
})
==在修改代碼后重新啟用代碼。==接著我們可以用軟件postman發(fā)起測試，測試接口，接口測試成功：
以上就是服務器的搭建過程，后面我們可以用類似方式，寫接口，用接口。主要是nodejs的一些知識。如果不會可以去了解下或者直接套用。
后面都會給出后臺代碼，直接套用即可當成普通后臺接口去用，影響不大。
二，Axios的基本使用
上面的內(nèi)容講解了后臺的代碼書寫及運行。接下來正式進入正題——Axios。
2.1 Axios的介紹及頁面配置
Axios是用于前后端交互的一種工具。
其特點：發(fā)送Ajax請求、在nodejs中發(fā)送http請求、支持promise的相關(guān)操作、自動將結(jié)果轉(zhuǎn)化為JSON數(shù)據(jù)、保護數(shù)據(jù)安全等等。
下面就開始正式學習。
2.2 如何安裝
npm引入、CDN、或者文件引入。
項目中往往使用npm引入。學習階段使用CDN引入。
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
2.3 Axios的前臺代碼
本節(jié)內(nèi)容主要講述如何用Axios去發(fā)送請求，發(fā)送get請求、post請求、put請求以及delete請求。
這是我們的頁面結(jié)構(gòu)：
前臺代碼部分：
<body>
<h2>axios的基本使用</h2>
<button class="btn1">get</button>
<button class="btn2">post</button>
<button class="btn3">put</button>
<button class="btn4">delete</button>
<script>
var btn1 = document.querySelector('.btn1')
var btn2 = document.querySelector('.btn2')
var btn3 = document.querySelector('.btn3')
var btn4 = document.querySelector('.btn4')
</script>
</body>
2.4 Axios的基本使用
首先要明確的是，請求是由前端發(fā)出的。所以我們現(xiàn)在在前端，發(fā)送get請求給剛剛已經(jīng)寫好的接口server：
接著，在前端發(fā)送get請求，以下也是請求的基本格式：
btn1.addEventListener('click', () => {
axios({
method: 'GET',
url: 'http://127.0.0.1:8000/server'
}).then(response => {
console.log(response)
})
})
在上面這段代碼里面，method表示的是請求的類型，url是請求的地址，then回調(diào)函數(shù)是請求后的反饋。以上，是不帶參數(shù)的請求。
接著是post請求的相關(guān)格式，先看后臺代碼：
//發(fā)起post請求
app.post('/post-server', (request, response) => {
response.setHeader('Access-Control-Allow-Origin', '*');
//返回值
const data = {name: '巧克力小貓猿'}
response.send(data)
})
接著是前臺發(fā)送請求：
btn2.addEventListener('click', () => {
axios({
method: 'POST',
url: 'http://127.0.0.1:8000/post-server'
}).then(response => {
console.log(response)
})
})
put與delete的格式幾乎也與上述一樣。
2.5 axios請求響應結(jié)果的結(jié)構(gòu)
本節(jié)來看axios成功后的返回值的結(jié)果。
我們這里來調(diào)用剛剛講的get請求的結(jié)果：
然后來介紹結(jié)果內(nèi)部的內(nèi)容。
config中記錄請求類型、請求ur l等內(nèi)容；
data中放置響應體的內(nèi)容（對象），（自動JSON解析)；
headers中放置請求體；
request中放置和原生xml相關(guān)的一些東西；
status中放置響應狀態(tài)碼；
statusText放置響應狀態(tài)字符串。
2.6 帶參數(shù)的axios請求
上述介紹了axios的基本使用與返回內(nèi)容。
現(xiàn)在來了解下如何向服務器發(fā)送帶參數(shù)的axios請求。
我們先來看看發(fā)送帶參數(shù)的get請求：
axios({
// 請求方式
method: 'GET',
// 請求地址
url: 'http://www.liulongbin.top:3006/api/getbooks',
// url中的查詢參數(shù)
params: {
id: 1
}
}).then(function(res) {
console.log(res);
})
在以上代碼中，用到了params參數(shù)，是查詢參數(shù)，params僅用在發(fā)送get請求中。
接著來看看發(fā)送post請求：
axios({
method: 'POST',
url: 'http://www.liulongbin.top:3006/api/post',
data: {
name: 'zs',
age: 20
}
}).then(function(res) {
console.log(res);
})
這里用到了data，將數(shù)據(jù)發(fā)送給服務器。data也是僅僅用于在發(fā)送post請求中。
2.7 axios修改默認配置
主要用于對url的縮寫。
細心的讀者應該發(fā)現(xiàn)，我們用的url大多都是http://127.0.0.1:8000/xxxx。我們在xxxx上寫上對應的信息來訪問不同的接口。
所有的url都有http://127.0.0.1:8000這段共同的部分。而本節(jié)內(nèi)容的目的是簡化url，所以我們可以把公共部分提取出來，需要時直接使用。
請看如下代碼：
//設置基礎url
axios.defaults.baseURL = 'http://127.0.0.1:8000/'
btn1.addEventListener('click', () => {
axios({
method: 'GET',
url: '/get-server'
}).then(response => {
console.log(response)
})
})
上述代碼通過axios.defaults.baseURL設置了基本url，后續(xù)則不需要寫入基本url，直接加上對應的接口url即可，十分方便。
三，axios攔截器
3.1 什么是攔截器
攔截器是什么： 一些函數(shù)，分別有請求攔截器和響應攔截器。
請求攔截器，顧名思義，用作發(fā)送請求時，請求被攔截，經(jīng)過一定處理后才會發(fā)送給服務器；
同理，響應攔截器的作用在于，當我們向服務器發(fā)送請求，服務器給我們響應過程中，被攔截，響應經(jīng)過處理后再發(fā)送給客戶端。
本節(jié)內(nèi)容快就來探索攔截器的作用與原理
3.2 攔截器的寫法
我們給攔截器取名為Interceptors。
我們先來學習響應攔截器——對我們的響應進行處理。
這里就需要用到一個api：
axios.interceptors.response.use()
這個api目的就是給請求設置響應攔截，它的格式很像Promise，請看下面代碼：
//添加響應攔截器
axios.interceptors.response.use(function(response) {
console.log('響應攔截器成功')
return response
}, function(error) {
console.log('響應攔截器失敗')
return Promise.reject(error)
})
//發(fā)送請求
var btn1 = document.querySelector('.btn1')
axios.defaults.baseURL = 'http://127.0.0.1:8000/'
btn1.addEventListener('click', () => {
axios({
method: 'GET',
url: '/get-server'
}).then(response => {
console.log(response)
})
})
最后結(jié)果：
請求攔截器與響應攔截器的格式非常類似，不同的點在于，請求攔截器第一個參數(shù)是我們發(fā)送的請求config（這個在文章前面有交代過，config中記錄了記錄請求類型、請求ur l等內(nèi)容），而響應攔截器中的第一個參數(shù)是response。
下面我們來看請求攔截器的相關(guān)代碼：
//添加請求攔截器
axios.interceptors.request.use(function(config) {
console.log('請求攔截器 成功');
return config;
}, function(error) {
console.log('請求攔截器 失敗')
return Promise.reject(error)
})
最后的結(jié)果：
這里有一個小細節(jié)，如果有多個攔截器，請看下面代碼：
//添加請求攔截器1
axios.interceptors.request.use(function (config) {
console.log('請求攔截器1 成功');
return config;
}, function (error) {
console.log('請求攔截器1 失敗')
return Promise.reject(error)
})
//添加請求攔截器2
axios.interceptors.request.use(function (config) {
console.log('請求攔截器2 成功');
return config;
}, function (error) {
console.log('請求攔截器2 失敗')
return Promise.reject(error)
})
//添加響應攔截器1
axios.interceptors.response.use(function (response) {
console.log('響應攔截器成功1')
return response
}, function (error) {
console.log('響應攔截器失敗1')
return Promise.reject(error)
})
//添加響應攔截器2
axios.interceptors.response.use(function (response) {
console.log('響應攔截器成功2')
return response
}, function (error) {
console.log('響應攔截器失敗2')
return Promise.reject(error)
})
最后的結(jié)果：
響應攔截器是按順序來的，但是請求攔截器是先使用最新的，然后再往后使用。
3.3 直接返回data
大家請看，客戶端向服務器發(fā)起請求，服務器給予響應，最后響應給客戶端的是一個很長的對象：
在這個對象中，有的時候真正有用的僅僅是我們的data。
但是這里的data并不是包含狀態(tài)碼，狀態(tài)，以及一系列東西的data，而是data里面的這個data，因此我們可以通過攔截器來截取這個data。這就需要用到我們的響應攔截器了：
那么最后的效果：
同時，我們也可以做些判斷。后面可以根據(jù)需求來進行處理。
四，優(yōu)雅寫法之a(chǎn)sync與await
在promise的文章中講過async與await，這里就再次對其進行簡單介紹。
promise用來處理異步任務，而axios發(fā)送請求就是很典型的異步任務。await可以理解成一種表達式的類型，而async后面接的是一個函數(shù)。這兩個是專門用來組合，然后寫異步任務的。并且，在組合使用的時候，await后面接的是一個異步函數(shù)，async函數(shù)返回的是一個promise對象。
這里，我們來把axios用async與await進行封裝并使用。
先看一下封裝前的代碼：
<body>
<button class="btn">發(fā)起get請求</button>
<script>
//設置baseurl
axios.defaults.baseURL = 'http://127.0.0.1:8000'
//綁定按鈕
var btn = document.querySelector('.btn');
//點擊發(fā)起axios請求
btn.addEventListener('click', () => {
axios({
methods: 'GET',
url: '/get-server',
}).then((response) => {
console.log(response.data)
})
})
</script>
</body>
現(xiàn)在，我們用async與await對上面的axios進行封裝：
<script>
//封裝axios函數(shù)
var getserver = async function () {
//設置baseurl
axios.defaults.baseURL = 'http://127.0.0.1:8000'
const result = await axios({
methods: 'GET',
url: '/get-server',
})
console.log(result)
return result;
}
//綁定按鈕
var btn = document.querySelector('.btn');
//點擊發(fā)起axios請求
btn.addEventListener('click', () => {
getserver()
})
</script>
效果：
五，對response的解構(gòu)賦值
剛剛已經(jīng)了解，可以用攔截器處理axios的響應值。還有一種方式，可以讓獲得的值是data，那就是解構(gòu)賦值。
下面代碼是發(fā)送一個請求，并對結(jié)果解構(gòu)賦值：
var getserver = async function () {
//設置baseurl
axios.defaults.baseURL = 'http://127.0.0.1:8000'
const {data: result} = await axios({
methods: 'GET',
url: '/get-server',
})
console.log(result)
return result;
}
上面這段代碼，加的內(nèi)容{data: result}的作用是，把data從result中解析出來，拿出來。所以最后的結(jié)果：
六，后記
本篇文章講述了axios的相關(guān)內(nèi)容。文章來源：http://www.zghlxwxcb.cn/news/detail-455053.html
本系列文章還涉及到ajax，promise，以及跨域問題。歡迎關(guān)注！文章來源地址http://www.zghlxwxcb.cn/news/detail-455053.html
到了這里，關(guān)于前后端交互系列之Axios詳解（包括攔截器）的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
