Vue中axios的基本用法詳解
1.什麼是axios?
axios 是一個基於promise用於瀏覽器和 nodejs 的 HTTP 客戶端。簡單的理解就是ajax的封裝
2.axios的特征
從瀏覽器中創建 XMLHttpRequest
從 node.js 發出 http 請求
支持 Promise API
攔截請求和響應
轉換請求和響應數據
取消請求
自動轉換JSON數據
客戶端支持防止 CSRF/XSRF
3.axios在使用的時候需要註意的細節
引用 axios 時 Vue.prototype.axios = axios Vue.prototype.$axios = axios Vue.prototype.$http = axios 其實是都一個東西,隻是vue的原型鏈上加個變量(且變量不同),值是axios對象 。
隻是 一個是jquery封裝過的異步調用方法 一個是vue推薦的第三方異步封裝方法 他們都是調用的axios對象
隻是調用的時候 axios.post({..}) this.$axios.post({…}) this.$http.post({….})
4.axios在vue中的實例運用(留言評論接口)
App.vue代碼
<template> <div> <h1>學習axios</h1> <div v-if="token"> {{userInfo.name}} 積分:{{userInfo.score}} 等級:{{userInfo.rank}} <button @click="logout">退出</button> </div> <div class="login" v-else> <h3>登錄</h3> 用戶名: <input type="text" v-model="user.name"> <br> 密碼: <input type="password" v-model="user.password"> <br> <button @click="login">登錄</button> </div> <div> <h3>添加留言</h3> <textarea rows="" cols="" v-model="msg"> </textarea> <br> <button @click="sendMsg">發表留言</button> </div> <div class="list" v-if="feedlist.length"> <div class="item" v-for="item in feedlist" :key="item.id"> <h5>{{item.name}}</h5> <p>{{item.msg}}</p> <p>{{item.date}}</p> <hr> </div> </div> <!-- pagnation.pageTotal 如果有分頁信息就顯示,沒有就隱藏 --> <div class="pagnation" v-if="pagnation.pageTotal"> <!-- 如果current小等於就disabled 按鈕不可以用 --> <button :disabled="current<=1" @click="current--;getFeed()">上一頁</button> <!-- 循環遍歷總分頁書 出現1,2,3,4 --> <!-- 如果current等於item 就是當前頁給一個active的class --> <!-- 單擊時候設置current,獲取分頁對應的評論列表信息 --> <span :class="{'active':current==item}" v-for="item in pagnation.pageTotal" :key="item" @click="current=item;getFeed()">{{item}}</span> <!-- 如果current大於等於總分頁數據 按鈕不可以用 --> <button :disabled="current>=pagnation.pageTotal" @click="current++;getFeed()">下一頁</button> </div> </div> </template> <script> export default { data() { return { msg: '', //需要添加的評論 current: 1, //默認獲取第一頁評論 feedlist: [], //笑話列表 pagnation: { }, //分頁信息 user: { name: '', password: '', }, // 從本地獲取用戶信息 parse 把json字符串轉換為js對象 userInfo: JSON.parse(localStorage.getItem("userInfo") || "{}"), //用戶信息, // 從本地獲取token,字符串不需要pase轉 token: localStorage.getItem("token"), //token } }, // 組件創建完畢就加載 created() { this.getFeed(); }, // 登錄後顯示用戶信息 methods: { sendMsg() { // 基礎方法 this.$axios({ url: "/api/feed", method: "post", data: { msg: this.msg } }) .then(res => { // alert(res.data.msg); if (res.data.code == 0) { // 讓頁面回歸第一1 this.current = 1; // 獲取評論列表 this.getFeed(); // 清空評論框 this.msg = ''; } }) }, // 登錄成功後,獲取評論信息 // 除瞭登錄與註冊,接口規定向服務器請求數據必須加上 請求頭token // token一串加密的字符,包含瞭用戶信息等..(後端靠token識別用戶是否登錄) getFeed() { this.$axios.get( "/api/feed?current=" + this.current, //請求url // { // headers:{ // "Authorization":'Bearer '+localStorage.getItem("token") // } // } ) // 網絡請求成功 .then(res => { console.log("成功", res.data) this.feedlist = res.data.data; //評論信息 // 更新分頁信息 this.pagnation = res.data.pagnation; //分頁信息 }) // 網絡請求失敗 .catch(err => { console.log("失敗", err); alert(err.response.data.msg) }) }, logout() { // 清空用戶信息與token this.userInfo = {}; this.token = null; // 移除本地存儲 localStorage.removeItem("userInfo"); localStorage.removeItem("token"); }, login() { // 實現登錄 this.$axios.post( "/api/login", //請求的地址 this.user, //請求的數據 ) .then(res => { // 網絡請求成功 if (res.data.code === 200) { // res是響應的數據 // 01 本地存用戶信息,與token // stringify 把js對象轉換為json字符串 localStorage.setItem("userInfo", JSON.stringify(res.data.user)) localStorage.setItem("token", res.data.token); // 02 更新userInfo與token this.userInfo = res.data.user; this.token = res.data.token; // 登錄成功 獲取評論 this.getFeed() } else { alert(res.data.msg); } }) .catch(err => { // 網絡請求失敗 console.error(err) }) } } } </script> <style> .active { color: #FF7700 } .pagnation span { padding: 15px; cursor: pointer; } </style>
mian.js代碼
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false // 導入axios 沒有./ (axios網絡請求工具:1不依賴dom,2.前後端都可以用,3. 豐富攔截,擴展功能,4可封裝,復用性強) import axios from 'axios'; // 掛載到vue的全局(原型上),在每個組件都可以使用 ,prototype是固定的,$axios是自定義的 Vue.prototype.$axios = axios; // 指定默認的請求域名 axios.defaults.baseURL = "http://dida100.com:8888" // 給每個請求攔截一下,添加請求Token信息 axios.interceptors.request.use(function(config){ config.headers.Authorization = 'Bearer '+localStorage.getItem("token"); return config; }) // interceptors 攔截器 // request 請求 // config 配置 // headers頭信息 // Authorization 權限 // defaults 默認 // baseURL 基礎URL new Vue({ render: h => h(App), }).$mount('#app')
到此這篇關於Vue中axios的基本用法的文章就介紹到這瞭,更多相關Vue axios用法內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue使用axios發送請求並實現簡單封裝的示例詳解
- vue獲取token實現token登錄的示例代碼
- Vue使用axios添加請求頭方式
- Vue項目中封裝axios的方法
- vue項目中使用axios遇到的相對路徑和絕對路徑問題