在线观看www成人影院-在线观看www日本免费网站-在线观看www视频-在线观看操-欧美18在线-欧美1级

0
  • 聊天消息
  • 系統消息
  • 評論與回復
登錄后你可以
  • 下載海量資料
  • 學習在線課程
  • 觀看技術視頻
  • 寫文章/發帖/加入社區
會員中心
創作中心

完善資料讓更多小伙伴認識你,還能領取20積分哦,立即完善>

3天內不再提示

源碼分析從 import axios from 'axios' 的執行過程-1

汽車電子技術 ? 來源:知碼前端 ? 作者:清清玄 ? 2023-03-01 10:01 ? 次閱讀

01

前言

眾所周知在前后分離的背景下,一款優秀的網絡請求庫是多么的重要,axios 現在幾乎已經是一個項目開發的標配了,無論是從vue 還是到 react 都可以看到它的身影。可以看出這個庫的受歡迎程度。

這兩篇文章我們看一下 axios 的相關知識。從 import axios from 'axios' 再到 axios 的內部源碼,帶大家看一下經典庫的運行流程。

相信大家認真讀完之后肯定會有所收獲。

圖片

為了能幫助更多人學習,如果有需要的可以加我的好友邀請你進入前端學習交流微信群。

圖片

02

功能概覽

以下內容來自 axios 官方

  • Make XMLHttpRequests from the browser
  • Make http requests from node.js
  • Supports the Promise API
  • Intercept request and response
  • Transform request and response data
  • Cancel requests
  • Automatic transforms for JSON data
  • Client side support for protecting against XSRF

03

**基本使用及問題思考

**

這里我們假定您已經創建好了一個項目并且成功引入了 axios 依賴。

下面我們看一下在使用的 axios的時候一些步驟:

1、引入 axios 如下:

import axios from 'axios'

這行代碼背后做了什么?

我們稍后再來說

2、使用 axios

// 使用方式一
axios({
url: xxxx,
data: {}
}).then(res => {})
// 使用方式二
axios.[get|post|put]({
url: xxxx,
data: {}
}).then(res => {})
// 使用方式三
axios.request({
url: xxxx,
data: {}
}).then(res => {})

從上面的代碼可以看出 axios 的使用方式可以說是有很多種,而且配置也比較完善,我們引入的 axios 即可以直接調用,又可以以對象的方式調用其它方法。

那么axios到底是怎么做到的?稍后我們也會進行講解。

3、最后再來看一下我個人認為 axios 最優秀的地方,執行鏈、攔截器是怎么運行的,運行的流程是是怎么樣的。

下面我們一一解答,可以本篇文件講解不完,我會分成兩篇文章進行說明。

04

**import axios from 'axios'背后做了什么

**

要了解這個問題,首先要知道 js 模塊化背后做了什么。

我們平時安裝的一些第三方依賴庫在我們 npm i 或者 npm install 之后都會被放到項目的 node_modules 文件夾下面。里面的內容是非常非常多的,因為不僅僅是我們項目所需要依賴,還有依賴所需要依賴……直到把所有的依賴都加載完成之后才算完成。

當打包工具執行到 import axios from 'axios' 這行代碼之后,他會從 node_modules里面尋找 axios 目錄,如果沒有則報錯:找不到依賴,讓你進行安裝。

如果已經找到 axios 目錄,則會繼續找到該目錄下面的 package.json 清單文件。內容如下(版本不同,內容可能也會不同,不過大同小異)

圖片

在加載完 package.json之后,會找到 "main":"index.js" 這行配置。并且會認定 "index.js" 為入口文件。執行里面的代碼,如下:

圖片

從上面代碼可以看出,最后又加加載執行 ./lib/axios 文件中的代碼。在加載 文件中的代碼時會找到默認導出,如下:

圖片

至些,我們 import axios from 'axios' 背后的基本操作說完了,最后找到了

'/lib/axios'中的 module.exports = axios 這行代碼,拿到 axios 實例。

05

axios實例倒底是什么

從上面我們簡單的分析出 import axios from 'axios' 獲取實例的過程。然后就開始使用,但是有些朋友會有疑問,為什么 axios 即能當方法調用也可以當對象調用其方法屬性,非常靈活也非常方便。這背后是怎么做的?我們繼續分析

lib/axios 文件中暴露出一個默認的實例對象 axios。如下:

module.exports = axios;

看一下這個對象的定義:

// Create the default instance to be exported
var axios = createInstance(defaults);

是由一個方法生成,繼續看這個 createInstance 函數

