vue项目中axios的简单封装

前言：

​ 很多朋友的vue项目的开发过程中，习惯性的将数据的请求放在了组建中，如下图，这样的话，当后台数据发生变化的时候，当项目体量较大，文件较多时，更改起来就不太方便，所以为了方便管理数据接口，实现快速的开发，我们可以将数据接口通过API封装的形式来进行管理。

实现API装

第一步：

对于基准路径的实现封装：

1. 在src文件中新建一个util文件夹
2. 在util文件中新建一个index.js文件
3. ​ 在index.js文件中对于基准路径进行封装

如图所示：

对上述操作完成后，接下来在index.js文件中写入

import axios from 'axios'
// 设置请求基准路径
const Serve = axios.create({
    baseURL:'URL',
    timeout: 5000,
})
// 请求响应器
Serve.interceptors.request.use(config => {
    return config
})

// 响应拦截器
Serve.interceptors.response.use(config => {
    return config
}, function (error) {
    return Promise.reject(error)
})
export default Serve

导入axios，通过axios.create()创建一个新的axios对象，在baseURL中写入基准路径，最后通过export default将其抛出

第二步：

​ 实现API的封装

1. ​ 在src文件夹中新建一个api文件夹
2. ​ 在api文件中，新建**.js**文件，实现对每个模块的详细划分，方便管理
3. ​ 在每个**.js**中将封装好的index.js文件导入
4. ​ 实现对数据请求的路径，以及方式，参数的封装

请您掌眼…

​ 图一：

​ 图二：

​

进入文件中 …ing…

​ 进了文件，无疑也就是代码了！

import Serve from '@/util/index'
 export default {
    mobile(data) {
        return Serve({
            url: "product/getHotProduct",
            method: 'post',
            data: data
        })
    }
}

---

当然：还可以有第二种写法：

import Serve from '@/util/index'
 export default {
      mobile(data) {
        return Serve.post('/api/product/getHotProduct',data)
    },
}

至于三种、四种的小弟还望客官留言，上码，交流学习一二…

最后的最后

1. 在组件中将上面的api.js文件导入
2. 在数据出调用方法使用即可
3. 如果有参数的话，只需要在方法中写入即可，
4. 参数的话，在组件这边是一个实参，而在api.js哪里也就是个形参而已，所以各位同学可以不必纠结于这个，只是形参的参数名尽量的不要a、b、c、哈哈…

代码示好…

在组件中

导入api

import mobileApi from "@/api/HomeApi";

async created() {
    const { data: res } = await mobileApi.mobile({ categoryName: ["手机"] });
    this.Product = res;
    console.log(this.Product);
  },

这样就ok了…

最后的最后的最后
请各位同学保护好头顶..............