最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • vue项目中使用api的优化

    正文概述 掘金(二分_之一)   2020-12-23   250
    一般使用api的方式
    1. 编写自定义的axios.js文件,包括请求发送和响应拦截的一些配置(一般我会配置请求超时时间、发送请求时的token、处理响应时的异常信息)

    2. 引入axios.js,定义接口

      import axios from './axios'
      export const getBanner = (params) => {
          return axios({
              url: '/circle/newest',
              method: 'post',
              data: params
          })
      }
      
    3. 在页面中使用

      import { getBanner } from '@/apis/banner.js'
      async search() {
         await getBanner({id:0})
      }
      
    优化后使用api的方式
    1. 定义api

      ...ex:/apis/banner.js
      export default {
          "getBanner|post":"/circle/newest"
      }
      
    2. 使用统一的接口调用方式

      import axios from '@/utils/axios.js'
      let transfer = function(url,args,method) {
          let param = {
              url: url,
              method: method,
              data:args
          }
          return axios(param)
      }
         
      export default function(API) {
          let apis = {}
          for (let item in API) {
              let aKey = item.split("|"); // ['banner/getBanner','post']
              let key = aKey[0]; 
              let method = aKey[1] || 'get';
              apis[key] = function(args) {
                  return transfer(API[item],args, method);
              }
          }
          return apis
      }
      
    3. 读取api并转化为key,value形式

      import transfers from './transfer'
      let apiComponents = require.context('@/apis', true, /\.js$/)  // 读取各api所在文件夹
      let apis = {}
      //遍历所有文件
      apiComponents.keys().forEach(key => {
          let name = key.split('/').pop().replace('.js', '')  // 获取文件名
          let componentEntity = apiComponents(key).default;
          for (let p in componentEntity) {
              apis[`${name}/${p}`] = componentEntity[p]  // 将apis里面的接口转化成  {banner/getBanner|get : '/getList'}
          }
      })
      export default transfers(apis)
      
    4. 页面中使用

        async search() {
          await this.$apis['banner/getBanner']({id:0})
        }
      

    起源地 » vue项目中使用api的优化

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元