如果之前所有的发送请求过程都定义在vue组件中,每次都定义一遍比较麻烦,我们可以每个接口简化写一下,单独定义,然后在vue中调用即可;
1.比如我先在src/api/api.js中进行接口发送封装;’
import axios from 'axios';
var host = 'https://dog.ceo';
export const dogs = ()=>{
return axios.get(`${host}/api/breeds/image/random`);
}
注意可以把常量host域名单独定义;
然后发送请求时进行解析即可,get()方法中使用反引号(ESC和Tab中间)可以解析变量;
这次正常应该可以使用全局定义的axios,然后直接使用this.$axios引用,但是我使用后一直报错,单独导入后使用正常;
2.然后在组件中只需要做导入和使用即可;
把数据处理写在vue组件中;
<script>
//1.导入刚才定义的api文件
//注意导入的是{{dogs}},为刚才定义的js文件中的变量
import {dogs} from "@/api/api";
export default {
name: "axios_demo1",
data(){
return{
url:''
}
},
mounted(){
//2.使用导入的变量注意使用括号
dogs()
// .get('https://dog.ceo/api/breeds/image/random')
// //定义成函数箭头
.then(response => {
console.log(response);
console.log(response.data);
this.url = response.data.message
}).catch(function (error) {
console.log(error);
});
}
}
</script>