封装axios的简单理解

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>

效果如下：
在这里插入图片描述

封装axios的简单理解

猜你喜欢