axios請求總結

2021-10-06 13:53:21 字數 2174 閱讀 1417

axios是第三方封裝庫,作用是在框架中使用資料請求

安裝:

(1)npm

$ npm install axios –s

(2)cdn     

特點:

- 1. 它在瀏覽器中建立的是瀏覽器物件

- 2. 它底層是用node.js中的http模組實現的

- 3. 支援promise

- 4. 可以攔截請求和響應

功能: loading載入效果、登入攔截

- 5. 轉換請求和響應資料

- 6. 自動轉換為json資料

- 7. 客戶端支援防止xsrf 

- 8. axios會自動封裝資料

使用:

一、模擬資料

1.mock模擬資料的請求 

(1)mock.js生成(在mock 目錄)

(2)線上拷貝

(3)線上的

2.後端介面的請求

後端渲染模板:

二、傳送請求

(1)get請求

無引數:

axioa寫在vue裡面的methods下面的函式裡

reg () 

}).then( res => ).catch( err => console.log( err ))

}

或者

axios.get('./mock/data/data.json')

.then( res => )

.catch( err => console.log( err ))

}

有引數:

axios.get(`$/shop`,

}).then( res => ).catch( error => console.log( error ))

get請求攜帶引數用params

(2)post請求

post請求必須先設定請求頭

/* 統一設定post請求頭 */

new vue(/register`,

data: p,// post請求攜帶引數的配置項

method: 'post',

withcredentials: true,

}).then( res => console.log( res ))

.catch( err => console.log( err ))

三、封裝

/*

封裝一下axios

! 它是乙個函式,因為它要攜帶引數

*/function request () ).then( res => resolve( res ))

.catch( err => reject( err ))

break;

case 'post':

console.log('post - p')

const p = new urlsearchparams()

// data

if ( data )

}axios().then( res => resolve( res ))

.catch( err => reject( err ))

break;

case 'put':

axios().then( res => resolve( res ))

.catch( err => reject( err ))

break;

case 'delete':

axios().then( res => resolve( res ))

.catch( err => reject( err ))

break;

default:

break;}})

}

axios資料請求

請求方式預設是get 可以忽略,安裝get 請求寫法一axios.get請求寫法二axios then res catch error 這些請求寫在new vue中的methods中post請求寫法axios.defaults.headers.post content type 這裡的請求頭寫法是對...

axios 資料請求

1 安裝axios和qs npm install axios npm install qs 2 在vue的專案入口檔案main.js中,引入我們所需要axios 已經封裝好的ajax,也可以用fetch,但是相容性不如axios好 同時需要引入qs模組 我們在做post請求的時候需要用到 3 在vu...

axios同步請求

一般使用axios進行資料請求就是要使用非同步請求,因為專案需求,需要同步請求,所以async await了解一下 async用於宣告乙個函式是非同步的,await用於宣告在乙個非同步函式中等待語句執行完畢。也就是說await只能在async函式中使用 基本用法就是這樣的 methods 我這邊是用...