詳解網絡請求Axios

xios是什么？

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。我們知道 Promise 是 js 異步的一種解決方案，它最大的特性就是可以通過 .then 的方式來進行鏈式調用。

其實說白了axios是對ajax的封裝，axios有的ajax都有，ajax有的axios不一定有，總結一句話就是axios是ajax，ajax不止axios。

為什么選擇axios?

vue的作者尤雨溪推薦使用axios.
符合前后端分離的趨勢，及前端的MVVM的浪潮

功能特點：

在瀏覽器中發送XMLHttpRequests請求

在node.js中發送http請求

支持Promise API

攔截請求和響應

轉換請求和響應數據

取消請求

自動轉換 JSON 數據

客戶端支持防御 XSRF

支持多種請求方式：

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] ])

Axios的基本使用

axios的使用比較簡單，文檔講得也非常清晰，你應該先閱讀axios的官方文檔：axios文檔。

在html頁面中直接引入使用:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

Html頁面基本使用

以下案例中的get請求地址為crmeb相關演示站地址，可用于測試獲取！

獲取一個get請求

<script>
  const url = 'https://store.crmeb.net/api/pc/get_category_product'
  axios({
    url: url,
    method: 'get',  // 這里可以省略，默認為get
  }).then(res => {
    // 返回請求到的數據
    console.log(res)
  }).catch(err => {
    // 返回錯誤信息
    console.log(err)
  })  
</script>

在get請求的url中傳參，只需要定義一個params:{}即可！

<script>
  const url = 'https://store.crmeb.net/api/pc/get_category_product'
  axios({
    url: url,
    method: 'get',  // 這里可以省略，默認為get
    // 這里的鍵值對會拼接成這樣url?page=1&limit=3
    params: {
      page: 1,
      limit: 3
    }
  }).then(res => {
    // 返回請求到的數據
    console.log(res)
  }).catch(err => {
    // 返回錯誤信息
    console.log(err)
  })  
</script>

發送一個post請求，與get請求類似，只需要將method改為post，定義一個data:{}即可,data中的數據則是服務器需要接收的字段數據！

<script>
axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
}).then(res => {
    // 返回請求到的數據
    console.log(res)
  }).catch(err => {
    // 返回錯誤信息
    console.log(err)
  });
</script>

發送一個并發請求

如果在開發中需要等到多個接口的數據同時請求到后才能繼續后邊的邏輯，那么即可使用并發請求，axios并發請求，使用all方法，all方法的參數為一個數組，數組的每個值可以為一次請求，請求完成后直接.then即可合并兩次請求的數據，返回結果為一個數組！

<script>
axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceOrder: '', 
            news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
]).then(results => {
    console.log(results)
})
</script>

如果你想自動把這個數組展開的話在then()方法中傳入axios.spread()方法即可，如下所示：

<script>
axios.all([
    axios({
        url: 'https://store.crmeb.net/api/pc/get_products',
        params: {
            page: 1,
            limit: 20,
            cid: 57,
            sid: 0,
            priceOrder: '', 
            news: 0,
        }
    }),
    axios({
        url: 'https://store.crmeb.net/api/pc/get_company_info',
    })
]).then(axios.spread((res1, res2) => {
    console.log(res1);
    console.log(res2);
}))
</script>

但在使用vue組件化開發的時候一般我們會通過npm安裝，引入項目！

組件化開發中使用

使用npm進行安裝

npm install axios --save

一般在實際項目中我們并不會像上邊這樣直接去使用axios請求數據，而是將axios封裝在一個單獨的文件，這樣做的目的主要是用來抽取公共邏輯到一個配置文件里，對這些公共邏輯做一個封裝，即使某一天這個axios框架不維護了，或者出現了重大bug也不再修復的時候，我們可以只修改配置文件即可達到全局修改的目的，如果把每次請求邏輯都寫到對應的組件中，那修改起來簡直就是一個噩夢！

封裝一個axios的請求文件request.js

