在vue中使用axios进行接口请求，并且二次封装 axios

最新推荐文章于 2024-09-19 09:45:04 发布
最新推荐文章于 2024-09-19 09:45:04 发布
阅读量152 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42797435/article/details/130070817
版权
  1. 先安装axios，安装命令
    npm install axios
  2. 在src下新建utils文件夹
    在这里插入图片描述
  3. 新建request.js文件，并且进行配置
    在这里插入图片描述
    4.对创建好的http请求实例配置请求拦截器跟响应拦截器
    在这里插入图片描述
  4. 在src目录下创建api文件夹并且对请求接口进行配置

在这里插入图片描述
5. 在页面中引入api接口
在这里插入图片描述

qq_42797435
关注
vue3【使用axios并封装axios请求】
蜗牛~~
05-12 2774
由于 Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。1、我们可以通过window.location.protocol和window.location.host获取协议和主机ip端口，然后统一设置axios的默认请求baseURL。来绑定的，例如 Vue.prototype.$toast = Toast。proxy是getCurrentInstance()对象中的一个属性，然后通过对象的解构赋值方式拿到proxy。
vue中api全局封装--axios的二次封装
coinisi_li的博客
02-14 1974
来请求接口，随着项目越来越大，页面越来越多，功能越来越完善，我们势必会写大量的axios请求，每次都这么写，费时费力，也不方便统一管理，所以，需要将axios进行二次封装，以达到我们开发项目的时候省时、省力、省心。在实际开发项目中，网络请求基本上使用axios网络请求工具，但是单纯的使用像axios.get('http://xxxxx.com')这是封装之前的axios的使用办法，如果后续修改域名会很麻烦。
axios二次封装，结合后端请求接口
xiguaxixixi的博客
04-20 279
例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。提示：以下是本篇文章正文内容，下面案例可供参考。
Vue3使用Axios请求二次封装（包含跨域配置）
qq_45020145的博客
06-12 2274
axios在Vue3中的二次封装
Vue中axios请求二次封装
Web_chicken的博客
06-10 1848
特性mian.js引入并挂载到Vue实例中 2.1二次封装axios请求 在scr目录下新建utils文件夹，并在utils文件夹下新建request.js 2.2创建API请求 在src目录下新建api文件夹，并在此文件夹下新建index.js Vue页面使用
Vue——axios的二次封装
热门推荐
HuoZhiyan 的博客
09-25 1万+
基于Vue——实现对 axios 的二次封装（企业级开发项目必备技能）
vue3中封装axios请求
前端-尔嵘
03-16 4590
需要注意的是，在实际应用中，我们可能还需要根据业务需求进一步封装不同类型的请求，例如 GET 请求、POST 请求等，以及处理请求错误等情况。
vue2使用axios封装请求数据，教会你封装，简单易懂，轻松学会axios封装请求数据 看一眼就会 手把手教会
qq_53135313的博客
12-27 9744
手把手教会你，vue前端axios封装请求数据 教会你封装教会你请求数据 简单易懂，轻松学会axios封装请求数据 看一眼就会
vue项目封装axios-封装请求-封装公共的api和调用请求
JackieDYH的博客
01-25 6272
在做vue中大型项目的时候，官方推荐使用axios，但是原生的axios可能对项目的适配不友好，所以，在工程开始的来封装一下axios，保持全项目数据处理的统一性。此文主要讲在vue-cil项目中如何封装axios，封装请求，封装公共的api，页面如何调用请求。 如果你能看到这篇文章，鉴于有很多小白可能会参考我这篇文章来进行前期配置，特说明下正式配置路线： 拿到项目及后台接口，首先做的是配置全局代理及第二点； 全局封装axios及第三点request.js； 过滤axios请求方式，控制路径及参数
Vue配置axios 和 二次封装 axios 请求
weixin_51604181的博客
05-01 1307
vue配置 axios , axios 的二次封装 ，方便全局管理 api 请求，不要到具体的组件或者方法。
vue项目中axios请求网络接口封装的示例代码
10-17
在Vue项目中，使用axios进行网络接口的封装是提高代码复用性和可维护性的重要步骤。下面我们将详细探讨如何在Vue项目中实现axios的封装，以及封装get和post方法的具体步骤。 首先，我们需要创建一个新的JavaScript...
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
在开发Vue项目中，与后端进行数据交互是常见的需求，通常我们会使用axios库来发起HTTP请求。然而，有时候在用户登录后，我们希望在后续的请求中携带cookie以实现身份验证。本篇文章将详细解释如何在Vue项目中配置...
Vue项目中如何使用Axios封装http请求详解
10-16
通过上述步骤和代码示例，我们可以看到在Vue项目中使用Axios封装http请求的重要性。封装后的请求模块使代码更加整洁、易于管理，并且可以轻松地在项目中进行请求的拦截、参数设置和错误处理。希望这篇文章能帮助你更...
详解Vue中Axios封装API接口的思路及方法
10-14
在 Vue 中封装 Axios API 接口的主要目的是为了提高代码复用性和易维护性。以下是一个详细的封装过程： 1. **安装 Axios** 首先，需要在项目中安装 Axios。在命令行中执行 `npm install axios` 来添加 Axios 作为...
Vue 3:实现页面返回上一页的功能
weixin_73060959的博客
09-15 196
在Vue 3中，可以使用Vue Router库来实现页面返回上一页的功能。首先，确保你已经安装并设置了Vue Router。这两个方法都可以使浏览器的历史记录回退一步。来获取Vue Router实例。然后，我们定义了一个。函数会被触发，从而使浏览器返回到上一个访问的页面。在这个例子中，我们使用。
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 546
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
Vue + element-ui实现动态表单项以及动态校验规则
最新发布
qq_44242707的博客
09-19 347
项目需要实现一个功能，表单中某个表单项产品id支持动态新增多个产品id表单项，每个产品id表单项都需要有校验规则，校验失败时各自有对应的校验提示。
element-plus组件问题汇总
xiaoxian_xian的博客
09-12 512
element-plus组件问题汇总
Vue Router push方法的使用
ithongchou的博客
09-13 870
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
vue2封装axios接口请求二次封装
05-19
Vue2封装Axios接口请求的二次封装可以让我们在项目中更加方便地使用Axios进行数据请求，同时也可以提高代码的可维护性和复用性。下面是一个简单的Vue2封装Axios接口请求的示例： 1. 安装Axios 在项目中安装Axios，可以使用npm或者yarn进行安装： ```bash npm install axios --save ``` 或者 ```bash yarn add axios ``` 2. 封装Axios 在src目录下新建一个api文件夹，用于存放Axios的封装代码。在api目录下新建一个request.js文件，用于封装Axios的请求方法。 ```javascript import axios from 'axios' // 创建实例 const service = axios.create({ baseURL: process.env.BASE_URL, // 接口的基础路径 timeout: 5000 // 请求超时时间 }) // 请求拦截器 service.interceptors.request.use( config => { // 在请求发送之前做一些处理，比如添加token等 return config }, error => { // 请求错误时做些事 return Promise.reject(error) } ) // 响应拦截器 service.interceptors.response.use( response => { // 对响应数据做一些处理，比如说判断返回的状态码是否正确等 return response.data }, error => { // 响应错误时做些事 return Promise.reject(error) } ) export default service ``` 在上面的代码中，我们使用了Axios的interceptors来拦截请求和响应，并做一些处理。比如说，在请求拦截器中，我们可以在发送请求之前添加token等信息；在响应拦截器中，我们可以对返回的数据进行处理，判断响应状态码是否正确等。 3. 封装API请求 在api目录下新建一个index.js文件，用于封装API请求的方法。我们可以根据实际的业务需求，封装不同的请求方法。 ```javascript import request from './request' export function getUsers () { return request({ url: '/users', method: 'get' }) } export function getUserById (id) { return request({ url: `/users/${id}`, method: 'get' }) } export function createUser (data) { return request({ url: '/users', method: 'post', data }) } // 其他API请求方法... ``` 在上面的代码中，我们使用了封装的request方法来发送请求，同时根据业务需求，定义了不同的请求方法，比如获取用户列表、根据ID获取用户信息、创建用户等。 4. 使用API请求 在Vue组件中使用API请求非常简单，只需要在组件中引入封装的API请求，然后调用对应的方法即可。 ```javascript import { getUsers } from '@/api' export default { mounted () { this.getUsers() }, methods: { async getUsers () { const { data } = await getUsers() console.log(data) } } } ``` 在上面的代码中，我们在组件中引入了封装的getUsers方法，并在mounted钩子函数中调用该方法来获取用户列表，并将返回的数据打印到控制台上。 这样，我们就完成了Vue2封装Axios接口请求的二次封装。通过对Axios进行二次封装，我们可以更加方便地使用Axios进行数据请求，并且也可以提高代码的可维护性和复用性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值