vue-element-admin 综合开发四:axios安装和封装、mock安装/学习/使用

简介: 这篇文章是关于如何在Vue项目中使用axios进行网络请求、二次封装axios以及使用mockjs模拟响应数据的教程。

导言

一、axios使用

axios官网

1. 安装

npm install axios or yarn add axios

2. main.js 配置 vue

vue不是插件,所以不能通过Vue.use()的方式来引入
在这里插入图片描述

3. 测试

home/index.vue中的mouneted中写如下测试代码:

  mounted(){
    this.$http.get('/user?ID=12345')
        .then(function (response) {
          // 处理成功情况
          console.log(response);
        })
        .catch(function (error) {
          // 处理错误情况
          console.log(error);
        })
        .then(function () {
          // 总是会执行
        });
  }

在这里插入图片描述
打开控制台,可以发现,虽然请求404,但成功发送了请求
在这里插入图片描述

二、axios 二次封装

  1. 新建 src/config/index.js

    export default {
      baseUrl: {
        dev: '/api/',
        pro: ''
      }
    }
    
  2. 新建 src/api/axios.js:创建axios实例,使用拦截器

    import axios from 'axios'
    import config from './config'
    
    // 判断当前的运行环境, 如果是开发,则取开发地址 否则 取生产地址 
    const baseUrl = process.env.NODE_ENV == 'development' ? config.baseUrl.dev : config.baseUrl.pro
    
    // 工具类, ES6 的class语法   ...: ES6的扩展运算符
    class HttpRequest {
      constructor(baseUrl) {
        this.baseUrl = baseUrl
      }
    
      getInsideConfig() {
        const config = {
          baseURL: this.baseUrl,
          header: {}
        }
        return config
      }
    
      interceptors(instance) {
        // 添加请求拦截器
        instance.interceptors.request.use(function (config) {
          // 在发送请求之前做些什么
          return config;
        }, function (error) {
          // 对请求错误做些什么
          return Promise.reject(error);
        });
    
        // 添加响应拦截器
        instance.interceptors.response.use(function (response) {
          // 2xx 范围内的状态码都会触发该函数。
          // 对响应数据做点什么
          return response;
        }, function (error) {
          // 超出 2xx 范围的状态码都会触发该函数。
          // 对响应错误做点什么
          return Promise.reject(error);
        });
      }
    
      // 调用的函数
      request(options){
        const instance = axios.create()
        options = {...this.getInsideConfig(), ...options}
        this.interceptors(instance)
        return instance(options)
      }
    }
    
    //将 实例化的类 抛出去
    export default new HttpRequest(baseUrl)
    

三、编写请求(正式测试)

1. 新建 src/axios/data.js

import axios from './axios' // 注意:这里是同目录下的 axios

export const getMenu = (param) => {
  return axios.request({
    url: '/permission/getMenu',
    method: 'post',
    data: param
  })
}

2. home/index.vue

a、引入

在这里插入图片描述

b、 发请求

在这里插入图片描述

c、打印拦截器日志

api/axios.js 中 打印拦截器日志,看是否被拦截
在这里插入图片描述

d、页面日志(success)

在这里插入图片描述
在这里插入图片描述

四、mockjs模拟响应数据

mockjs 是一个 模拟请求响应 制作的假数据。

1. mock 安装和引入

  1. npm i mackjs or yarn add mackjs
  2. 新建 api/mock.js文件
  3. main.js 中引入
    在这里插入图片描述

2. mock 初使用

a、新建 api/mockServeData/home.js

在这里存放home页面的数据,存放请求数据的地方

// mock数据模拟
import Mock from 'mockjs'

