vsCode封装网络请求

1、在src 下创建一个名为http的文件夹

2、在其下创建

api.js

//封装所有的请求
import service from './index'

export default {

// login({ username, password }) {
//     return service.post('/login', { username, password })
// },
//1、获取首页数据(get)
getHomeDate() {
return service.get('/recommend')
},
//2. 搜索(get)
getSearchDate({ value }) {
return service.post('/search', { value })
},
}

在

index.js

//封装axios

import axios from 'axios'
//创建一个axios的实例
const service = axios.create({
//基础路径
baseURL: '/api',
timeout: 10000
})

//响应拦截
service.interceptors.response.use((res) => {
return res.data
}, err => {
console.log(err)
})
//导出
export default service

3、在

App.vue

main.js

import api from './http/api'

//挂载在原型对象上
Vue.prototype.$api = api

4、在组件中引用

this.$api.函数名  完成引用

//如下
this.$api
.getCard()
.then((res) => {
this.list = res.shopList?res.shopList:[];
window.console.log(this.list);

})
.catch((err) => {
window.console.log(err);
});