axios學習

axios#

Axios 是什麼#

Axios 是一個基於 promise 的網路請求庫，可以用於瀏覽器和 node.js

Axios 使用簡單，包尺寸小且提供了易於擴展的介面。

使用 axios 直接使用 url 發送請求#

後端需配置可跨域，前端無需設置跨域

使用 axios 發送無參數 get 請求#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios({
    url: "http://127.0.0.1:5000/keynav/on_categorys/19",
    method: "get",
}).then(res => {
    console.log(res);
})
export default {}
</script>

上面的代碼，完成之後，打開 f12，然後查看控制台即可看到結果

使用 axios 發送有參數 get 請求#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios({
    url: "http://127.0.0.1:5000/keynav/on_categorys",
    method: "get",
    params: {
        id： "1"
    }
}).then(res => {
    console.log(res);
})
export default {}
</script>

使用 axios 發送無參數 post 請求#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios({
    url: "http://127.0.0.1:5000/keynav/on_categorys/19",
    method: "post",
}).then(res => {
    console.log(res);
})
export default {}
</script>

使用 axios 發送有參數 post 請求#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios({
    url: "http://127.0.0.1:5000/keynav/on_categorys",
    method: "post",
    params: {
        id： "1"
    }
}).then(res => {
    console.log(res);
})
export default {}
</script>

使用 axios 處理並發請求#

並發請求（返回結果是數組）#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios.all([
    axios.get("http://127.0.0.1:5000/keynav/category"),
    axios.get("http://127.0.0.1:5000/keynav/on_categorys", { params: { id: 19 } }),
]).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
})
export default {}
</script>

使用 spread 方法處理響應數組結果（把數組的每一個元素變成一個對象）#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios.all([
    axios.get("http://127.0.0.1:5000/keynav/category"),
    axios.get("http://127.0.0.1:5000/keynav/on_categorys", { params: { id: 19 } }),
]).then(
    axios.spread((res1, res2) => {
        console.log(res1);
        console.log(res2);
    })
).catch(err => {
    console.log(err);
})
export default {}
</script>

全局配置#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios.defaults.baseURL = 'http://127.0.0.1:5000/keynav'
axios.defaults.timeout = 5000;
axios.get("/on_categorys", { params: { id: 19 } }).then(res => {
    console.log(res);
});
axios.post("/category").then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
});
export default {}
</script>

請求配置#

這些是創建請求時可以用的配置選項。只有 url 是必需的。如果沒有指定 method，請求將默認使用 GET 方法。

