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'
// 创建一个全局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获取数据
async created() {
let {data} = await this.$get('dome.json')
console.log(data)
}
在这里我也想提一下fetch请求，需要注意的是fetch需要then两次才能得到数据
fetch("data.json").then(res=>res.json()).then(res=>{
console.log(res)
})
