介紹vue專案中的axios請求(get和post)
阿新 • • 發佈:2018-12-17
一、先安裝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請求(舉個例子)
<template>
<div class="sort">
<li v-for="cate in categoryList" >{{cate.name}}</li>
</div>
</template>
<script>
export default {
created(){
this.getCategory();
},
data(){
return{
categoryList:[]
}
},
methods:{
getCategory:function(){
this.$axios.get(this.GLOBAL.host+"/虛擬介面/a/all_category").then(res => {
var result=res.data;
if(result.code==0){
this.categoryList=result.data;
}
});
}
}
}
</script>
<style scoped>
/*樣式*/
</style>