// 图表数据
let List = []
export default {
  getStatisticalData: () => {
    //Mock.Random.float 产生随机数100到8000之间 保留小数 最小0位 最大0位
    for (let i = 0; i < 7; i++) {
      List.push(
        Mock.mock({
          苹果: Mock.Random.float(100, 8000, 0, 0),
          vivo: Mock.Random.float(100, 8000, 0, 0),
          oppo: Mock.Random.float(100, 8000, 0, 0),
          魅族: Mock.Random.float(100, 8000, 0, 0),
          三星: Mock.Random.float(100, 8000, 0, 0),
          小米: Mock.Random.float(100, 8000, 0, 0)
        })
      )
    }
    return {
      code: 20000,
      data: {
        // 饼图
        videoData: [
          {
            name: '小米',
            value: 2999
          },
          {
            name: '苹果',
            value: 5999
          },
          {
            name: 'vivo',
            value: 1500
          },
          {
            name: 'oppo',
            value: 1999
          },
          {
            name: '魅族',
            value: 2200
          },
          {
            name: '三星',
            value: 4500
          }
        ],
        // 柱状图
        userData: [
          {
            date: '周一',
            new: 5,
            active: 200
          },
          {
            date: '周二',
            new: 10,
            active: 500
          },
          {
            date: '周三',
            new: 12,
            active: 550
          },
          {
            date: '周四',
            new: 60,
            active: 800
          },
          {
            date: '周五',
            new: 65,
            active: 550
          },
          {
            date: '周六',
            new: 53,
            active: 770
          },
          {
            date: '周日',
            new: 33,
            active: 170
          }
        ],
        // 折线图
        orderData: {
          date: ['20191001', '20191002', '20191003', '20191004', '20191005', '20191006', '20191007'],
          data: List
        },
        tableData: [
          {
            name: 'oppo',
            todayBuy: 500,
            monthBuy: 3500,
            totalBuy: 22000
          },
          {
            name: 'vivo',
            todayBuy: 300,
            monthBuy: 2200,
            totalBuy: 24000
          },
          {
            name: '苹果',
            todayBuy: 800,
            monthBuy: 4500,
            totalBuy: 65000
          },
          {
            name: '小米',
            todayBuy: 1200,
            monthBuy: 6500,
            totalBuy: 45000
          },
          {
            name: '三星',
            todayBuy: 300,
            monthBuy: 2000,
            totalBuy: 34000
          },
          {
            name: '魅族',
            todayBuy: 350,
            monthBuy: 3000,
            totalBuy: 22000
          }
        ]
      }
    }
  }
}

b、mock.js 中 编写接口

这里就相当于后台的控制器层,暴露接口,将 请求数据 绑定

import Mock from 'mockjs'
import homeApi from './mockServeData/home'

Mock.mock('/home/getData', homeApi.getStatisticalData)

c、编写前端请求:data.js

export const getData = () => {
  return axios.request({
    url: '/home/getData'
  })
}

在这里插入图片描述

d、home.vue 发请求

  1. 引入 接口
    在这里插入图片描述
  2. 调用接口

      mounted(){
        getData().then(res => {
          const {code, data} = res.data
          if(code == 20000) {
            this.tableData = data.tableData
          }
          console.log(res)
        })
      }
    

    在这里插入图片描述

e、页面正常,查看控制台打印

在这里插入图片描述

相关文章
|
3月前
封装axios的get、post方法
本文介绍了如何封装axios的get和post方法,并展示了具体的代码实现,包括使用axios创建实例、设置请求拦截器以及定义get和post函数。
118 2
|
2月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第8天】
137 1
|
2月前
vue3 + Ts 中 使用 class 封装 axios
【10月更文挑战第5天】
162 1
|
2月前
|
前端开发 JavaScript API
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
自己动手封装axios通用方法并上传至私有npm仓库:详细步骤与实现指南
85 0
|
3月前
|
JavaScript
vue 中 axios 的安装及使用
本文介绍了在Vue项目中安装和使用axios的方法。首先通过命令`npm install axios --save-dev`安装axios,然后在组件的`created`生命周期钩子中使用`axios.get`异步获取数据,并将获取的数据更新到组件的`data`中。文中提供了完整的示例代码,包括安装命令、验证安装成功的步骤、Vue组件的模板、脚本和样式。
vue 中 axios 的安装及使用
|
2月前
|
JavaScript API 开发工具
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
vue尚品汇商城项目-day02【11.对axios二次封装+12.接口统一管理】
35 0
|
4月前
|
JSON JavaScript 前端开发
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
这篇文章讨论了在Vue项目中封装axios的最佳实践,包括设置接口请求前缀、请求头、状态码、请求方法的封装,以及如何使用请求和响应拦截器来处理token和响应状态,从而简化HTTP请求的配置和错误处理,提高代码的可维护性。
【Vue面试题二十四】、Vue项目中有封装过axios吗?主要是封装哪方面的?
|
5月前
|
存储 开发框架 前端开发
基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理
基于SqlSugar的开发框架循序渐进介绍(10)-- 利用axios组件的封装,实现对后端API数据的访问和基类的统一封装处理
|
2月前
|
资源调度 JavaScript
|
4月前
|
JavaScript 前端开发
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?
这篇文章主要讨论了axios的使用、原理以及源码分析。 文章中首先回顾了axios的基本用法,包括发送请求、请求拦截器和响应拦截器的使用,以及如何取消请求。接着,作者实现了一个简易版的axios,包括构造函数、请求方法、拦截器的实现等。最后,文章对axios的源码进行了分析,包括目录结构、核心文件axios.js的内容,以及axios实例化过程中的配置合并、拦截器的使用等。
【Vue面试题二十五】、你了解axios的原理吗?有看过它的源码吗?