Axios發送AJAX請求

Axios

目錄

• Axios
  • 特征
  • axios提供主要三種發起請求的方式
    • 方式一：直接axios實例直接call方式
    • 方式二：通過axios實例提供的不同http請求方式的方法
    • 方式三：其實是從第二種方式中單獨提出來的
      • 推薦使用第二種方式
  • 響應模式
    • 給axios對象設置回調函數
  • 總結

github文檔：axios github
該模塊兼容瀏覽器端和node.js后端發送http請求。

---

本文主要簡單介紹了請求的發送和響應callback的注冊。也就是axios發送ajax請求的使用方式，至於具體的請求內容和響應內容對象屬性定義；以及全局配置；攔截器功能，請移駕到axios github文檔，已經很簡介明了了。

博文圖片掛了臨時解決辦法

特征

• Axios 支持在瀏覽器端使用XMLHttpRequest發送http請求；
• 在node.js后端可以發送http請求；
• 支持攔截請求和響應
• 支持轉換請求負載數據和響應數據
• 支持取消請求
• 支持自動轉換為JSON 數據
• 客戶端支持防護抵御XSRF 跨站請求偽造。

axios提供主要三種發起請求的方式

以下config相當於是請求的內容封裝對象

方式一：直接axios實例直接call方式

import Axios from 'axios'

const config = {
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
}

Axios(config)  // 發送一個post請求

// 或者 Axios(url[,config])  只提供url參數默認發送一個get請求到url

const config02 = {
    method: 'get'
}

Axios('/users/', config02)  // 發送一個get請求到'/users/'

方式二：通過axios實例提供的不同http請求方式的方法

即axios實例提供了方法對了同方法名的http請求方式，不用再config參數中指定 method方法，而且將目的url和負載data都從config中剝離出來。

import Axios from 'axios'

Axios.get(url[,config])

Axios.post(url[,config])

方式三：其實是從第二種方式中單獨提出來的

Axios.request(config)
為什么單獨提出來，因為request的參數提供都是config object,而且沒指定http請求的方式，類似第一種方式。

推薦使用第二種方式

響應模式

既然是ajax請求，那么對於請求的處理模式的定義其實是回調函數的定義，只不過對於響應內容封裝再一個響應對象中，回調函數調用時將得到響應對象作為參數再回調中使用。

給axios對象設置回調函數

通過對象的then() api進行設置回調

import Axios from 'axios'

Axios.get(url, config).then(succc_callback, fail_callback)  // 對於失敗的callback也可以通過.catch（）方式添加，fail_callback的參數則是一個error對象，該對象的response屬性則是響應對象了。

總結

1. 對於axios這里主要簡單介紹發送請求和響應處理的使用。
2. axios可以直接通過三種api方式直接發送請求，也可以通過先通過create構造出對象，再利用對象使用api再發送請求。
3. axios的node.js后端的使用參考github文檔。
4. 至於get請求和post請求，get請求使用params屬性，post請求使用data屬性，post發送的content-type默認時‘application/json’。