Vue项目封装管理api

Vue项目封装api

Vue项目的开发会用到许多、且重复使用的api，所以合理的api管理会减少代码量，也便于后期的更改

1、首先需要在src文件夹下新建一个http文件夹
2、http文件下新建axios.js文件进行管理axios请求
3、http文件下新建api.js文件进行管理api

项目目录如下：

axios.js代码

// axios 需要下载模块npm i axios 
import axios from 'axios'

// 创建axios的一个实例
let instance = axios.create({
  baseURL: 'xxx', // 基础路径
  timeout: 10000
})

// 请求拦截器
instance.interceptors.request.use(
  function (config) {
    return config
  },
  function (error) {
    return Promise.reject(error) // 错误请求做些什么
  }
)

// 响应拦截器
instance.interceptors.response.use(
  function (response) {
    return response.data
  },
  function (error) {
    return Promise.reject(error) // 对响应错误做点什么
  }
)

export default function (method, url, data = null) {
  method = method.toLowerCase()
  if (method === 'post') {
    return instance.post(url, data)
  } else if (method === 'get') {
    return instance.get(url, { params: data })
  } else if (method === 'delete') {
    return instance.delete(url, { params: data })
  } else if (method === 'put') {
    return instance.put(url, data)
  } else {
    console.error('未知的method' + method)
    return false
  }
}

api.js代码

// 引入axios
import req from './axios'
// 定义接口

// 如：获取商品列表数据
export const getGoodsList = params =>
  req('get', '/goodsList', params)

// 如：获取商品详情数据
export const getGoodsDetail = params =>
  req('get', '/goodsDetail', params)

HelloWorld.vue调用api接口

<template>
  <div class='hello'>
    <el-row>
      <el-button type='primary' @click='click()'>获取商品列表数据</el-button>
      <el-button type='primary' @click='click2()'>获取商品详情数据</el-button>
    </el-row>
  </div>
</template>

<script>
import { getGoodsList, getGoodsDetail } from '@/http/api.js' // 导入接口
export default {
  name: 'HelloWorld',
  data () {
    return {
      // 参数
      query: {
        category: 1,
        pn: 1,
        page: 1,
        rn: 30,
      }
    }
  },
  methods: {
    click () {
      getGoodsList(this.query).then((res) => {
        console.log('获取商品列表的数据如下:', res)
      })
    },
    click2 () {
      getGoodsDetail({ ...this.query, goodid: 123 }).then((res) => {
        console.log('获取商品详情的数据如下:', res)
      })
    }
  }
}
</script>
<style scoped>

</style>

这里只有点击进行获取数据，并未渲染到视图中，且基础路径并未填写

基本的封装过程即是这样，如有问题欢迎提出，共同学习探讨，不惜勿怪，谢谢