function createInstance(defaultConfig) {
var context = new Axios(defaultConfig);
var instance = bind(Axios.prototype.request, context);


// Copy axios.prototype to instance
  utils.extend(instance, Axios.prototype, context);


// Copy context to instance
  utils.extend(instance, context);


return instance;
}

我們重點看一下:

var instance = bind(Axios.prototype.request, context);

instance實例由bind函數返回,bind函數內容如下:

module.exports = function bind(fn, thisArg) {
return function wrap() {
var args = new Array(arguments.length);
for (var i = 0; i < args.length; i++) {
      args[i] = arguments[i];
    }
return fn.apply(thisArg, args);
  };
};

到這里我們就應該能看明白 bind 函數返回了一個名字叫 wrap的函數。也就是說上面的 instance 其實就是一個 函數,這樣一步步的返回最終 lib/axios 默認導出的就是一個函數類型的數據。

這也就說明了為什么 import axios from 'axios' 之后 我們可以直接當函數進行調用。因為默認的 axios 本身就是函數肯定可以直接調用。

那問題又來了,為什么 axios 還可以當成對象那樣可以調用某些屬性方法呢?

那就要看下 createInstance函數中的兩行行代碼了:

// Copy axios.prototype to instance
  utils.extend(instance, Axios.prototype, context);


// Copy context to instance
  utils.extend(instance, context);

這里涉及到了原型鏈的一些知識??梢岳斫獬砂?Axios.prototype 中的方法分配給了 instance 函數對象中,具體的過程如下:

function extend(a, b, thisArg) {
  forEach(b, function assignValue(val, key) {
if (thisArg && typeof val === 'function') {
      a[key] = bind(val, thisArg);
    } else {
      a[key] = val;
    }
  });
return a;
}

被分配方法有:

['post', 'put', 'patch']
['delete', 'get', 'head', 'options']
['request', 'getUri']

所以我們就可以像:axios.get 或者 axios.post 這樣調用了。

到目錄為止我們基本已經梳理清楚了axios的加載過程,和基本的用法。

聲明:本文內容及配圖由入駐作者撰寫或者入駐合作網站授權轉載。文章觀點僅代表作者本人,不代表電子發燒友網立場。文章及其配圖僅供工程師學習之用,如有內容侵權或者其他違規問題,請聯系本站處理。 舉報投訴
  • 內部
    +關注

    關注

    0

    文章

    9

    瀏覽量

    18960
  • 運行
    +關注

    關注

    0

    文章

    25

    瀏覽量

    15556
  • 源碼
    +關注

    關注

    8

    文章

    668

    瀏覽量

    30165
收藏 人收藏

    評論

    相關推薦
    熱點推薦

    鴻蒙開發實戰:網絡請求庫【axios

    [Axios]?,是一個基于 promise 的網絡請求庫,可以運行 node.js 和瀏覽器中。本庫基于[Axios]原庫v1.3.4版本進行適配,使其可以運行在 OpenHarmony,并沿用其現有用法和特性。
    的頭像 發表于 03-25 16:47 ?4414次閱讀
    鴻蒙開發實戰:網絡請求庫【<b class='flag-5'>axios</b>】

    鴻蒙OS開發實例:【工具類封裝-首選項本地存儲】

    **import dataPreferences from &apos;@ohos.data.preferences&apos;; import
    的頭像 發表于 03-28 15:45 ?2241次閱讀
    鴻蒙OS開發實例:【工具類封裝-首選項本地存儲】

    【米爾-全志T113-i開發板試用】5、編寫系統信息顯示的Web頁面組件

    =\"ts\"&amp;gt; import axios from \'axios\' import
    發表于 02-22 23:03

    openharmony import文件的源碼在哪個位置?

    import mediaLibrary from &amp;#039;@ohos.multimedia.medialibrary&amp;#039;;下載了openharmony的
    發表于 04-08 11:34

    網絡組件axios可以在OpenHarmony上使用了

    傳和下載文件,并獲取到上傳和下載的進度。上傳文件:importaxios from '@ohos/axios'import &amp;#123; FormData &
    發表于 08-29 12:11

    51單片機接收ASCII碼并實現1602顯示

    []={&amp;apos;0&amp;apos;,&amp;apos;A&
    發表于 11-20 20:51 ?23次下載
    51單片機接收ASCII碼并實現1602顯示

    51單片機在無源蜂鳴器上循環演奏低音“DO、RE、MI、FA、SO、LA、SI”這7個音調。

    ;TimeInit.h"#define Fosc (11059200L)unsigned char i=0£?unsigned char cnt=0; //char Tone[]={&amp;apos;D&amp;
    發表于 11-23 17:36 ?8次下載
    51單片機在無源蜂鳴器上循環演奏低音“DO、RE、MI、FA、SO、LA、SI”這7個音調。

    LSTM GRU Bidirectional-LSTM股票預測

    tushare as tsimport matplotlib.pyplot as pltplt.style.use(&amp;apos;fivethirtyeight&amp;apos
    發表于 12-05 09:06 ?11次下載
    LSTM GRU Bidirectional-LSTM股票預測

    Python報錯:ImportError cannot import name &amp;apos;imresize&amp;apos;解決方法

    Python出現錯誤: ImportError: cannot import name 'imresize' 解決方案 首先安裝 pillow: pip install pillow 然后安裝
    的頭像 發表于 01-13 09:56 ?2063次閱讀

    核心功能具體的執行過程-2

    這篇我們主要講解一下 axios 中的 配置、攔截器和執行鏈等一些核心的功能到底是怎么運行的。
    的頭像 發表于 03-01 09:59 ?791次閱讀
    核心功能具體的<b class='flag-5'>執行</b><b class='flag-5'>過程</b>-2

    if(a==1 &amp;amp;&amp;amp; a==2 &amp;amp;&amp;amp; a==3),為true,你敢信?

    接下來咱們來嘗試解決這個問題。假設 if(a==1&;&amp;a==12)是等于 true的,那么a肯定不可能是一個“普通的變量”。它勢必要有能力在執行的時候能夠動態改動值。
    的頭像 發表于 05-08 11:01 ?1335次閱讀
    if(a==<b class='flag-5'>1</b> &<b class='flag-5'>amp</b>;<b class='flag-5'>amp</b>;&<b class='flag-5'>amp</b>;<b class='flag-5'>amp</b>; a==2 &<b class='flag-5'>amp</b>;<b class='flag-5'>amp</b>;&<b class='flag-5'>amp</b>;<b class='flag-5'>amp</b>; a==3),為true,你敢信?

    OpenHarmony:使用網絡組件axios與Spring Boot進行前后端交互

    這兩個函數是使用axios庫發起HTTP GET請求的函數,用于與服務器進行通信
    的頭像 發表于 01-22 17:35 ?997次閱讀
    OpenHarmony:使用網絡組件<b class='flag-5'>axios</b>與Spring Boot進行前后端交互

    鴻蒙OS封裝【axios 網絡請求】(類似Android的Okhttp3)

    HarmonyOS 封裝 axios 網絡請求 包含 token 類似Android Okhttp3
    的頭像 發表于 03-26 21:14 ?3123次閱讀

    鴻蒙OS開發實例:【工具類封裝-頁面路由】

    import common from &apos;@ohos.app.ability.common&apos;; import route
    的頭像 發表于 03-28 16:16 ?1190次閱讀
    鴻蒙OS開發實例:【工具類封裝-頁面路由】

    河南淮濱一根智慧路燈桿&amp;apos;挑&amp;apos;起城市治理新變革

    河南淮濱一根智慧路燈桿&apos;挑&apos;起城市治理新變革
    的頭像 發表于 05-23 09:19 ?135次閱讀
    河南淮濱一根智慧路燈桿&<b class='flag-5'>amp</b>;<b class='flag-5'>apos</b>;挑&<b class='flag-5'>amp</b>;<b class='flag-5'>apos</b>;起城市治理新變革
    主站蜘蛛池模板: 四虎最新地址 | 黄色三级三级三级免费看 | 欧美成人亚洲欧美成人 | 人人干人人澡 | 性xxxxbbbb免费播放视频 | 美女扒开下面让男人捅 | 国产美女精品在线 | 亚洲精品在线视频观看 | 台湾av | 欧美特黄一免在线观看 | 国产三级香港三级人妇 | 天天躁日日躁狠狠躁中文字幕老牛 | 美女又爽又黄视频 | 888午夜不卡理论久久 | 黄网站观看 | 成人午夜小视频手机在线看 | 欧美一区色 | 永久在线观看www免费视频 | 日日夜夜天天干干 | 噜噜噜久久久 | 欧美性猛交xxxx免费看久久 | 国产99久9在线视频 国产99久久九九精品免费 | 免费观看在线aa | 四虎东方va私人影库在线观看 | 成人午夜大片免费看爽爽爽 | 免费色视频在线观看 | 久久香蕉国产线看观看亚洲片 | 亚洲无色| www.日本黄色| 亚洲视频一区二区三区 | 靓装爱神12丝袜在线播放 | 久久ww | 天天操天天舔 | 一区二区三区四区在线 | 日本三级黄 | 手机精品视频在线观看免费 | 四虎4hu永久免费国产精品 | 亚洲综合久久综合激情久久 | 天天色狠狠干 | 久久综合欧美 | 午夜视频网站在线观看 |