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數據（帶參數和不帶參）

this.$ajax.get(url)
　　　　　　.then((response)=>{
        　　　　this.newsList=response.data.data;
 　　　　　　})
　　　　　　.catch((response)=>{
        　　　　console.log(response);
      　　　})
　　　　　　.finally(() => this.loading = false)
this.$ajax.get(url, {params: param})
　　　　　　.then((response)=>{
　　　　　　　　　this.newsList=response.data.data;
　　　　　　})
　　　　　　.catch((response)=>{
　　　　　　　　　console.log(response);
　　　　　　}).finally(() => this.loading = false)

 

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

this.$ajax.post(url)
　　　　　　.then((response)=>{
        　　　　this.newsList=response.data.data;
 　　　　　　})
　　　　　　.catch((response)=>{
        　　　　console.log(response);
      　　　}).finally(() => this.loading = false)

this.$ajax.post(url, {params: param})
　　　　　　.then((response)=>{
　　　　　　　　　this.newsList=response.data.data;
　　　　　　})
　　　　　　.catch((response)=>{
　　　　　　　　　console.log(response);
　　　　　　}).finally(() => this.loading = false)

 

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