AXIOS的基礎應用

2021-10-07 06:09:23 字數 2173 閱讀 6678

基於axios傳送ajax請求,返回的結果都是乙個promise例項

=>ajax請求成功(網路層成功:狀態碼以2開頭)

=>對應的promise例項也是成功

qs 中有三個方法 formats parse stringify

qs.stringify(,

)輸出結果在下

"name=xiaoyu&age=22"

qs.parse

("name=xiaoyu&age=22"

)輸出結果在下

一些基本的配置資訊

axios(,

// get請求的傳參資訊(預設按照問號傳參傳遞給伺服器)

params:

, data:

, transformrequest:

function

(data)

,// `timeout` 指定請求超時的毫秒數(0 表示無超時時間)

timeout:0,

// `withcredentials` 表示跨域請求時是否需要使用憑證

withcredentials:

false

,// 預設伺服器返回資料型別的格式,不能干預伺服器返回的資料格式,只會把伺服器返回的格式按照我們的配置轉換為對應的資料格式

responsetype:

"json"

,// 自定義ajax請求成功和失敗的請求標準

validatestatus

(status)

})

// 也可以設定一些公共的配置資訊 便於每乙個請求使用

axios.defaults.baseurl =

""axios.defaults.headers[

"content-type"]=

axios.defaults.

transformrequest

= data => qs.

stringify

(data)

axios.defaults.timeout =

0axios.defaults.withcredentials =

true

axios(,

headers:})

axios(}

)上面的方式如果寫多個會很複雜 我們按照下面的方式來寫

axios.

get(url,

[config]

)axios.

post

(url,data,

[config]

)// config 是配置項

axios.

get(

"/user/list",}

).then

(response =>).

then

(result =>

)axios.

post

("/user/login"

,)

// 響應***,從伺服器獲取結果 ~ 自己.then中間做的事情

// 設定了響應***就可以省略中間的這一步then 響應***主要對 失敗時做了詳細的處理

axios.interceptors.response.

use(response =>

, reason =>

}else

}// 失敗時一定要寫下面這一步 若是不寫一樣會走下面的then方法

return promise.

reject

(response)})

axios.

get(

"/user/list",}

)// 響應***走完才會走下面這個then

.then

(result =>

)// 請求***:我們傳送請求 ~ 伺服器接受到內容 之間處理的事情(不論 get 和 post)

axios.interceptors.request.

use(config =>

// 上面的if判斷也可寫成下面的這種方式

// token && (config.headers["authorization"] = token)

return config

})

轉axios 的應用

尤雨溪之前在微博發布訊息,不再繼續維護vue resource,並推薦大家開始使用 axios axios 是乙個基於promise 用於瀏覽器和 nodejs 的 http 客戶端,它本身具有以下特徵 npm 1 2 3 npm install axios 源 cnpm install axios...

axios做爬蟲 axios的基礎使用

簡介 axios是基於promise用於瀏覽器和node.js的http客戶端 1.支援瀏覽器和node.js 2.支援promise 3.能夠請求攔截和響應 4.能轉換請求和響應資料 5.能取消請求 6.自動轉換為json資料 7.瀏覽器端支援防止csrf 跨站請求偽造 安裝1.使用npm安裝 n...

axios基礎封裝

script新建axios資料夾,新建index.js fetch.js fetch.js如下 index.js如下 引入fetch.js檔案 import from fetch 定義獲取資料的函式getdata 其中url,type,data對應fetch config 中的config expo...