axios庫學習

1.npm安裝axios

npm install axios --save

2.導入axios

import axios from 'axios'

3.使用

axios有以下特性：

• 從瀏覽器中創建 XMLHttpRequests
• 從 node.js 創建 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求數據和響應數據
• 取消請求
• 自動轉換 JSON 數據
• 客戶端支持防御 XSRF

3.1全局配置

可以通過全局配置，指定url服務器的域名，連接超時時間等等，通過全局配置了后，調用axios時無需再重新傳入配置參數，默認會使用全局配置里面的配置信息。

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

3.2get請求

語法：

axios.get(url[,config]) .then(function) //異步請求成功的回調 .catch(function) //異步請求失敗的回調

示例：

//配置了全局參數baseURL后只需要寫服務器路徑名和提交參數 axios.defaults.baseURL = 'https://api.example.com'; //訪問https://api.example.com/user?ID: 12345 //示例一： axios.get('/user', {//params查詢參數params: {ID: 12345}}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});//示例二: axios.get('/user?ID: 12345').then(response => {console.log(response)};).catch(error => {console.log(error)});//示例三: axios({url:'/user',method:'get',params:{//參數ID: 12345} }).then(res =>{console.log(res) })catch(error => {console.log(error) });

3.3post請求

語法：

axios.post(url[, data[, config]]) .then(function) //異步請求成功的回調 .catch(function) //異步請求失敗的回調

示例：

//示例一: axios.post('/user', {firstName: 'zhang',lastName: 'san'}).then(response => {console.log(response);}).catch(error => {console.log(error);});//示例二: axios.({url:'/user',method:'post',data:{//post過去的數據firstName: 'zhang',lastName: 'san'} }).then(response => {console.log(response);}).catch(error => {console.log(error);});

3.4合并請求

有時有一些需求是：需要同時完成多個異步請求然后再進行回調

語法：

axios.all(iterable) //iterable為一個請求數組 .then(function) //異步請求成功的回調 .catch(function) //異步請求失敗的回調

示例：

//示例一: //請求一 function getUserAccount() {return axios.get('/user/12345'); } //請求二 function getUserPermissions() {return axios.get('/user/12345/permissions'); } //合并請求 //axios.spread可以拆分返回的回調結果 axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 兩個請求現在都執行完成}));//示例二: axios.all([axios.get('/user',params: {ID: 12345}), axios.post('/user', data:{//post過去的數據firstName: 'zhang',lastName: 'san'})]).then(axios.spread(function (data1, data2) {// 兩個請求現在都執行完成console.log(f1)console.log(f2)}));

3.5創建axios實例

有時候我們可能會多個服務器發送請求，而每個服務器要求請求的配置信息有不相同，這時候我們可以使用axios.create來創建獨立的axios實例，而不使用公共的axios實例。

語法：

const instance = axios.create([config]);

示例：

//返回一個axiospromise實例 const instance1 = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'} });const instance2 = axios.create({baseURL: 'https://api.example.com',timeout: 5000, });//使用像axios一樣 instance1.get('/user') .then(data =>{{console.log(data)})

4.請求配置

這里我直接復制官方文檔，只有 url 是必需的。如果沒有指定 method，請求將默認使用 get 方法。你可以對照這個官方文檔來設置請求配置，比較常用的，如：method，baseURL，headers，params，data，timeout，responseEncoding，proxy等等

