Vue中axios基礎使用（一）------前端前端請求數據

axios簡要說明及使用緣由

axios 是一個基於Promise 用於瀏覽器和 nodejs 的 HTTP 客戶端，它自己具備如下特徵：

• 從瀏覽器中建立 XMLHttpRequest
• 從 node.js 發出 http 請求
• 支持 Promise API
• 攔截請求和響應
• 轉換請求和響應數據
• 取消請求
• 自動轉換JSON數據
• 客戶端支持防止 CSRF/XSRF
• 體量相對較小

綜上特徵，前端工程化時，很天然額放棄了jquery(是否是不能用，只是請求數據，前端使用必定問題沒有，就是體量較大，node端沒法使用，啓服務，作代理。。。妥妥的放棄jQuery吧);

看了vue官網介紹使用 axios 訪問 API瞬間理解了大概

1.按照官網常規引入

npm install axios --save

2.使用疑問：axios並無install 方法，因此是不能使用vue.use()方法。
百度發現：那麼難道每一個文件都要來引用一次？解決方法有不少種：

• .結合 vue-axios使用
• axios 改寫爲 Vue 的原型屬性
• 結合 Vuex的action

官網介紹了前兩種，

本次只作前端數據請求，講一下，最最經常使用的第二種方法：axios 改寫爲 Vue 的原型屬性

axios 改寫爲 Vue 的原型屬性

首先在主入口文件main.js中引用，以後掛在vue的原型鏈上

import axios from 'axios'
Vue.prototype.$ajax= axios

在組件中使用

• get數據（帶參數和不帶參）

 1 this.$ajax.get(url)  2 　　　　　　.then((response)=>{  3         　　　　this.newsList=response.data.data;  4  　　　　　　})  5 　　　　　　.catch((response)=>{  6  　　　　console.log(response);  7  　　　})  8 　　　　　　.finally(() => this.loading = false)
 9 this.$ajax.get(url, {params: param}) 10 　　　　　　.then((response)=>{ 11 　　　　　　　　　this.newsList=response.data.data; 12 　　　　　　}) 13 　　　　　　.catch((response)=>{ 14 　　　　　　　　　console.log(response); 15 　　　　　　}).finally(() => this.loading = false)

 

• post請求（帶參數和不帶參）

 1 this.$ajax.post(url)  2 　　　　　　.then((response)=>{  3         　　　　this.newsList=response.data.data;  4  　　　　　　})  5 　　　　　　.catch((response)=>{  6  　　　　console.log(response);  7  　　　}).finally(() => this.loading = false)  8 
 9 this.$ajax.post(url, {params: param}) 10 　　　　　　.then((response)=>{ 11 　　　　　　　　　this.newsList=response.data.data; 12 　　　　　　}) 13 　　　　　　.catch((response)=>{ 14 　　　　　　　　　console.log(response); 15 　　　　　　}).finally(() => this.loading = false)

 

正如官網所說，其實 Vue 和 axios 能夠在一塊兒配合的事情不僅是訪問和展現一個 API。你也能夠和 Serverless Function 通訊，向一個有寫權限的 API 發送發佈/編輯/刪除請求等等。下個部分將進一步講解node中axios的應用（接口）