介紹vue項目中的axios請求（get和post）

jas0n 發布于2019-08-23 12:18 / 1092人閱讀

摘要：一先安裝依賴，還有依賴依賴包用請求需要用到的插入一個知識點會把依賴包安裝在生產環境中，并且把依賴包名稱添加到文件。

一、先安裝axios依賴，還有qs依賴

npm install axios --save

npm install qs --save

qs依賴包用post請求需要用到的

插入一個知識點：

npm install X --save 會把依賴包安裝在生產環境中，并且把依賴包名稱添加到 package.json 文件 dependencies。
而如果npm install X --save-dev則會把依賴包安裝在開發環境中，并且添加到 package.json 文件 devDependencies
如果vue項目要部署上線，為防止依賴包失效，一般采用–save

二、在main.js入口引用

import qs from "qs";
import axios from "axios";

//下面是將$axios和$qs掛在原型上，以便在實例中能用 this.$axios能夠拿到
Vue.prototype.$axios = axios;
Vue.prototype.$qs = qs;

三、定義全局變量復用域名地址

開發中的url一般是由協議+域名+端口+接口路由+參數組成
一般 協議+域名 這兩個部分是在axios是需要一直被復用的，所以可以設置一個專業的全局變量模塊腳本文件，在模塊里直接定義初始值，用export default 暴露出去，再入口文件main.js里面引入這個文件地址，并且使用Vue.prototype掛載到vue實例上面

首先在static文件下面的config文件里面新建一個 global.js文件（命名隨意）

在global.js文件下定義全局變量，這個項目我是定義服務器地址。

在main.js入口文件引用并掛載

import Global from "../static/config/global"   //引用
Vue.prototype.GLOBAL = Global;   //掛載原型，可以使用this.GLOBAL拿到global.js的內容

四、請求后臺接口數據（get請求和post請求）
1.get請求

不需要帶參數的get請求

this.$axios.get(this.GLOBAL.host.+“后臺接口地址”).then(res => {
//獲取你需要用到的數據
})

需要帶參數的get請求

this.$axios.get(this.GLOBAL.host.+“后臺接口地址”,{
    params:{            
        phone:12345678   //參數，鍵值對，key值：value值
        name:hh
    }
}).then(res => {
    //獲取你需要用到的數據
});

2.post請求

var data = {phone：12345678，name：hh}  //定義一個data儲存需要帶的參數
this.$axios.post(this.GLOBAL.host+“后臺接口地址”，this.$qs.stringify(data)
).then(res =>{
    //獲取你需要的數據
});

五、全部代碼

// main.js文件

import axios from "axios";
import qs from "qs";
import Global from "../static/config/global";

Vue.prototype.$axios = axios
Vue.prototype.$qs = qs;
Vue.prototype.GLOBAL = Global;

// global.js文件

const host = "協議+域名地址+端口";
export default {
  host
}

// 組件中發送axios請求（舉個例子）

GPU云服務器云服務器 post和get的區別 GET和POST的區別 get post get_post

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/98290.html

axios異步請求數據的簡單使用

摘要：使用模擬好后端數據之后模擬數據的使用參考，就需要嘗試請求加載數據了。數據請求選擇了，現在都推薦使用。規定要發送到服務器的數據。布爾值，表示請求是否異步處理。要求為類型的參數，請求成功后調用的回調函數。在一個中重寫回調函數的字符串。使用Mock模擬好后端數據之后（Mock模擬數據的使用參考：https://segmentfault.com/a/11...），就需要嘗試請求加載數據了。數...

forsigner 2019-08-23 14:40 評論0 收藏0
Vue開發總結及一些最佳實踐（已更新）

摘要：基本開發環境創建的項目，作為代碼編寫工具插件推薦插件配置文章目錄項目目錄結構介紹框架選擇處理請求二次封裝項目目錄結構簡介業務相關靜態文件全局組件基礎樣式布局樣式及工具引入請求配置路由全局狀態管理工具文件入口文件主要配置文件頁面檢查配置測試基本開發環境 vue-cli3 創建的項目，vscode 作為代碼編寫工具vscode插件推薦：vscode 插件配置文章目錄項目目錄結構介紹...

NotFound 2019-08-26 13:47 評論0 收藏0
vue封裝axios基本思路

Axios 是一個基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。在vue項目之中使用axios是一個非常明智的選擇，因為vue官方已經宣稱不再維護vue-resource,并且推薦使用axios. 1 為什么選擇axios？使用axios可以統一做請求-響應攔截，例如響應時我們將響應信息攔截起來，判斷狀態碼，從而彈出報錯信息設定請求超時,例如3000ms未響應...

microcosm1994 2019-08-26 12:10 評論0 收藏0
后端開發者的Vue學習之路（五）

摘要：由服務器提供的響應來自服務器響應的狀態碼來自服務器響應的狀態信息服務器響應的頭是為請求提供的配置信息所以請求返回后，我們可以通過來獲取響應情況。攔截器攔截器攔截器用于攔截發起的請求或用于攔截返回的響應。目錄上節內容回顧使用第三方組件庫如何發起請求請求錯誤處理請求帶參 ...

jay_tian 2019-04-23 11:51 評論0 收藏0
vue開發項目完全指南

摘要：有兩種方法，一種是在開發環境中設置通過的，另一種是在服務器上修改的配置設置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動去除統一管理在項目開發過程中，會涉及到很多接口的處理，當項目足夠大時，就需要統一管理接口。這篇文章總結了vue項目的所遇到的問題，包括跨域、用戶認證、接口統一管理、路由配置、兼容性處理，性能優化等內容。項目github地址 : 前端 https:...

leoperfect 2019-08-23 16:16 評論0 收藏0