{// `url` 是用于請求的服務器 URLurl: '/user',// `method` 是創建請求時使用的方法method: 'get', // default// `baseURL` 將自動加在 `url` 前面，除非 `url` 是一個絕對 URL。// 它可以通過設置一個 `baseURL` 便于為 axios 實例的方法傳遞相對 URLbaseURL: 'https://some-domain.com/api/',// `transformRequest` 允許在向服務器發送前，修改請求數據// 只能用在 'PUT', 'POST' 和 'PATCH' 這幾個請求方法// 后面數組中的函數必須返回一個字符串，或 ArrayBuffer，或 StreamtransformRequest: [function (data, headers) {// 對 data 進行任意轉換處理return data;}],// `transformResponse` 在傳遞給 then/catch 前，允許修改響應數據transformResponse: [function (data) {// 對 data 進行任意轉換處理return data;}],// `headers` 是即將被發送的自定義請求頭headers: {'X-Requested-With': 'XMLHttpRequest'},// `params` 是即將與請求一起發送的 URL 參數// 必須是一個無格式對象(plain object)或 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', 和 'PATCH'// 在沒有設置 `transformRequest` 時，必須是以下類型之一：// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams// - 瀏覽器專屬：FormData, File, Blob// - Node 專屬： Streamdata: {firstName: 'Fred'},// `timeout` 指定請求超時的毫秒數(0 表示無超時時間)// 如果請求話費了超過 `timeout` 的時間，請求將被中斷timeout: 1000,// `withCredentials` 表示跨域請求時是否需要使用憑證withCredentials: false, // default// `adapter` 允許自定義處理請求，以使測試更輕松// 返回一個 promise 并應用一個有效的響應 (查閱 [response docs](#response-api)).adapter: function (config) {/* ... */},// `auth` 表示應該使用 HTTP 基礎驗證，并提供憑據// 這將設置一個 `Authorization` 頭，覆寫掉現有的任意使用 `headers` 設置的自定義 `Authorization`頭auth: {username: 'janedoe',password: 's00pers3cret'},// `responseType` 表示服務器響應的數據類型，可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'responseType: 'json', // default// `responseEncoding` indicates encoding to use for decoding responses// Note: Ignored for `responseType` of 'stream' or client-side requestsresponseEncoding: 'utf8', // default// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名稱xsrfCookieName: 'XSRF-TOKEN', // default// `xsrfHeaderName` is the name of the http header that carries the xsrf token valuexsrfHeaderName: 'X-XSRF-TOKEN', // default// `onUploadProgress` 允許為上傳處理進度事件onUploadProgress: function (progressEvent) {// Do whatever you want with the native progress event},// `onDownloadProgress` 允許為下載處理進度事件onDownloadProgress: function (progressEvent) {// 對原生進度事件的處理},// `maxContentLength` 定義允許的響應內容的最大尺寸maxContentLength: 2000,// `validateStatus` 定義對于給定的HTTP 響應狀態碼是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者設置為 `null` 或 `undefined`)，promise 將被 resolve; 否則，promise 將被 rejectevalidateStatus: function (status) {return status >= 200 && status < 300; // default},// `maxRedirects` 定義在 node.js 中 follow 的最大重定向數目// 如果設置為0，將不會 follow 任何重定向maxRedirects: 5, // default// `socketPath` defines a UNIX Socket to be used in node.js.// e.g. '/var/run/docker.sock' to send requests to the docker daemon.// Only either `socketPath` or `proxy` can be specified.// If both are specified, `socketPath` is used.socketPath: null, // default// `httpAgent` 和 `httpsAgent` 分別在 node.js 中用于定義在執行 http 和 https 時使用的自定義代理。允許像這樣配置選項：// `keepAlive` 默認沒有啟用httpAgent: new http.Agent({ keepAlive: true }),httpsAgent: new https.Agent({ keepAlive: true }),// 'proxy' 定義代理服務器的主機名稱和端口// `auth` 表示 HTTP 基礎驗證應當用于連接代理，并提供憑據// 這將會設置一個 `Proxy-Authorization` 頭，覆寫掉已有的通過使用 `header` 設置的自定義 `Proxy-Authorization` 頭。proxy: {host: '127.0.0.1',port: 9000,auth: {username: 'mikeymike',password: 'rapunz3l'}},// `cancelToken` 指定用于取消請求的 cancel token// （查看后面的 Cancellation 這節了解更多）cancelToken: new CancelToken(function (cancel) {}) }

5.響應信息

axios的response如下，當我們回調then中的函數時，我們可以通過response.data，response.status來獲取response對應的信息。

{// `data` 由服務器提供的響應data: {},// `status` 來自服務器響應的 HTTP 狀態碼status: 200,// `statusText` 來自服務器響應的 HTTP 狀態信息statusText: 'OK',// `headers` 服務器響應的頭headers: {},// `config` 是為請求提供的配置信息config: {},// 'request'// `request` is the request that generated this response// It is the last ClientRequest instance in node.js (in redirects)// and an XMLHttpRequest instance the browserrequest: {} }

6.攔截器

我們對axios實例對象添加攔截器，在請求或響應被 then 或 catch 處理前攔截它們。如：

• 在request發起前攔截
• 在request發送失敗后攔截
• 在response返回后攔截
• 在response返回失敗時攔截

用法：

//請求攔截器 instance.interceptors.request.use() //響應攔截器 instance.interceptors.response.use()

示例：

const instance = axios.create({baseURL: 'https://some-domain.com/api/',timeout: 1000,headers: {'X-Custom-Header': 'foobar'} });//添加一個請求攔截器 instance.interceptors.request.use(config =>{//請求發送前進行攔截config.timeout=10000; //可以對請求config進行修改return config; //一定要返回config },err =>{//請求失敗后攔截console.log(err)return Promise.reject(error); });// 添加一個響應攔截器 axios.interceptors.response.use(function (response) {// Do something with response datareturn response;}, function (error) {// Do something with response errorreturn Promise.reject(error);});

7.取消請求

你可以通過cancel token來取消一個請求，axios.CancelToken是一個類，我們通過CancelToken.source()工廠方法創建一個實例。

示例：

var CancelToken = axios.CancelToken; var source = CancelToken.source(); //調用工廠方法創建資源//source.token是CancelToken實例，source.cancel是回調函數，可以看下面源碼 axios.get('/user/12345', {cancelToken: source.token }).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// handle error} });// cancel the request (the message parameter is optional) source.cancel('Operation canceled by the user.');

CancelToken源碼：

解析：

先看最下面的工廠函數，source()會先new CancelToken(function executor?），而CancelToken保存在token，而CancelToken的回調函數executor()會將c保存在cancel。

CancelToken類要求傳入一個函數executor，CancelToken的會先new Promise，并將Promise的resolve()函數交給CancelToken來管理。

然后CancelToken會執行executor()函數，并且executor()要求傳入一個回調函數cancel，回顧一下前面的工廠函數，executor()的功能是將傳入的參數傳遞給最外面的source對象，這時最外面的source就能控制executor()的回調。

executor()里的回調函數會new Cancel(message)，并且通過resolvePromise(token.reason);刪除創建的Promise(function promiseExecutor(resolve)對象。

var Cancel = require('./Cancel');/*** A `CancelToken` is an object that can be used to request cancellation of an operation.** @class* @param {Function} executor The executor function.*/function CancelToken(executor) {if (typeof executor !== 'function') {throw new TypeError('executor must be a function.');}var resolvePromise;this.promise = new Promise(function promiseExecutor(resolve) {resolvePromise = resolve;});var token = this;executor(function cancel(message) {if (token.reason) {// Cancellation has already been requestedreturn;}token.reason = new Cancel(message);resolvePromise(token.reason);});}/*** Throws a `Cancel` if cancellation has been requested.*/CancelToken.prototype.throwIfRequested = function throwIfRequested() {if (this.reason) {throw this.reason;}};/*** Returns an object that contains a new `CancelToken` and a function that, when called,* cancels the `CancelToken`.*/CancelToken.source = function source() {var cancel;var token = new CancelToken(function executor(c) {cancel = c;});return {token: token,cancel: cancel};};module.exports = CancelToken;

結合示例進行思考：

這里重復一下上面的示例，結合源碼思考一下，下面的操作是怎么實現的，我網上看過一些介紹，但是看得云里霧里，所以這里我自己重新總結了一下。

var CancelToken = axios.CancelToken; var source = CancelToken.source(); //調用工廠方法創建資源 /*這里創建的source有兩個參數，從源碼的工廠函數中可以知道：{token: token, //token里面是CancelToken實例cancel: cancel //而cancel里面保存的是executor的回調} *//*這里調用axios.get，當我們指定cancelToken: source.token時，axios.get會使用CancelToken實例中的promise來發送請求，再看到最下面的cancel()，從上面的源碼可以看出，我們的這個cancel()對應的是刪除cancelToken實例中的promise，而axios.get會使用CancelToken實例中的promise，所以當我們調用cancel()就會刪除請求。其實回想一下:CancelToken中的回調函數executor(c)的工作無非就是將刪除操作的回調函數c,丟給了最上層source.cancel來控制。無論CancelToken內部的promise如何，只有我通過source.cancel來調用刪除，那么CancelToken內部的promise就會被刪除。 */ axios.get('/user/12345', {cancelToken: source.token }).catch(function(thrown) {if (axios.isCancel(thrown)) {console.log('Request canceled', thrown.message);} else {// handle error} });// 刪除請求 source.cancel('Operation canceled by the user.');

總結

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

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