Vue2.x學習筆記。原視頻教程：最全最新Vue、Vuejs教程，從入門到精通_嗶哩嗶哩 (゜-゜)つロ 干杯~-bilibili

axios

網絡模塊的選擇

Vue中發送網絡請求有非常多的方式, 那么, 在開發中, 如何選擇呢?

選擇1：ajax

傳統的Ajax是基于XMLHttpRequest(XHR)

為什么不用它呢?非常好解釋：

• 配置和調用方式等非常混亂

• 編碼起來看起來就非常蛋疼

• 所以真實開發中很少直接使用, 而是使用jQuery-Ajax

選擇2：jquery-ajax

它相對于傳統的Ajax非常好用。為什么不選擇它呢？

首先, 我們先明確一點: 在Vue的整個開發中都是不需要使用jQuery了。

那么, 就意味著為了方便我們進行一個網絡請求, 特意引用一個jQuery, 你覺得合理嗎？

jQuery的代碼1w+行。Vue的代碼才1w+行。

因此完全沒有必要為了用網絡請求就引用這個重量級的框架。

選擇3：Vue-resource

官方在Vue1.x的時候, 推出了Vue-resource。

• Vue-resource的體積相對于jQuery小很多。

• 另外Vue-resource是官方推出的。

為什么不選擇它呢?

在Vue2.0退出后, Vue作者就在GitHub的Issues中說明了去掉vue-resource, 并且以后也不會再更新。

那么意味著以后vue-reource不再支持新的版本時, 也不會再繼續更新和維護。對以后的項目開發和維護都存在很大的隱患。

選擇4：axios

在說明不再繼續更新和維護vue-resource的同時, 作者還推薦了一個框架: axios。

jsonp

在前端開發中，我們一種常見的網絡請求方式就是JSONP。

使用JSONP最主要的原因往往是為了解決跨域訪問的問題。

JSONP的原理是什么呢？

JSONP的核心在于通過<script>標簽的src來幫助我們請求數據。

原因是我們的項目部署在domain1.com服務器上時，是不能直接訪問domain2.com服務器上的資料的。

這個時候，我們利用<script>標簽的src幫助我們去服務器請求到數據，將數據當做一個javascript的函數來執行，并且執行的過程中傳入我們需要的json。

所以, 封裝jsonp的核心就在于我們監聽window上的jsonp進行回調時的名稱。

JSONP如何封裝呢?我們一起自己來封裝一個處理JSONP的代碼吧。

認識axios

優點

功能特點:

• 在瀏覽器中發送 XMLHttpRequests 請求

• 在 node.js 中發送 http請求

• 支持 Promise API

• 攔截請求和響應

• 轉換請求和響應數據

• 等等

補充:：axios名稱的由來？它沒有具體的翻譯。

coderWhy老師的理解：

axios：ajax i/o system。

請求方式

支持多種請求方式:

• axios(config)

• axios.request(config)

• axios.get(url[, config])

• axios.delete(url[, config])

• axios.head(url[, config])

• axios.post(url[, data[, config]])

• axios.put(url[, data[, config]])

• axios.patch(url[, data[, config]])

安裝

npm install axios --save

引入

import axios from 'axios'

基本使用

//寫法1 axios({url: 'url',method: 'get' //不寫默認為get方式 }).then().catch()//寫法2 axios.get('url').then().catch()

發送請求

發送get請求演示

發送并發請求

有時候, 我們可能需求同時發送兩個請求。

• 使用axios.all, 可以放入多個請求的數組

• axios.all([]) 返回的結果是一個數組，使用 axios.spread 可將數組 [res1,res2] 展開為 res1, res2

全局配置

在上面的示例中, 我們的BaseURL是固定的。

事實上, 在開發中可能很多參數都是固定的。

這個時候我們可以進行一些抽取, 也可以利用axios的全局配置。

//示例： axios.defaults.baseURL = '123.207.32.32:8000' axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

常見的配置選項：

axios的實例

為什么要創建axios的實例呢?

• 當我們從axios模塊中導入對象時, 使用的實例是默認的實例

• 當給該實例設置一些默認配置時, 這些配置就被固定下來了

• 但是后續開發中, 某些配置可能會不太一樣

• 比如某些請求需要使用特定的baseURL或者timeout或者content-Type等

• 這個時候, 我們就可以創建新的實例, 并且傳入屬于該實例的配置信息

//創建新的實例 const axiosInstance = axios.create({baseURL: 'url',timeout: 5000,headers: {'content-Type': 'application/x-www-form-urlencoded'} }) //發送網絡請求 axiosInstance({url: '/category',method: 'get' }).then().catch()

axios封裝

可以新建一個network文件，新建request.js文件：

//封裝 import axios from 'axios'export function request(config) {return new Promise((resolve, reject) => {//1.創建axios實例const instance = axios.create({baseURL: 'url',timeout: 5000})//2.傳入對象發送網絡請求instance(config).then(res => {resolve(res)}).catch(err => {reject(err)})}) } //使用 import request from './network/request'request({url: '/home' }).then(res => console.log(res)).catch(err => console.log(err))

axios攔截器

axios提供了攔截器，用于我們在發送每次請求或者得到響應后，進行對應的處理。

怎么做

做什么

請求攔截：

• 請求的成功攔截：

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-QiTFI0zo-1621222775949)(B:\picgo_pics\image-20210516210354057.png)]

• 請求攔截中錯誤攔截較少，通常都是配置相關的攔截。

  • 可能的錯誤比如請求超時，可以將頁面跳轉到一個錯誤頁面中。

響應攔截：

• 響應的成功攔截中，主要是對數據進行過濾。

  [外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-3FTzQgEv-1621222775950)(B:\picgo_pics\image-20210516210506355.png)]

• 響應的失敗攔截中，可以根據status判斷報錯的錯誤碼，跳轉到不同的錯誤提示頁面。

總結

以上是生活随笔為你收集整理的axios学习笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。