【前端】---- axios简易二次封装

1. 为什么要二次封装axios

api 统一管理,不管接口有多少,所有的接口都可以非常清晰,容易维护.

2. 操作步骤

2.1 包含的文件

• /api/http.js …… axios基础设置
• /api/request.js……大量请求接口设置
• /src/home/index.vue …… 使用axios封装的页面

安装axios
npm install axios

2.2 文件内容填写

• （1）/api/http.js配置

// 引入axios
import axios from 'axios'

// 设置基础路由
const http = axios.create({
    baseURL: "http://127.0.0.1:4523/m1/1475785-0-default",
    timeout: 6000,
})
// 请求拦截
http.interceptors.request.use(config => {
     return config  // ★★此处后期可以设置token的对比
}, err => {
    console.log(err);
})
// 响应拦截
http.interceptors.response.use(res => {
    // 对响应码的处理
     return res
}, err => {
    console.log(err);
})
// 暴露
export default http

• （2） /api/request.js配置

/ 封装请求参数
import http from './http.js'
 //下面是简写的形式
 // getHomeData 自定义的接口名字
 // 1. get无参数情况
 export const getHomeNoData = (params) => http.get('/api/home/echart',{params:params})
 // get由query参数情况
 export const getHomeHasData = (params) => http.get('/api/home/echart',{params:params})


 // 2. post请求
 export const postHomeData = (bodydata) => http.post('/api/home/login',bodydata)

注：
① 此处要注意get的query参数，要以{params:{id=888}}的形式
② 注意post请求，后面的参数是请求体 与params无关

• （3）/src/home/index.vue配置

<template>
<div ref="polyline" style="width:520px;height:180px"></div>
</template>
<script>
	// echarts模块引入
	import * as echarts from 'echarts'
	// ★★引入带query参数的get请求
	import {getHomeData} from '../../../api/request'
	mounted(){
      getHomeData({heroid:66}).then(response=>{ 
        console.log('请求成功了！',response)
        // 获取请求数据
        const echartData = response.data
        // 通过$refs获取DOM，并将初始化后，加入获取的数据，变成想要的图表
        var myChart = echarts.init(this.$refs.polyline)
         myChart.setOption(echartData)
        })
          }
<script>