axios進階之路——基礎篇

本課題包含三篇：基礎篇；攔截器篇；封裝篇。本篇爲基礎篇，主題爲axios基礎介紹及安裝使用。

---

一、 關於Axios

1. Axios是什麼

• Axios是一個基於 promise 的 HTTP 庫
• 可以用於瀏覽器和 node.js
• 類似於 Ajax，進行前後端交互使用

2. Axios 特性

• 支持 Promise API
• 攔截請求和響應
• 轉換請求數據和響應數據
• 取消請求
• 自動轉換JSON數據
• 客戶端支持防禦 XSRF

二、 安裝使用

1. 安裝

兩種方式：（二選一）

1. npm
2. yarn

// 使用npm：
$ npm install axios

// 或者使用yarn：
$ yarn add axios

2. 使用

基礎使用示例

// 引入axios
import axios from 'axios'

axios.get('url').then(res => {
    // 請求成功要做的事
}).catch(err => {
    // 請求失敗要做的事
})

三、 基礎介紹及使用

1. axios常用請求方法

• get
• post
• put
• patch
• delete

2. 區別

方法	用途	備註
get	獲取數據	/
post	提交數據	表單提交、文件上傳等
put	更新數據	所有數據推送到後端
patch	更新數據	只將修改的數據推送到後端
delete	刪除數據	/

其中get,post目前前後端交互中最爲常用

注：請求方法一般由後端定義，實際項目使用參照後端文檔規則

3. 常用示例（GET、POST）

GET

// get
axios.get('/data.json',{
    // 注 此處參數寫入params中
    params: {
        id: 'zxm'
    }
}).then(res => {
    console.log(res);
})

POST

// post：參數直接跟在url後面即可
axios.post('xxxxxxxxx', {
        xxx: 'xxxx',
        xxxx: 'xxxx'
    }
}).then(res => {
    console.log(res);
})

4. 併發請求

併發請求：
同時進行多個請求，並統一處理返回值。兩個步驟：

1. axios.all([]).then()
2. axios.spread()

舉例：

axios.all([
    axios.get('url1'),
    axios.get('url2')
]).then(
    axios.spread((res1, res2) => {
        console.log(res1, res2);
    })
)

------

基礎篇到此結束，下篇記錄axios簡單實例，請求攔截器，響應攔截器。