vue项目中使用api的优化

一般使用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})
     }