nuxt axios自动封装

237 阅读1分钟

接口源数据

/**
  @/api/modules/???.js
*/
export const login = {
    url: '/user/login',
    method: 'post',
    createJson: true
}
export const register = {
    url: '/user/register',
    method: 'post',
    createJson: true
}

自动扫描文件夹内声明接口

/**
  @/api/index.js
*/
function initApi() {
  const apiContext = require.context('./modules/', true, /\.js$/)
  let apiList = {}
  apiContext.keys().map(item=>{
    const apiModle = apiContext(item)
    apiList = { ...apiList, ... apiModle }
  })
  return apiList
}
export default {...initApi()}

构造脚本

/**
  @/plugins/api-plugin.js
*/
import apiList from '@/api/index'
import Qs from 'qs'
export default ({ $axios, $cookies }, inject) => {
    let api = { ...apiList }
    for (let i in api) {
        api[i] = function () {
            const { url, method, createJson } = { ...api[i] }
            const headers = createJson ?
                { 'Content-Type': 'application/json' }
                :
                { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' }
            return function (data) {
                data = createJson ? data : Qs.stringify(data)
                return new Promise((resolve, reject) => {
                    $axios({
                        url, method, headers, data
                    }).then(res => {
                        resolve(res.data)
                    }).catch(err => {
                        if (err.response) {
                            reject(err.response.data)
                        } else {
                            reject(err)
                        }
                    })
                })
            }
        }()
    }
    inject("api", api)
}