在項目的src目錄下創建一個network文件夾，再在其中創建一個request.js文件，路徑為：src/network/request.js

// src/network/request.js

// 引入axios
import axios from 'axios'

// 這里未使用default導出，是為了以后的擴展，便于導出多個方法
export function request(config){
    // 創建axios實例
    const instance = axios.create({
        // 這里定義每次請求的公共數據，例如全局請求頭，api根地址，過期時間等
        // 具體參數可參考axios的官方文檔
        baseURL: 'http://demo26.crmeb.net/api',
        timeout: 5000
    })
    
    // 攔截請求，如果獲取某個請求需要攜帶一些額外數據
    instance.interceptors.request.use(
        config => {
            console.log(config);
            return config;
        }, err => {
            console.log(err);
        })
        
    // 攔截響應
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res.data
        }, err => {
            console.log(err)
        }
    )
    
    // 發送請求
    return instance(config)

使用我們封裝的request請求

一般我們會將所有的請求放在一個api.js文件中，將每次請求封裝為一個方法,比如我這里會在request.js的同目錄創建一個api.js文件封裝我們所有的請求。

import { request } from '../api/request'

// 獲取分類
export const getHomeCategory = () => {
    return request({
        url: '/category'
    })
}

// 獲取banner圖
export const getHomeBanner = () => {
    return request({
        url: '/pc/get_banner'
    })
}

之后再在組件中引入調用導出的相關接口方法即可，如：

import { getHomeBanner } from "../network/api"

getHomeBanner().then(res => {
	console.log(res)
})

以上就是一個簡單的封裝，其中有個攔截請求和攔截響應，可能很多初學的人理解起來有點吃力，我在這里以個人淺見闡述，希望能帶給你些許啟發！

何為攔截器？

還是發揮閱讀理解能力，攔截攔截其實就是此路是我開，此樹是我栽，要想過此路，留下買路錢，攔截請求就是比如某些請求需要攜帶一些額外的信息才能訪問，實際項目中最常見的就是需要登錄后才能查看的信息，請求中就必須攜帶token才能訪問，就可以在這里處理，還有攔截響應，比如請求到數據之后，發現不符合要求，先攔下來處理一下，再返回給前端，這就是一個攔截器的基本工作流程！

axios有一個全局攔截的方式：axios.interceptors()

攔截成功后必須return返回，否則數據無法請求到

如下所示：

  // 攔截請求，如果獲取某個請求需要攜帶一些額外數據
    instance.interceptors.request.use(
        config => {
            console.log(config);
            return config;
        }, err => {
            console.log(err);
        })
        
    // 攔截響應
    instance.interceptors.response.use(
        res => {
            console.log(res)
            return res.data
        }, err => {
            console.log(err)
        }
    )

axios還為我們提供了一些全局配置，如下：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

當然也可以將其配置在我們之前創建的axios實例中，使其只作用于某個實例！

然后來看一下 axios 的所有配置信息:

數據來自axios中文文檔

JavaScript開發中，發送HTTP請求和處理響應是非常常見的任務。axios是一種流行的JavaScript庫，它提供了一個簡單的API用于發送HTTP請求。本文將介紹如何在JavaScript中使用axios，并提供一個實際的示例。

安裝和導入axios

在使用axios之前，我們需要先安裝它。可以使用npm命令行工具來安裝axios。

npm install axios

安裝完成后，我們需要將axios導入到我們的腳本中。

import axios from 'axios';

發送請求

使用axios發送請求很簡單，只需要提供請求URL和可選參數即可。

