mixin混入來封裝axios請求
- 我們通過mixin來封裝axios請求這樣每一個組件直接通過混入來進行axios請求。
- 不必每次需要時都要import引入一次
- 首先需要下載axios的包
//用npm匹摇、cnpm或者yarn都行
npm install axios
yarn add axios
- 在src里新建一個mixins文件夾饿自，在新文件夾里新建一個js文件
//引入axios與Vue
import axios from 'axios'
import Vue from 'vue'
// 創(chuàng)建一個全局mixin
Vue.mixin({
methods: {
//get請求
$get(url,data){
return axios.get(url,{
params:data
})
},
//post請求
$post(url,data){
return axios.post(url,data)
}
},
})
- 不要忘記在main.js里將mixin引入
// @/ 為src文件夾目錄
//我在mixins文件夾里js文件名為index所有/index.js可以省略
import '@/mixins'
- 這樣所有的組件都能夠使用axios
//Axios 是一個基于 promise的HTTP庫 所以需要then獲取數(shù)據(jù)
async created() {
let {data} = await this.$get('dome.json')
console.log(data)
}
在這里我也想提一下fetch請求认然，需要注意的是fetch需要then兩次才能得到數(shù)據(jù)
fetch("data.json").then(res=>res.json()).then(res=>{
console.log(res)
})
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
