您好,登錄后才能下訂單哦!
axios 簡(jiǎn)介
axios 是一個(gè)基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端,它本身具有以下特征:
引入方式:
$ npm install axios //使用淘寶源 $ cnpm install axios //或者使用cdn: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
安裝其他插件的時(shí)候,可以直接在 main.js 中引入并使用 Vue.use()來注冊(cè),但是 axios并不是vue插件,所以不能 使用Vue.use()
,所以只能在每個(gè)需要發(fā)送請(qǐng)求的組件中即時(shí)引入。
為了解決這個(gè)問題,我們?cè)谝?axios 之后,通過修改原型鏈,來更方便的使用。
//main.js
import axios from 'axios' Vue.prototype.$http = axios
在 main.js 中添加了這兩行代碼之后,就能直接在組件的 methods 中使用 $http命令
methods: { postData () { this.$http({ method: 'post', url: '/user', data: { name: 'xiaoming', info: '12' } }) }
更多的基礎(chǔ)知識(shí)大家可以參考這篇文章:https://www.jb51.net/article/110324.htm
vue使用axios實(shí)現(xiàn)文件上傳進(jìn)度實(shí)時(shí)更新
XHR二級(jí)增加了progress事件,我們可以據(jù)此在瀏覽器接收新數(shù)據(jù)期間添加實(shí)時(shí)數(shù)據(jù)進(jìn)度條,從而使得交互更加友好
vue模板
<div class="progress" @click="upload" :>
vue-js
var form = new FormData() form.append('file', vm.$refs.upload.files[0]) form.append('id', id) form.append('type', type) var config = { onUploadProgress: progressEvent => { var complete = (progressEvent.loaded / progressEvent.total * 100 | 0) + '%' this.progress = complete } } axios.post(`api/uploadFile`, form, config).then((res) => { if (res.data.status === 'success') { console.log('上傳成功') } })
關(guān)鍵點(diǎn)在于progress事件,而axios對(duì)ajax封裝之后需要在axios的config參數(shù)里面寫好事件處理函數(shù)(具體參數(shù)寫法可查看axios文檔)
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問大家可以留言交流,謝謝大家對(duì)億速云的支持。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。