axios 封装了原生的 XHR,让我们发送请求更为简单但假设在一个成百上千个vue文件的项目中,我们每一个 vue 文件都要写 axios.get()axios.post() 会显得很麻烦,后期的维护也不方便。所以把axios请求的每一步都封装起来,提高代码的复用性
1.首先我们需要先安装axios
2.在src目录中创建network文件夹
即如下:
- 创建core.js文件
- 创建config.js文件
- 创建index.js文件
具体操作如下
1.在config.js中命令导出GET,POST请求方式
//定义请求方式
export const GET="get";
export const POST="post";
export const path = { //地址的封装
list:"/small4/banner/list"
}
2.在core.js中引入两种方法,对get,post方法进行封装
import {
GET,
POST
} from './config'
import axios from 'axios' //注:别忘了引入axios
const instance = axios.create({ //设置baseurl和超出时间
baseURL: "https://api.it120.cc", //发送请求时,会在url前拼接baseurl
timeout: 10000 //设置请求超时
})
export function request(method, url, params) {
switch (method) {
case GET:
return get(url, params) //调用get方法
case POST:
return post(url, params) //调用post方法
}
}
function get(url, params) {
return instance.get(url, params)
}
function post(url, params) {
return instance.post(url, params)
}
3.在index.js 中调用封装get,post方法的函数,返回promise对象
import { request} from './core'
import { GET, path} from './config'
const network = {
getState(params) {
return request(GET, path.list,params)
}
}
export default network
- 在vue项目中的main.js文件中全局挂载到Vue对象的原型上
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import network from './network/index' //在mine.js中引入我们抛出的方法
Vue.prototype.$network = network //挂载到vue的prototype中
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
5.在组件中使用
<template>
<div id></div>
</template>
<script>
export default {
name: "",
components: {},
data: function() {
return {};
},
//生命周期 - 创建完成(访问当前this实例)
created() {},
//生命周期 - 挂载完成(访问DOM元素)
mounted() {
this.$network
.getState()
.then(res => {
window.console.log(res);
})
.catch(error => {
window.console.log(error);
});
}
};
</script>
<style scoped>
</style>
效果如下: