自實現微微型axios

2021-10-09 06:53:05 字數 2155 閱讀 5670

在實現前我們需要用json-server搭建乙個rest介面,這是大神弄好的乙個包,直接用就行了,30s足矣,用來方便測試,可以到npm上看使用:json-server

搭建好之後,我們就可以用它提供的介面來測試我們自己封裝的axios是否可行

**

<

!doctype html>

"en"

>

"utf-8"

>

"viewport" content=

"width=device-width, initial-scale=1.0"

>

document<

/title>

<

/head>

"testget()"

>

get請求<

/button>

"testpost()"

>

post請求<

/button>

"testput()"

>

put請求<

/button>

"testdelete()"

>

delete請求<

/button>

<

/div>

<

/body>

function

testget()

}).then

( response =>

, error =>)}

function

testpost()

}).then

( response =>

, error =>)}

function

testput()

}).then

( response =>

, error =>)}

function

testdelete()

).then

( response =>

, error =>)}

/* 1. 函式的返回值為 promise, 成功的結果為 response, 失敗的結果為 error

2. 能處理多種型別的請求: get/post/put/delete

3. 函式的引數為乙個配置物件 , // get/delete 請求的 query 引數

data: {}, // post 或 delete 請求的請求體引數 }

4. 響應 json 資料自動解析為 js

*///自己封裝axios

function

axios(,

data=})

=$&` })if

(querystring)

//1.執行非同步ajax請求

//建立xhr物件

//開啟連線(初始化請求,沒有請求)

request.

open

(method,url,

true

)//傳送請求

if(method ===

'get'

|| method ===

'delete'

)else

if(method ===

'post'

|| method ===

'put'

)//繫結狀態改變的監聽

request.

onreadystatechange=(

)=>

//如果響應狀態碼在[200,300)之間代表成功,否則失敗

const

= request

如果請求成功了,呼叫resolve()

if(status>=

200&& status<=

299)

resolve

(response)

}else}}

)}<

/script>

<

/html>

C AOP微型框架實現(二)

3.aopproxyattribute aop 特性 aopproxyattribute using system using system.runtime.remoting using system.runtime.remoting.proxies namespace enterpriseserv...

Axios實現非同步通訊

匯入axios script axios是乙個開源的可以用在瀏覽器端和nodejs的非同步通訊框架,她的主要作用就是實現ajax非同步通訊,其功能特點如下 從瀏覽器中建立xmlhttprequests 從node.js建立http請求 支援promise api js中鏈式程式設計 攔截請求和響應 ...

axios實現檔案上傳

最近的專案開發,有個功能是需要前端上傳檔案,然後後台解析 主要就是通過 input type file multiple change uploadfile uploadfile e else let imagefiles e.target.files let formdata new formda...