{
  // `url` 是用於請求的伺服器 URL
  url: '/user',

  // `method` 是創建請求時使用的方法
  method: 'get', // 默認值

  // `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。
  // 它可以通過設置一個 `baseURL` 便於為 axios 實例的方法傳遞相對 URL
  baseURL: 'https://some-domain.com/api/',

  // `transformRequest` 允許在向伺服器發送前，修改請求數據
  // 它只能用於 'PUT', 'POST' 和 'PATCH' 這幾個請求方法
  // 陣列中最後一個函數必須返回一個字符串，一個Buffer實例，ArrayBuffer，FormData，或 Stream
  // 你可以修改請求頭。
  transformRequest: [function (data, headers) {
    // 對發送的 data 進行任意轉換處理

    return data;
  }],

  // `transformResponse` 在傳遞給 then/catch 前，允許修改響應數據
  transformResponse: [function (data) {
    // 對接收的 data 進行任意轉換處理

    return data;
  }],

  // 自定義請求頭
  headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是與請求一起發送的 URL 參數
  // 必須是一個簡單對象或 URLSearchParams 對象
  params: {
    ID: 12345
  },

  // `paramsSerializer`是可選方法，主要用於序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` 是作為請求體被發送的數據
  // 僅適用 'PUT', 'POST', 'DELETE 和 'PATCH' 請求方法
  // 在沒有設置 `transformRequest` 時，則必須是以下類型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 瀏覽器專屬: FormData, File, Blob
  // - Node 專屬: Stream, Buffer
  data: {
    firstName: 'Fred'
  },
  
  // 發送請求體數據的可選語法
  // 請求方式 post
  // 只有 value 會被發送，key 則不會
  data: 'Country=Brasil&City=Belo Horizonte',

  // `timeout` 指定請求超時的毫秒數。
  // 如果請求時間超過 `timeout` 的值，則請求會被中斷
  timeout: 1000, // 默認值是 `0` (永不超時)

  // `withCredentials` 表示跨域請求時是否需要使用憑證
  withCredentials: false, // default

  // `adapter` 允許自定義處理請求，這使測試更加容易。
  // 返回一個 promise 並提供一個有效的響應 （參見 lib/adapters/README.md）。
  adapter: function (config) {
    /* ... */
  },

  // `auth` HTTP Basic Auth
  auth: {
    username: 'janedoe',
    password: 's00pers3cret'
  },

  // `responseType` 表示瀏覽器將要響應的數據類型
  // 選項包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 瀏覽器專屬：'blob'
  responseType: 'json', // 默認值

  // `responseEncoding` 表示用於解碼響應的編碼 (Node.js 專屬)
  // 注意：忽略 `responseType` 的值為 'stream'，或者是客戶端請求
  // Note: Ignored for `responseType` of 'stream' or client-side requests
  responseEncoding: 'utf8', // 默認值

  // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名稱
  xsrfCookieName: 'XSRF-TOKEN', // 默認值

  // `xsrfHeaderName` 是帶有 xsrf token 值的http 請求頭名稱
  xsrfHeaderName: 'X-XSRF-TOKEN', // 默認值

  // `onUploadProgress` 允許為上傳處理進度事件
  // 瀏覽器專屬
  onUploadProgress: function (progressEvent) {
    // 處理原生進度事件
  },

  // `onDownloadProgress` 允許為下載處理進度事件
  // 瀏覽器專屬
  onDownloadProgress: function (progressEvent) {
    // 處理原生進度事件
  },

  // `maxContentLength` 定義了node.js中允許的HTTP響應內容的最大字節數
  maxContentLength: 2000,

  // `maxBodyLength`（僅Node）定義允許的http請求內容的最大字節數
  maxBodyLength: 2000,

  // `validateStatus` 定義了對於給定的 HTTP狀態碼是 resolve 還是 reject promise。
  // 如果 `validateStatus` 返回 `true` (或者設置為 `null` 或 `undefined`)，
  // 則promise 將會 resolved，否則是 rejected。
  validateStatus: function (status) {
    return status >= 200 && status < 300; // 默認值
  },

  // `maxRedirects` 定義了在node.js中要遵循的最大重定向數。
  // 如果設置為0，則不會進行重定向
  maxRedirects: 5, // 默認值

  // `socketPath` 定義了在node.js中使用的UNIX套接字。
  // e.g. '/var/run/docker.sock' 發送請求到 docker 守護進程。
  // 只能指定 `socketPath` 或 `proxy` 。
  // 若都指定，這使用 `socketPath` 。
  socketPath: null, // default

  // `httpAgent` 和 `httpsAgent` 定義一個自定義代理在執行 http
  // 和 https 請求時使用，分別在 node.js 中。這允許添加像
  // `keepAlive` 這樣的選項，這些選項默認不啟用。
  httpAgent: new http.Agent({ keepAlive: true }),
  httpsAgent: new https.Agent({ keepAlive: true }),

  // `proxy` 定義了代理伺服器的主機名，端口和協議。
  // 您可以使用常規的`http_proxy` 和 `https_proxy` 環境變量。
  // 使用 `false` 可以禁用代理功能，同時環境變量也會被忽略。
  // `auth`表示應使用HTTP Basic auth連接到代理，並且提供憑據。
  // 這將設置一個 `Proxy-Authorization` 請求頭，它會覆蓋 `headers` 中已存在的自定義 `Proxy-Authorization` 請求頭。
  // 如果代理伺服器使用 HTTPS，則必須設置 protocol 為`https`
  proxy: {
    protocol: 'https',
    host: '127.0.0.1',
    port: 9000,
    auth: {
      username: 'mikeymike',
      password: 'rapunz3l'
    }
  },

  // see https://axios-http.com/zh/docs/cancellation
  cancelToken: new CancelToken(function (cancel) {
  }),

  // `decompress` indicates whether or not the response body should be decompressed 
  // automatically. If set to `true` will also remove the 'content-encoding' header 
  // from the responses objects of all decompressed responses
  // - Node only (XHR cannot turn off decompression)
  decompress: true // 默認值

}

axios 實例#

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
let newVar1 = axios.create({
    baseURL: "http://127.0.0.1:5000/keynav",
    timeout: 5000
}); //創建一個axios實例
newVar1({
    url: "/on_categorys",
    params: {
        id: 19
    }
}).then((res) => {
    console.log(res);
}).catch((res) => {
    console.log(res);
});
let newVar2 = axios.create({
    baseURL: "http://127.0.0.1:5000/keynav",
    timeout: 5000
}); //創建一個axios實例
newVar2({
    url: "/category"
}).then((res) => {
    console.log(res);
}).catch((res) => {
    console.log(res);
});
export default {}
</script>

axios 攔截器#

axios 給我們提供了兩大類攔截器一種是請求方向的攔截（成功請求，失敗的）
另一種是響應方向的（成功的，失敗的）

攔載器的作用，用於我們在網路請求的時候在發起請求或者響應時對操作進行可響應的外理
發起請求時可以添加網頁加載的動畫強制登錄
可應的時候口以進行相應的數據外理

請求方向的

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios.interceptors.request.use(config => {
    console.log("進入請求攔截器");
    console.log(config);
    return config;
}, err => {
    console.log("請求方向失敗");
    console.log(err);
});

