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 我這邊是用...