安装axios npm install axios --save
创建一个request.js文件在src下 对axios进行封装
代码
import axios from 'axios'
//
export function request(config) {
const instance = axios.create({
//请求的地址
baseURL: "http://123.207.32.32:8000",
timeout: 5000
})
// 请求拦截
instance.interceptors.request.use(config => {
return config
}, err => {
console, log(err)
})
//响应拦截
instance.interceptors.response.use(res => {
return res.data
}, err => {
console.log(err)
})
return instance(config)
}
获取请求直接引用当前问件
import {request} from "@/request.js"
//在methods中引用该方法获取请求
request需要传一个值可以为具体的地址也可以穿进一个对象
request('/data').then(res=>{
console.log(res)
})
request({url:'/category',method"'get'}).then(res=>{
console.log(res)
})
**当然也可以进一步封装 **
比如我要具体访问http://123.207.32.32:8000/home/data中的goods数据
我可以在写一个getShopList.js的文件来封装一个获取他的方法
import {request} from "@/request.js"
export function getHomeGoods() {
return request({
url: '/home/data',
})
}
然后在组件中我们需要访问这个接口中的数据时我们就可以直接导入
<script>
import {getHomeGoods} from "@/getShopList.js"
export default{
data(){
return{
goodsList:[]
}
},
methods: {
getHomeGoods().then(res=>{
this.goodsList=this.res.goodsList
})
}
}
</script>
郑重声明:本文版权归原作者所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。