當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

axios库学习

發布時間：2024/9/19 编程问答 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 axios库学习小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

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()

示例：

7.取消請求

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

示例：

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)對象。

結合示例進行思考：

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

總結

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

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

axios