首頁 > web前端 > js教程 > 如何使用vue中ajax請求和axios包

如何使用vue中ajax請求和axios包

php中世界最好的语言
發布: 2018-06-02 14:40:16
原創
1123 人瀏覽過

這次帶給大家如何使用vue中ajax請求和axios包,使用vue中ajax請求和axios包的注意事項有哪些,下面就是實戰案例,一起來看一下。

首先,引入axios

CDN: <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
npm: npm install axios   并在全局的js中引入:import axios from 'axios';
登入後複製

•get請求

axios.get('/user?ID=12345')
 .then(function (response) {
  console.log(response);
 })
 .catch(function (error) {
  console.log(error);
 });
登入後複製

post請求

 依赖于qs包,将对象转换成以&连接的字符串
//例:
axios.post( postUrl ,qs.stringify({userid:1,username:'yyy'})).then(function (response) {
  console.log(response);
})
登入後複製

附錄:配置axios

#在上面封裝的方法中,使用了axios 的三個配置項,實際上只有url 是必須的,完整的api 可以參考使用說明

為了方便,axios 也為每種方法起了別名,例如上面的saveForm 方法等價於:

axios.post('/user', context.state.test02)
登入後複製

完整的請求也應包含.then 和.catch

.then(function(res){
 console.log(res)
})
.catch(function(err){
 console.log(err)
})
登入後複製

當請求成功時,會執行.then,否則執行.catch

這兩個回呼函數都有各自獨立的作用域,如果直接在裡面訪問this,無法訪問到Vue 實例

這時只要添加一個.bind(this) 就能解決這個問題

.then(function(res){
 console.log(this.data)
}.bind(this))
登入後複製

相信看了本文案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!

推薦閱讀:

如何使用vue原始碼解析事件機制

#如何操作JS取得使用者所在城市及地理位置

#

以上是如何使用vue中ajax請求和axios包的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板