axios.get('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => console.log(response.data));

在上面的示例中，我們向一個API發送了一個請求，并在.then()方法中輸出響應數據。

如果遇到了錯誤，axios會返回rejected狀態的Promise對象。因此，在終止回調鏈之前應始終使用.catch()處理錯誤。

axios.get('https://jsonplaceholder.typicode.com/todos/0')
  .then(response => console.log(response.data))
  .catch(error => console.log(error));

在上面的示例中，我們向一個不存在的API發送了一個請求，因此axios返回rejected狀態的Promise對象。在.catch()方法中，我們捕獲了這個錯誤并輸出它的信息。

發送POST請求

axios也可以用來發送POST請求。要發送POST請求，需要使用axios.post()方法。

axios.post('https://example.com/api', {
  username: 'user',
  password: 'pass'
})
.then(response => console.log(response.data));

在上面的示例中，我們向一個API發送了一個POST請求，并在.then()方法中輸出響應數據。

設置請求頭

使用axios還可以設置請求頭，使我們的請求更具有靈活性。

axios.get('https://jsonplaceholder.typicode.com/todos/1', {
  headers: {
    'Authorization': 'Bearer ' + getToken()
  }
})
.then(response => console.log(response.data));

在上面的示例中，我們向一個API發送了一個請求，并設置了一個自定義的請求頭Authorization。

并發請求

axios允許我們發送并發請求。以下是一個示例代碼，演示如何發送多個請求并獲取它們的響應：

axios.all([
  axios.get('https://jsonplaceholder.typicode.com/todos/1'),
  axios.get('https://jsonplaceholder.typicode.com/todos/2')
])
.then(axios.spread((response1, response2) => {
  console.log(response1.data);
  console.log(response2.data);
}))
.catch(error => console.log(error));

在上面的示例中，我們使用axios.all()方法傳遞一個包含兩個請求的數組。在.then()方法中，我們使用axios.spread()方法將兩個響應對象分別傳遞給回調函數。

總結

axios是一種流行的JavaScript庫，它提供了一個簡單的API用于發送HTTP請求。在本文中，我們介紹了如何安裝和導入axios、如何發送請求、如何發送POST請求、如何設置請求頭以及如何發送并發請求。axios使用非常方便，幾乎可以支持所有的請求類型，并具有對Promise的支持。使用時需要注意的是，我們需要處理rejected狀態的Promise對象，以及進行錯誤處理。

者 | 紅顏禍水nvn

責編 | 唐小引

出品 | CSDN 原力計劃

1. 什么是 MVVM？

MVVM 是 Model-View-ViewModel 的縮寫，MVVM 是一種設計思想。Model 層代表數據模式，也可以在 Model 中定義數據修改和操作的業務邏輯；View 代表 UI 組件，它負責將數據模型轉化為 UI 展現出來，ViewModel 是一個同步 View 和 Model 的對象。

2. 父組件向子組件傳值的方法？

父組件傳遞的數據子組件用 props 方法接收。

子組件通過兩種方式接收：可以傳遞任何類型（數組，對象，各種數據類型等等）

props:[‘title’,‘likes’,‘isPublished’,‘author’]；
props:{title:String,likes:Number}

詳細介紹看這篇：Vue 父組件向子組件傳值

https://blog.csdn.net/qq_34928693/article/details/80539350

3. 子組件向父組件傳值的方法？

子組件向父組件傳值用 this.$emit(key,value) ，父組件接收的時候需要在父組件中創建的子組件的標簽中綁定 Key，格式:@Key=“方法名”，父組件聲明這個方法，方法帶參數，這個參數就是子組件傳遞的 Value。

詳細介紹看這篇：Vue子組件向父組件傳值

https://blog.csdn.net/sisi_chen/article/details/81635216

4. Vuex 是什么？哪種功能場景使用它？

Vuex 是專門為 Vue.js 設計的狀態管理模式，它采用集中式儲存管理 Vue 應用中所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

當項目龐大的時候使用它：

需要動態的注冊響應式數據；
需要命名空間 namespace 來管理組織我們的數據；
希望通過插件，來更改記錄；方便測試；以上這些需要和希望，都是我們 vuex 需要做的一些事情。

5. Vuex 有哪幾種屬性？

state：基本數據
getters：從基本數據派生的數據
mutations：提交更改數據的方法，同步！
actions：像一個裝飾器，包裹 mutations，使之可以異步。
modules：模塊化 Vuex。

6. 如何讓 CSS 旨在當前組件中起作用？

當前組件的 < style>標簽修改為< style scoped>

7. 請列舉出3個 Vue 中常見的生命周期鉤子函數。

beforeCreate：Vue 實例的掛載元素 $el 和數據對象 data 都為未定義，還未初始化。
created：vue 實例的數據對象 data 有值了，$el 沒有。
beforeMount：vue 實例的 $el 和 data 都初始化了，但還是虛擬的 dom 節點，具體的 data.filter 還未替換掉。
mounted：vue 實例掛載完成，data.filter 成功渲染
beforeUpdate：data 更新時觸發。
updated：data 更新時觸發。
beforeDestroy：組件銷毀時觸發。
destroyed：組件銷毀時觸發，vue 實例解除了事件監聽以及 dom 的綁定（無響應了），但 DOM 節點依舊存在。

8. Vue 生命周期總共有幾個階段？

beforeCreate 創建前
created 創建后
beforeMount 載入前
mounted 載入后
beforeUpdate 更新前
updated 更新后
beforeDestroy 銷毀前
destroyed 銷毀后

9. 說出至少 4 種 Vue 當中的指令和它的用法？

v-html：渲染文本（能解析 HTML 標簽）
v-text：渲染文本（統統解析成文本）
v-bing：綁定數據
v-once：只綁定一次
v-model：綁定模型
v-on：綁定事件
v-if v-shou：條件渲染

10. vue-cli 工程中常用的 npm 命令有哪些？

npm install：下載 node_modules 資源包的命令
npm run dev：啟動 vue-cli 開發環境的 npm 命令
npm run build：vue-cli 生成生產環境部署資源的 npm 命令

11. 請說出 vue-cli 工程中每個文件夾和文件的用處。

build 文件夾：存放 webpack 的相關配置以及腳本文件，在實際開發過程中只會偶爾用到 webpack.base.conf.js，配置 less、babel 等。
config 文件夾：常用到此文件夾下的 config.js (index.js) 配置開發環境的端口號，是否開啟熱加載或者設置生產環境的靜態資源相對路徑、是否開啟 gzip 壓縮、npm run build 命令打包生成靜態資源的名稱和路徑等。
node_modules：存放 npm install 命令下載的開發環境和生產環境的各種依賴。
src文件夾：工程項目的源碼以及資源、包括頁面圖片、路由組件、路由配置、vuex、入口文件等。
其他文件：定義的一些項目信息，說明等等。

12. vue-router 路由的兩種模式。

hash 模式：

# 后面的 hash 值的變化，并不會導致瀏覽器向服務器發出請求，瀏覽器不發出請求，也就不會刷新瀏覽器，每次 hash 值的變化會觸發 hashchange 事件。

history 模式：

利用了 HTML5 中新增的 pushState 和 replaceState 方法。這兩個方法應用于瀏覽器的歷史記錄棧，在當前已有的 back、forward、go 的基礎之上，它們提供了對歷史記錄進行修改的功能。只是當它們執行修改時，雖然改變了當前的 URL，但瀏覽器不會立即向后端發送請求。

13. 如何解決 Vue 中的 ajax 跨域問題？

找到 config 文件夾中的 index.js 文件：

修改 proxyTable: {
'/api':{ //使用 /api 來代替 "http://localhost:8082"
target:'http://localhost:8082', //源地址
changeOrigin:true, //改變源
pathRewrite:{
'^/api':'http://localhost:8082' //路徑重寫
}
}
},

修改完之后的跨越請求就可以直接寫成 /api/login 等等了。

14. Vue 打包命令是什么？Vue 打包后會生成哪些文件？

npm run build ：Vue 打包命令
Vue 打包后會在當前工作目錄下生成一個 dist 文件夾，文件夾中會有 static 靜態文件以及 index.html 初始頁面。

15. Vue 如何優化首屏加載速度？

異步路由加載
不打包庫文件
關閉 sourcemap
開啟 gzip 壓縮

16. scss 是什么？

SCSS 是 Sass 3 引入的新語法，其語法完全兼容 CSS3，并且繼承了 Sass 的強大功能，唯一不同之處是 SCSS 需要使用分號和花括號而不是換行和縮進，SCSS 對空白符號不敏感。

17. axios 是什么？怎么使用？

axios 是一個基于 promise 的 HTTP 庫，可以發送 get，post 請求，正是由于 Vue、React 的出現，促使了 axios 輕量級庫的出現

特定：

可以在瀏覽器中發送 XMLHttpRequest 請求
可以在 node.js 發送 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應
轉換請求數據和響應數據
能夠取消請求
自動轉化 JSON 格式
客戶端支持保護安全免受 XSRF 攻擊

如何使用：

npm install --save axios 安裝axios
在入口 main.js 中導入 axios

import Axios from 'axios'

Vue.propertype.$axios = Axios;

使用 axios 發送 get 請求

this.$axios.get('/user?stu_id=1002').then(function(resp) {
console.log(resp);
}).catch(function(err) {
console.log(err);
});

使用 axios 發送 post 請求 post原生請求在后端是接收不到參數的，所有有兩種解決方案，這里只寫一種！第二種解決方案是用 QS。

var params = new URLSearchParams;
params.append('name','孫悟空');
params.append('age',22);
let that = this;
this.$axios.post('http://localhost:8082/user',params).then(function(resp) {
console.log(resp.data.users);
that.ausers = data.data.users;
}).catch(function(err) {
console.log(err);
});

18. vue-router 是什么？它有哪些組件？

vue-router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，讓構建單頁面應用變得易如反掌。包含的功能有：

嵌套的路由、是圖標
模塊化的、基于組件的路由配置
路由參數、查詢、通配符
基于 Vue.js 過度系統的視圖過渡效果
細粒度的導航控制
帶有自動激活的 CSS class 的連接
HTML 5 歷史模式或 hash 模式，在 IE9 中自動降級
自定義的滾動條行為

vue-router 組件：

< router-link to=""> 路由的路徑
< router-link :to="{name:’‘l路由名’}"> 命名路由
< router-view> 路由的顯示

19. 怎么定義 vue-router 的動態路由？怎么獲取傳遞過來的動態參數？

在 router 目錄下的 index.js 文件中，對 path 屬性加上 /:id。使用 router 對象的 params.id，例如：this.$route.params.id。

20. MVVM 和其他框架（jQuery）的區別是什么？哪些場景適合？

Vue 是數據驅動，通過數據來顯示視圖層而不是節點操作。
處理數據交互的時候挺適合 MVVM 設計模式的。

本文為CSDN博主「紅顏禍水nvn」的原創文章，CSDN 官方經授權發布。

原文鏈接：https://blog.csdn.net/qq_43647359/article/details/104774302

歡迎更多的開發者朋友加入 CSDN 原力計劃！我們將用全新的方式來釋放更多的流量，讓優質、有深度、豐富有趣的內容得到精準的流量扶持，同時也幫助創作者和粉絲有更多互動和交流。點擊下方圖片了解詳情。

?比爾·蓋茨退出微軟公司董事會；蘋果 WWDC、微軟 Build 大會均改為線上舉辦；Rust 1.42.0 發布| 極客頭條

?11 國股市熔斷，“禍及”程序員？！

?2.2版本發布！TensorFlow推出開發者技能證書

?Soul App 高管被捕，惡意舉報導致競品被下架

?2020 年最新版 68 道Redis面試題，20000 字干貨，趕緊收藏起來備用！

?最近一個名為 BTCU 的比特幣分叉，準備用新分叉解決比特幣網絡的舊問題

在線咨詢

上一篇：JavaScript將HTML頁面生成PDF并下載
下一篇：html5常用基本標簽

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商