🥳博???????主：初映CY的前說(前端領域)
🌞個人信條：想要變成得到，中間還有做到！
🤘本文核心：當我們在路由跳轉前與后我們可實現觸發的操作
【前言】ajax是一種在javaScript代碼中發請求并獲取響應數據的技術，我們的axios是一個別人封裝好的、用來發ajax請求的工具。那么我們發送請求與響應數據可以用來做什么呢？這樣做有什么好處呢？可以實現——當我們不刷新頁面的情況下，我們從服務器獲取請求的數據，以局部更新我們定點的數據而不是我們整個頁面的刷新。
目錄
一、axios
1.1axios的請求方式
1.2請求方式的傳參特點
1.3【經典面試題】get與post請求的區別
二、axios攔截器
2.1axios攔截器介紹
2.2axios攔截器使用
2.3總結axios攔截器
一、axios
1.1axios的請求方式
1.get
該請求方式常用于處理查詢操作，比如我們在瀏覽器上搜索基本上用的使get請求
2.post
該請求常用于我們處理新增操作，比如我們對我們頁面中的登錄時進行增加數據進服務器
3.put
該請求常用于我們處理全部更新操作，比如我們對我們頁面中的form表單進行全部修改
4.patch
該請求常用于我們處理局部更新操作，比如我們對我們頁面中的form表單進行全部修改
5.delete
該請求常用于我們處理刪除數據操作，處理頁面上需要刪除的信息常需要使用該請求方式
1.2請求方式的傳參特點
- get常用于請求行傳參
- post 、put、patch常用于請求體傳參
- delete常用于請求行/請求參數傳參
1.3【經典面試題】get與post請求的區別
1.位置不同。我們的get是寫在請求行中，post則是寫在請求體中。也就是一個可以在地址欄可以看到我們的信息(get),一個需要按下F12在調試里面看我們傳遞的信息
2.速度不同。使用get因為有大小限制的原因，因此數據傳輸的速度長比post請求快
3.大小不同。get寫在地址欄上面，因此有長度的限制，最大長度為2k左右，而我們的post寫在請求體中沒有大小的限制
4.安全性不同。get的參數可以直接看到，post參數需要按下F12來查看
二、axios攔截器
2.1axios攔截器介紹
【授人以魚不如授人以漁】我們通過官網出的文件來進行一個講解：
請求攔截器：處理我們在發送請求之前需要經過的回調函數
相應攔截器：服務器響應之后返回給我們之前會被執行的回調函數
官網指南：攔截器 |?Axios 中文文檔 | Axios 中文網 (axios-http.cn)
下圖為上述超鏈接打開之后所看到的頁面：
?我們將上述代碼copy下來（這一大段代碼不需要背下來，到了工作當中也是直接去axios官方中直接copy下來我們進行應用即可呦）
1.便于封裝操作，我們常會建立一個專門的文件來寫下我們的攔截器同基地址作為第一次封裝。
【vue2小知識】實現axios的二次封裝_初映CY的前說的博客
// 添加請求攔截器
axios.interceptors.request.use(function (config) {// 在發送請求之前做些什么return config},function (error) {// 對請求錯誤做些什么return Promise.reject(error)}
)// 添加響應攔截器
axios.interceptors.response.use(function (response) {// 2xx 范圍內的狀態碼都會觸發該函數。// 對響應數據做點什么return response},function (error) {// 超出 2xx 范圍的狀態碼都會觸發該函數。// 對響應錯誤做點什么return Promise.reject(error)}
)
我們將官網的這段代碼獲取下來了，兄弟姐妹們有沒有發現官方甚至連注釋都給我們寫好了，很清晰明了的介紹了axios攔截器的用法，可知：
axios是我們用于發送Ajax請求之前以及我們在發送請求之后會執行的一個回調函數
2.2axios攔截器使用
1.在項目中先下載下我們的axios
至此我們知道了axiox的基本概念，那怎么在vue項目中引用？使用npm i axios 或者這 yarn add axios 將我們的axios下載下來（使用指南：npm的使用介紹）
2.項目中進行引入（與攔截器在同一個js文件）
import axios from 'axios'?3.設置基地址，并且導入request
const request = axios.create({baseURL: 'http://ajax-api.itheima.net/api',timeout: 5000 // 超過5s請求停止
})export default request
4.根據接口文檔寫axios請求
import request from '@/utils/request'
export function homeAddress (pname, cname) {return request({url: '/area',method: 'GET',params: {pname: pname,cname: cname}})
}
?5.頁面中進行調用
<template><div class="div1"><button @click="getHomeAddress('江西省', '九江市')">點我獲取地址</button></div>
</template><script>
import { homeAddress } from './api/address'
export default {methods: {async getHomeAddress (pname, cname) {console.log(pname, cname)const res = await homeAddress(pname, cname)console.log('地址數據為：', res)}}
}
</script><style lang="less">
.div1 {background-color: teal;button {height: 50px;display: block;margin: 30px auto;}
}
</style>
?6.點擊按鈕發送請求
?7.配置axios攔截器
7.1請求攔截器
在發送請求之前會執行的一個回調，常用于將token添加進請求頭的Authorization中。
注意我們的axios實例是request因此從官網cv下來我們需要將axios改為request
// 添加請求攔截器
request.interceptors.request.use(function (config) {// 在發送請求之前做些什么console.log(config, 'config')console.log('嘿！我是在請求之前就執行的')return config // 發給服務器的信息},function (error) {// 對請求錯誤做些什么return Promise.reject(error)}
)
?7.2響應攔截器
從服務器獲取到了數據返回的時候先執行一個回調函數，常用于做狀態碼判斷與脫殼處理
// 添加響應攔截器
request.interceptors.response.use(function (response) {// 2xx 范圍內的狀態碼都會觸發該函數。// 對響應數據做點什么console.log(response, 'response')console.log('嘿！我是在請求之后就執行的,response為我們請求相應的結果')return response.data.data},function (error) {// 超出 2xx 范圍的狀態碼都會觸發該函數。// 對響應錯誤做點什么return Promise.reject(error)}
)
可以看到我們最終響應的值是我們response處理過的值
2.3總結axios攔截器
請求攔截器：在發送請求之前會執行的回調函數
響應攔截器：發送請求后服務器返回前執行的回調函數
—用例編寫篇)
