Vue项目中用模块化思想封装axios

1. 在 src 目录里新建 utils 文件夹（表示工具类，里面建立 request.js 文件[ 里面封装axios ] ）和 api 文件夹（用来存放各类 api.js 文件，比如 articleAPI.js )。

例如：

request.js 封装：

查看代码

// 导入 axios 前记得先下载 npm i axios -S
import axios from 'axios'
 
// 调用 axios.create() 函数，创建一个 axios 的实例对象，用 request 来接收
const request = axios.create({
  // 指定请求的根路径，就是接口的根路径
  baseURL: 'https://www.escook.cn'
})
 
// 向外共享 request
export default request

articleAPI.js 接口：

查看代码

// 文章相关的 API 接口，都封装到这个模块中
import request from '@/utils/request.js'
 
// 向外按需导出一个 API 函数，方法内可根据实际接口参数个数自定义参数个数
// 当请求文章数据时，调用方法，传入接口参数即可
export const getArticleListAPI = function(_page, _limit) {
  return request.get('/articles', {
    // 请求参数
    params: {
      _page,
      _limit
    }
  })
}

Home.vue 调用请求（主要看请求部分代码）：

查看代码

 
<template>
  <div class="home-container">
    <!-- 头部区域 -->
    <van-nav-bar title="今日新闻" fixed />
 
    <!-- 导入，注册，并使用 ArticleInfo 组件 -->
    <!-- 在使用组件的时候，如果某个属性名是“小驼峰”形式，则绑定属性的时候，建议改写成“连字符”格式。例如： -->
    <!-- cmtCount 建议写成 cmt-count -->
    <van-pull-refresh v-model="isLoading" :disabled="finished" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <ArticleInfo
          v-for="item in artlist"
          :key="item.id"
          :title="item.title"
          :author="item.aut_name"
          :cmt-count="item.comm_count"
          :time="item.pubdate"
          :cover="item.cover"
        ></ArticleInfo>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
 
<script>
// 按需导入 API 接口
import { getArticleListAPI } from '@/api/articleAPI.js'
 
// 导入需要的组件
import ArticleInfo from '@/components/Article/ArticleInfo.vue'
 
export default {
  name: 'Home',
  data() {
    return {
      // 页码值
      page: 1,
      // 每页显示多少条数据
      limit: 10,
      // 文章的数组
      artlist: [],
      // 是否正在加载下一页数据，如果 loading 为 true，则不会反复触发 load 事件
      // 每当下一页数据请求回来之后，千万要记得，把 loading 从 true 改为 false
      loading: true,
      // 所有数据是否加载完毕了，如果没有更多数据了，一定要把 finished 改成 true
      finished: false,
      // 是否正在下拉刷新
      isLoading: false
    }
  },
  created() {
    this.initArticleList()
  },
  methods: {
    // 封装获取文章列表数据的方法
    async initArticleList(isRefresh) {
      // 发起 GET 请求，获取文章的列表数据
      const { data: res } = await getArticleListAPI(this.page, this.limit)
 
      if (isRefresh) {
        // 证明是下拉刷新；新数据在前，旧数据在后
        // this.artlist = [新数据在后, 旧数据在前]
        this.artlist = [...res, ...this.artlist]
        this.isLoading = false
      } else {
        // 证明是上拉加载更多；旧数据在前，新数据在后
        // this.artlist = [旧数据在前, 新数据在后]
        this.artlist = [...this.artlist, ...res]
        this.loading = false
      }
 
      if (res.length === 0) {
        // 证明没有下一页数据了，直接把 finished 改为 true，表示数据加载完了！
        this.finished = true
      }
    },
    // 只要 onLoad 被调用，就应该请求下一页数据
    onLoad() {
      console.log('触发了 load 事件！')
      // 1. 让页码值 +1
      this.page++
      // 2. 重新请求接口获取数据
      this.initArticleList()
    },
    // 下拉刷新的处理函数
    onRefresh() {
      console.log('触发了下拉刷新！')
      // 1. 让页码值 +1
      this.page++
      // 2. 重新请求接口获取数据
      this.initArticleList(true)
    }
  },
  // 注册组件
  components: {
    ArticleInfo
  }
}
</script>
 
<style lang="less" scoped>
.home-container {
  padding: 46px 0 50px 0;
}
</style>