Vue中封装axios的GET和POST请求

在vue项目中创建一个文件夹network

1.创建一个core.js文件，封装axios GET POST请求
代码如下：

import {GET,POST} from "./config"
import axios from "axios";

const instance = axios.create({
baseURL:"https://api.it120.cc",//发送请求时，会在url前拼接baseUrl
timeout:8000
})

//封装GET POST
export function request(method,url,params){
switch (method){
case GET:
return get(url,params)
case POST:
return post(url,params)
}
}

function get(url,params){
return instance.get(url,params)
}

function post(url,params){
return instance.post(url,params)
}

2.封装请求APl，处理接口数据

export const GET = "get";
export const POST ="post";

export const path ={
list:"/small4/shop/goods/list",

}

3.抛出network模块

import {request} from "./core"
import {GET,path} from "./config"

const network = {
getStoreList(params) {return request(GET,path.list,params)},
}
export default network;

4main.js中配置

import network from "./network/index";
Vue.prototype.$network = network;

5.在home中使用

<template>
<div class="home">
<button @click="onClick">点击</button>

<div v-for="(item,index) in list" :key="index">
{{item.name}}
<img :src="item.pic" alt="" width="200px">

</div>

</div>
</template>

<script>
// @ is an alias to /src

export default {
name: 'Home',
data(){
return{
list:[],

}
},
components: {

},
methods:{
onClick(){
this.$router.push(this.$routerConfig.about.path)
}
},
//调用
mounted(){
this.$network.getStoreList({
page:"1",
pageSize:"10"
}).then((response)=>{
console.log(response.data.data)
this.list=response.data.data
}).catch((error)=>{
console.log(error)
})

}
}
</script>