vue之axios的封装

soosgo

已于 2022-08-12 11:32:50 修改

阅读量5.3k

点赞数 1

分类专栏： vue3.0 文章标签： vue.js javascript 前端

于 2022-08-12 10:08:15 首次发布

本文链接：https://blog.csdn.net/Doulvme/article/details/126289387

版权

本文介绍了在Vue.js项目中为何需要封装axios，以及如何进行封装。通过封装axios，可以在项目环境变化时只需修改一处baseURL，简化接口地址的管理。同时，文章还展示了在Vue页面中如何引入和使用封装后的axios方法，以及配合element-plus组件库的使用步骤，并提到了初始化CSS样式和组件局部样式的处理方法。

摘要由CSDN通过智能技术生成

1.为什么需要封装axios？
当我们改变项目的使用环境时候，url也会随之改变，那么我们就需要改很多axios请求中的url配置
现在我们将axios封装，在项目使用环境改变时我们只用改变axios封装方法中的baseurl一项就行了，请求的接口地址不变。

2.Axios的封装方式

        1.执行安装axios命令: npm i axios
        2.对axios进行简单的封装
            1.在src文件夹下创建utils文件夹，在utils文件夹下创建request.js 并导出

import axios from "axios";//创建一个axios的对象
//生成一个axios的实例
const http=axios.create({
	baseURL:"http://www.xxx.top:8080/",// baseURL会在发送请求的时候拼接在url参数前面
	timeout:3000,//请求超时
});
export default http;//导出

2.在src文件夹下创建api文件夹，api文件夹下创建index.js

//导入request.js
import request from "@/utils/request";//@==>src
//可以按需导出
//获取商品列表  方法一  返回一个请求的方法
export const getProduct=(params)=>request.get("/product/",{params});
//获取商品详情
export const