美文网首页
Nuxt中Axios的api封装

Nuxt中Axios的api封装

作者: 有点皮的小黄皮 | 来源:发表于2021-01-11 11:32 被阅读0次

    1、下载Nuxt封装的Axios依赖

    npm install @nuxtjs/axios --save
    

    2、在nuxt.config.js中的配置

    export default {
      modules: [
        '@nuxtjs/axios',
      ],
    
      axios: {
        // proxy: true
      }
    }
    

    3、使用

    • 在asyncData中使用
    async asyncData({ $axios }) {
      const ip = await $axios.$get('http://icanhazip.com')
      return { ip }
    }
    
    • methods/created/mounted/etc 中使用
    methods: {
      async fetchSomething() {
        const ip = await this.$axios.$get('http://icanhazip.com')
        this.ip = ip
      }
    }
    



    接下来就要封装api了

    1、在plugins创建api.js

    
    export default function ({ app, $axios, redirect }) {
    
      const API = {};
    
      API.getPublicKey = function (params) {
        return $axios({
          url: '/api/serviceConvergeRsa',
          method: 'get',
          data: params,
          headers: {
            'encrypt': 1
          },
        })
      };
    
      API.getServiceList = function (data, header={}) {
        return $axios({
          url: `/api/getServiceConvergeList`,
          method: 'get',
          params: data,
          headers: header
        })
      };
    
      app.api = API;
      inject('api',API);
    
    }
    

    2、在nuxt.config.js中的配置

    export default {
      plugins: [
        '~/plugins/api'
      ],
      modules: [
        '@nuxtjs/axios',
      ],
    
      // 需要代理,可以打开底下的注释
      // axios: {
      //   proxy: true
      // },
      // proxy: {
      //   '/api/': 'https://www.jianshu.com'
      // },
    }
    

    3、使用

    • 在asyncData中使用
    async asyncData(context) {
        // 请检查您是否在服务器端
       // if (process.server) {}
       const RSA_DATA = await context.app.api.getPublicKey({});
       return RSA_DATA 
    }
    
    • 在methods中使用
    methods: {
        // 获取我的服务列表
        async getDatas() {
          const params = { "activityType": 0 }
          const headers = { }
          const data = await this.$api.getServiceList (params, headers);
          if (data.code == 200) {
            this.serviceLis = data.data || []
          } else {
            console.log(获取列表失败)
          }
        }
    }
    



    接口缓存

    1、下载lru-cache依赖

    npm install lru-cache --save
    

    2、在plugins创建globalCache.js

    用于缓存数据

    const LRU = require('lru-cache')
    const cachePage = new LRU({
        // 最大缓存数量
        max: 10,
        // 缓存过期时间(ms),缓存1小时
        maxAge: 60 * 60 * 1000
    })
     
    module.exports = cachePage
    

    3、修改api.js

    
    const globalCache = require('./globalCache');
    
    export default function ({ query, app, $axios, redirect }, inject) {
    
      const API = {};
      API.getPublicKey = function (params) {
        // 页面请求附带refresh参数时,强制刷新数据
        if (globalCache.get('serviceConvergeRsa') && globalCache.get('RSA_PUBLIC_KEY') && !query.refresh) {
          
          return Promise.resolve(globalCache.get('serviceConvergeRsa'));
        }
        
        return $axios({
          url: '/api/serviceConvergeRsa',
          method: 'get',
          data: params,
          headers: {
            'encrypt': 1
          },
        }).then(function (res) {
          var RSA_DATA = res.data
          if (RSA_DATA.code === 200) {
            console.log('刷新serviceConvergeRsa密钥数据~');
            // 设置缓存数据
            globalCache.set('RSA_PUBLIC_KEY', RSA_DATA.data.rsaPublicKey, Number(RSA_DATA.data.expireTime));
            globalCache.set('serviceConvergeRsa', RSA_DATA, Number(RSA_DATA.data.expireTime));
          }else{
            console.error('serviceConvergeRsa',RSA_DATA.message)
          }
          
          return Promise.resolve(res.data);
        })
      };
    
      API.getServiceList = function (data, header={}) {
        var globalCacheKey = 'getServiceConvergeList'
        // 如果接口缓存有数据,且页面请求没有refresh参数,则返回缓存数据
        if (globalCache.get(globalCacheKey) && !query.refresh) {
          return Promise.resolve(globalCache.get(globalCacheKey));
        }
        
        return $axios({
          url: `/api/getServiceConvergeList`,
          method: 'get',
          params: data,
          headers: header
        }).then(function (res) {
          var result = res.data;
          if (result.code == 200 && result.data) {
            console.log('刷新getServiceConvergeList服务汇聚列表数据~');
            // 设置缓存数据
            globalCache.set(globalCacheKey, res.data);
          }else{
            console.error('getServiceConvergeList',result.message)
          }
          return Promise.resolve(res.data);
        })
      };
      
      app.api = API;
    }
    

    其他配置以及使用 参考前面的api封装。

    如有不足,请多多指教。

    相关文章

      网友评论

          本文标题:Nuxt中Axios的api封装

          本文链接:https://www.haomeiwen.com/subject/ogssaktx.html