成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

介紹vue項(xiàng)目中的axios請求（get和post）

jas0n / 1100人閱讀

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

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

npm install axios --save
npm install qs --save

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

插入一個(gè)知識點(diǎn)：

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

二、在main.js入口引用

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

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

三、定義全局變量復(fù)用域名地址

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

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

在global.js文件下定義全局變量，這個(gè)項(xiàng)目我是定義服務(wù)器地址。

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

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

四、請求后臺接口數(shù)據(jù)（get請求和post請求）
1.get請求

不需要帶參數(shù)的get請求

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

需要帶參數(shù)的get請求

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

2.post請求

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

五、 全部代碼

// 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 = "協(xié)議+域名地址+端口";
export default {
  host
}

// 組件中發(fā)送axios請求（舉個(gè)例子）

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/98290.html

相關(guān)文章

  • axios異步請求數(shù)據(jù)的簡單使用

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

    forsigner 評論0 收藏0

  • Vue開發(fā)總結(jié) 及 一些最佳實(shí)踐 （已更新）

    摘要：基本開發(fā)環(huán)境創(chuàng)建的項(xiàng)目，作為代碼編寫工具插件推薦插件配置文章目錄項(xiàng)目目錄結(jié)構(gòu)介紹框架選擇處理請求二次封裝項(xiàng)目目錄結(jié)構(gòu)簡介業(yè)務(wù)相關(guān)靜態(tài)文件全局組件基礎(chǔ)樣式布局樣式及工具引入請求配置路由全局狀態(tài)管理工具文件入口文件主要配置文件頁面檢查配置測試 基本開發(fā)環(huán)境 vue-cli3 創(chuàng)建的項(xiàng)目，vscode 作為代碼編寫工具vscode插件推薦：vscode 插件配置 文章目錄 項(xiàng)目目錄結(jié)構(gòu)介紹...

    NotFound 評論0 收藏0

  • vue封裝axios基本思路

    Axios 是一個(gè)基于 promise 的 HTTP 庫，可以用在瀏覽器和 node.js 中。在vue項(xiàng)目之中使用axios是一個(gè)非常明智的選擇，因?yàn)関ue官方已經(jīng)宣稱不再維護(hù)vue-resource,并且推薦使用axios. 1 為什么選擇axios？ 使用axios可以統(tǒng)一做請求-響應(yīng)攔截，例如響應(yīng)時(shí)我們將響應(yīng)信息攔截起來，判斷狀態(tài)碼，從而彈出報(bào)錯(cuò)信息 設(shè)定請求超時(shí),例如3000ms未響應(yīng)...

    microcosm1994 評論0 收藏0

  • 后端開發(fā)者的Vue學(xué)習(xí)之路（五）

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

    jay_tian 評論0 收藏0

  • vue開發(fā)項(xiàng)目完全指南

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

    leoperfect 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<