文章目錄

• • 一、axios介紹
  • 二、安裝axios
  • 三、 案例
  • 四、框架整合
  • 五、插件

一、axios介紹

什么是 axios?
Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。
特性:
1、從瀏覽器中創建 XMLHttpRequests
2、從 node.js 創建 http 請求
3、支持 Promise API
4、攔截請求和響應
5、轉換請求數據和響應數據
6、取消請求
7、自動轉換 JSON 數據
8、客戶端支持防御 XSRF

瀏覽器支持：

二、安裝axios

方法一：速度慢

npm install axios -g

方法二：速度快

cnpm install axios -g

參數說明：
-g：表示全局安裝，將會安裝在你配置的：C:\Users\XinLiu\nodejs\node_global目錄下。如果不指定則為當前文件夾所在目錄（局部）；

安裝成功后如下所示：

3. 無需安裝，直接使用cdn

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

三、 案例

執行 GET 請求

// 為給定 ID 的 user 創建請求 axios.get('/user?ID=12345').then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});// 上面的請求也可以這樣做 axios.get('/user', {params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

執行 POST 請求

axios.post('/user', {firstName: 'Fred',lastName: 'Flintstone'}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});

執行多個并發請求

function getUserAccount() {return axios.get('/user/12345'); }function getUserPermissions() {return axios.get('/user/12345/permissions'); }axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 兩個請求現在都執行完成}));

四、框架整合

1、整合vue-axios

基于vuejs 的輕度封裝

1.1 安裝vue-axios

cnpm install --save axios vue-axios -g //-g:全局安裝

1.2 將下面代碼加入入口文件：

import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios'Vue.use(VueAxios, axios)

按照這個順序分別引入這三個文件： vue, axios and vue-axios

1.3 你可以按照以下方式使用:

Vue.axios.get(api).then((response) => {console.log(response.data) })this.axios.get(api).then((response) => {console.log(response.data) })this.$http.get(api).then((response) => {console.log(response.data) })

五、插件

axios-retry

Axios 插件 重試失敗的請求

1.1 安裝

cnpm install axios-retry -g //-g:全局安裝

1.2 使用

// CommonJS // const axiosRetry = require('axios-retry');// ES6 import axiosRetry from 'axios-retry';axiosRetry(axios, { retries: 3 });axios.get('http://example.com/test') // The first request fails and the second returns 'ok'.then(result => {result.data; // 'ok'});// Exponential back-off retry delay between requests axiosRetry(axios, { retryDelay: axiosRetry.exponentialDelay});// Custom retry delay axiosRetry(axios, { retryDelay: (retryCount) => {return retryCount * 1000; }});// 自定義 axios 實例 const client = axios.create({ baseURL: 'http://example.com' }); axiosRetry(client, { retries: 3 });client.get('/test') // 第一次請求失敗，第二次成功.then(result => {result.data; // 'ok'});// 允許 request-specific 配置 client.get('/test', {'axios-retry': {retries: 0}}).catch(error => { // The first request failserror !== undefined});

注意：除非 shouldResetTimeout被設置, 這個插件將請求超時解釋為全局值, 不是針對每一個請求，二是全局的設置。

1.3 測試
克隆這個倉庫 然后 執行:

cnpm test

vue-axios-plugin

Vuejs 項目的 axios 插件

2.1 安裝

可以通過script標簽引入，無需安裝：

<!-- 在 vue.js 之后引入 --> <script src="https://unpkg.com/vue"></script> <script src="https://unpkg.com/vue-axios-plugin"></script> cnpm install --save vue-axios-plugin -g //-g:全局安裝

然后在入口文件配置如下:

import Vue from 'Vue' import VueAxiosPlugin from 'vue-axios-plugin'Vue.use(VueAxiosPlugin, {// 請求攔截處理reqHandleFunc: config => config,reqErrorFunc: error => Promise.reject(error),// 響應攔截處理resHandleFunc: response => response,resErrorFunc: error => Promise.reject(error) })

2.2 示例
在 Vue 組件上添加了 $http 屬性, 它默認提供 get 和 post 方法，使用如下:

this.$http.get(url, data, options).then((response) => {console.log(response) }) this.$http.post(url, data, options).then((response) => {console.log(response) })

你也可以通過 this.$axios 來使用 axios 所有的 api 方法，如下：

this.$axios.get(url, data, options).then((response) => {console.log(response) })this.$axios.post(url, data, options).then((response) => {console.log(response) })

總結

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

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