zoukankan      html  css  js  c++  java
  • vue项目中的axios封装

    用vue项目开发,把请求接口数据的插件axios封装,方便多人开发,也方便以后管理。

    1、首先安装vue项目:  

    1)cnpm i -g vue-cli //安装全局vue-cli脚手架
    
    2)vue init webpack vueAxios(项目文件夹名) 
    
    3)cd vueAxios(项目名)
    
    4)cnpm i

    demo项目的目录如下:

    安装axios 

    2、安装axios:  

    1)cnpm i axios 或者  淘宝镜像: cnpm i axios
    2)src =》main.js里面引入安装好的axios:import axios from 'axios'
    3)把axios挂载在vue原型上:Vue.prototype.$axios = axios;

    如下图:
        

    3、vue解决解决跨越的问题:配置config =》index.js =》proxyTable  

    '/api': {
         target: 'http://localhost:7001/',
         changeOriginL: true,
         pathRewrite: {
            '^/api': '/api'
         }
     }

    开始封装axios

    4、在src目录下建新文件夹:request,然后在此文件夹下分别建三个js文件:

        配置axios的$http.js、配置多个baseURL域名的base.js、集中项目所有接口的apis.js(方便多人开发,以后管理)

      

    5、在刚刚新建的$http.js里面配置axios的请求拦截  

    import axios from 'axios'
    import QS from 'qs'
    
    
    // 请求超时时间
    axios.defaults.timeout = 1000 * 10;
    // post请求头
    axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    // 设置公共url
    //axios.defaults.baseURL = 'http://127.0.0.1:7001'
    
    // 添加请求拦截器
    axios.interceptors.request.use(function (config) {
      console.log(config);
      // 在发送请求之前做些什么
      return config;
    }, function (error) {
      console.log(error);
      // 对请求错误做些什么
      return Promise.reject(error);
    });
    
    // 添加响应拦截器
    axios.interceptors.response.use(function (response) {
      console.log(response);
      // 对响应数据做点什么
      return response;
    }, function (error) {
      console.log(error);
      // 对响应错误做点什么
      return Promise.reject(error);
    });
    
    export default axios

    6、在base.js自由配置多个项目需要的baseURL  

    const base = {
        egg: 'http://127.0.0.1:7001'
    }
    
    export default base

    7、在apis.js里集中写项目需要的接口请求 

    import axios from './$http'
    import base from './base'
    import QS from 'qs'
    
    const demo = {
        eggDemo() {
            return axios.get(`${base.egg}/api/role` );
        }
    }
    
    export default demo;

    8、把汇总了所有接口的apis.js引入到main.js里,并挂载到vue原型上:  

    import demo from './request/apis'
      Vue.prototype.$api = demo;

      此时main.js代码如下:

    import Vue from 'vue'
    import App from './App'
    import router from './router'
    import axios from 'axios'
    import QS from 'qs'
    import demo from './request/apis'
    
    Vue.config.productionTip = false
    
    Vue.prototype.$axios = axios;
    Vue.prototype.$api = demo;
    
    Vue.use(QS);//,request
    
    
    /* eslint-disable no-new */
    new Vue({
      el: '#app',
      router,
      components: { App },
      template: '<App/>'
    })

    9、在HelloWorld.vue这个页面请求接口  

    <template>
      <div class="hello">
        <div class="show_data">
          <button @click="clickShowData">加载数据</button>
          <div class="show_box">{{ data }}</div>
        </div>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      data () {
        return {
            data: ''
        }
      },
      methods: {
        clickShowData() {
          this.$api.eggDemo()//$api在main.js里已经引入到vue的原型上,不需要在引入就可以通过this.$api直接使用
            .then(res => {
              _this.data = res;
            }).catch(err => {
              _this.data = err;
          })
        }
      }
    }
    </script>
    
    <!-- Add "scoped" attribute to limit CSS to this component only -->
    <style scoped>
    h1, h2 {
      font-weight: normal;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>
  • 相关阅读:
    poj 2485 Highways 最小生成树
    hdu 3415 Max Sum of MaxKsubsequence
    poj 3026 Borg Maze
    poj 2823 Sliding Window 单调队列
    poj 1258 AgriNet
    hdu 1045 Fire Net (二分图匹配)
    poj 1789 Truck History MST(最小生成树)
    fafu 1181 割点
    减肥瘦身健康秘方
    人生的问题
  • 原文地址:https://www.cnblogs.com/zzwlong/p/13468631.html
Copyright © 2011-2022 走看看