vuejs前端框架作者推薦使用axios進行資料請求,axios的使用方法非常簡單,最近在使用vuejs碰到個小問題,於是記錄一下:
1.如果是npm管理前端專案的話,直接npm i axios --save-dev安裝就好,如果不是,那麼直接引用就行了
使用的時候在頁面的script中import axios from 'axios'引入,下面是es6的函式式寫法
getList: function (page, limit) {
axios.get('/api/v1/topics', {
params: {
page: this.page || 1,
tab: this.tab,
limit: this.limit || 20
}
}).then((response) => {//這裡使用箭頭函式,那麼下面的this指向就沒有問題了
const data = response.data
if (data) {
this.list = data
}
}).catch((error) => {
console.log(error)
})
}
2.axios不支援jsonp,因為axios的作者覺得jsonp不太友好,推薦用CORS方式更為乾淨,但是jsonp支援範圍更加廣闊一些,一些老式的IE瀏覽器也能支援,所以有些公司還是jsonp用的多些,那麼如果要使用jsonp,可以獨立安裝
npm i jsonp --save-dev 然後在頁面中引用import jsonp from 'jsonp',使用方式也是非常簡單的:
getList: function () {
jsonp(config.ajaxUrl + '路徑', null, (err, data) => {
if (err) {
console.error(err.message);
} else {
if (data.list.length > 0) {
data.list.map((item) => this.list.push(item))
console.log(data);
}
}
})
}