axios.get("http://127.0.0.1:5000/keynav/on_categorys?id=19").then(res => {
    console.log(res);
})
export default {}
</script>

響應方向的

<template>
    <div>
        111
    </div>
</template>
<script>
import axios from 'axios'
axios.interceptors.response.use(config => {
    console.log("進入響應攔截器");
    return config; //放行請求，若沒有return這個語句，則不會執行語句外下面的axios.get()
    // return config.data;
}, err => {
    console.log("響應方向失敗");
    console.log(err);
});

axios.get("http://127.0.0.1:5000/keynav/on_categorys?id=19").then(res => {
    console.log(res);
})
export default {}
</script>

axios 在 vue 中的模塊封裝#

方式一：封裝者處理，調用者請求#

創建一個與網路請求相關的部分

創建一個文件夾 network，裡面創建一個用來存放請求的文件夾 request，裡面創建一個 axios 的請求函數文件 request.js，裡面內容需要先導入 axios 模塊，然後把函數暴露出去：

封裝者位置：src/network/request/request.js

//封裝者位置
import axios from 'axios'
export function request(config) {
    axios({
        url: config
    }).then(res => {
        console.log(res);
    })
}

然後在 main.js 中引入封裝好的請求文件

調用者位置：src/main.js

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import axios from 'axios'

Vue.use(ElementUI);
Vue.prototype.axios = axios;
Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount('#app');

//引入封裝好的請求文件
//調用者位置
import { request } from './network/request/request'
request("http://127.0.0.1:5000/keynav/on_categorys?id=19")

參數補全版

//封裝者位置
import axios from 'axios'
export function request(config, success, fail) { //參數：請求結果、成功、失敗
    axios({
        url: config
    }).then(res => {
        success(res);
    }).catch(err => {
        fail(err);
    })
}

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import axios from 'axios'

Vue.use(ElementUI);
Vue.prototype.axios = axios;
Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount('#app');

//引入封裝好的請求文件
//調用者位置
import { request } from './network/request/request'
request("http://127.0.0.1:5000/keynav/on_categorys?id=19", res => {
    console.log(res);
}), err => {
    console.log(err);
}

方式二：封裝者請求，調用者處理#

在模塊裡進行請求，把請求的信息交給調用者去處理

//封裝者位置
import axios from 'axios'
export function request(config) { //參數：請求結果
    axios.defaults.baseURL = "http://127.0.0.1:5000/keynav";
    axios(config.url, { params: config.params }).then(res => {
        config.success(res);
    }).catch(err => {
        config.fail(err);
    })
}

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import axios from 'axios'

Vue.use(ElementUI);
Vue.prototype.axios = axios;
Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount('#app');

//引入封裝好的請求文件
//調用者位置
import { request } from './network/request/request'
request({
    url: '/on_categorys',
    params: {
        id: 19
    },
    success: res => {
        console.log(res);
    },
    fail: err => {
        console.log(err);
    }
})

方式三：封裝者返回對象，調用者處理(推薦使用)#

封裝者返回 Promise 對象，調用者使用 then 和 catch 方法處理響應結果或錯誤信息。

//封裝者位置
import axios from 'axios'
export function request(config) { //參數：請求結果
    return new Promise((resolve, reject) => {
        let newVar = axios.create({
            baseURL: "http://127.0.0.1:5000/keynav",
            timeout: 5000
        });
        newVar(config).then(res => {
            resolve(res);
        }).catch(err => {
            reject(err);
        })
    })
}

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import axios from 'axios'

Vue.use(ElementUI);
Vue.prototype.axios = axios;
Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount('#app');

//引入封裝好的請求文件
//調用者位置
import { request } from './network/request/request'
request({
    url: '/on_categorys',
    params: {
        id: 19
    },
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
});

方式四：封裝者請求創建實例並返回 Promise 對象，調用者處理(推薦使用)#

通過封裝者封裝的 request 函數進行請求，使用 axios.create 方法創建實例，並返回 Promise 對象（封裝者位置中的 return newVar(config); 是返回 Promise 對象的語句。）

調用者使用 Promise 的 then 和 catch 方法處理響應結果或錯誤信息。

//封裝者位置
import axios from 'axios'
export function request(config) { //參數：請求結果
    let newVar = axios.create({
        baseURL: "http://127.0.0.1:5000/keynav",
        timeout: 5000
    });
    return newVar(config);
}

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue'
import axios from 'axios'

Vue.use(ElementUI);
Vue.prototype.axios = axios;
Vue.config.productionTip = false;

new Vue({
    render: h => h(App),
}).$mount('#app');

//引入封裝好的請求文件
//調用者位置
import { request } from './network/request/request'
request({
    url: '/on_categorys',
    params: {
        id: 19
    },
}).then(res => {
    console.log(res);
}).catch(err => {
    console.log(err);
});