vue axios接口请求封装

最新推荐文章于 2023-07-23 21:01:05 发布
最新推荐文章于 2023-07-23 21:01:05 发布
阅读量2k 收藏 13
点赞数 2
分类专栏： vue学习 网络 文章标签： vue.js axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gegegegege12/article/details/122407170
版权

简易记录一下最近用到的比较顺手的、axios接口请求的封装

  1. 新建network文件夹，其内新建request.js
    在这里插入图片描述
    设置一个 baseURL ，便于为axios实例传递相对url
  2. 新建api文件夹，其内新建index.js、home.js
    index.js主要是为了便于导出可能有多个页面相关的请求
    home.js中主要封装有关home页的请求操作，这里名字随便取即可
    在这里插入图片描述
    在这里插入图片描述
  3. 在main.js中导入/api/index.js并将其挂载在vue的原型上
    在这里插入图片描述
    这样 $api 在所有Vue实例中都是可用的
  4. 使用
    在需要发送网络请求的组件中：
    在这里插入图片描述

1.14 补充一下关于登陆的需要验证token的封装
之前发布的是不需要验证token的，因为当时做的时候并没有登录功能

下面用到拦截器和导航守卫

为了避免有人通过直接输入url，来访问一些需要登录后才能访问的页面，我们需要设置导航守卫
在router/index.js中设置
在这里插入图片描述
这里对导航守卫不做过多阐述，不理解的也可以看下我这篇文章浅学一下
https://blog.csdn.net/gegegegege12/article/details/122496798?spm=1001.2014.3001.5501
或者自行了解
（注意：需要给login页的路由配置name: 'login'哦）

关于request.js的封装是接着上面的继续的：
在这里插入图片描述

AIpoem
关注
  • 2
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Vue iView二次封装axios（以实现登录功能为例）
qq_36649922的博客
06-01 1059
一般为了便于管理axios（Ajax）请求，我们都会对axios进行封装，这样即减少了代码的数量，又便于管理，不用出错了就修改很多代码。 1. 在src/api文件夹下创建
vue请求接口封装
nobody
01-25 628
最近做的electron-vue的一个项目和vue请求一样，封装了下请求接口函数。项目中使用到了element-ui 接口方法使用到了axios和qs（electron-vue中自带了axios和qs，qs解决后台接收不到参数的问题）。 在utils文件夹下新建request.js，代码如下： import axios from 'axios'; import { Message, Loading } from 'element-ui' import qs from 'qs'; //参数序列化，把数
Vue实现登录功能全套详解（含封装axios）
热门推荐
陈新科的博客
08-24 2万+
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面5、每次调后端接口，都要在请求头中加token。
axios请求的封装
12-15
axios请求的封装，在工程的src目录下面，新建一个文件夹lib，将该文件复制到lib文件夹下，并在main.js中设置为全局引用，例：在main.js中添加：import Extend from './lib/http'，Extend(Vue.prototype)，另外http.js中添加overall.$axios = axios，即可。
前端vue,如何使用axios实现接口的封装与调用
qq_43680785的博客
03-31 4100
1，安装axios：在项目的控制栏里使用命令 npm install axios 安装axios 2，在src文件下新建一个axios文件 3，在axios文件下创建baseURL.js文件用于管理接口域名、创建api.js用于配置每个接口 4，在baseURL.js文件里面配置我们的域名： import axios from 'axios' const service = axios.create({ baseURL: 'http://192.168.1.133:8080/api/',
Vue专题（六）axios封装及接口调用
XueZePeng18729875380的博客
03-15 466
在根目录的 src 文件夹下新建一个 api 文件夹，接着在 api 文件夹下新建 formDef.js 文件（注意：api文件夹下可以根据实际的接口情况创建多个js接口文件）在根目录的 src 文件夹下新建一个 utils文件夹，接着在 utils文件夹下新建 request.js 文件。安装qs（qs主要用于参数序列化，处理发送请求的参数）
Vue3引入axios封装接口
hql1024的博客
10-26 2万+
1.安装 npm install axios -S 2.新建 3.http.js import axios from "axios"; import qs from "qs"; import { Dialog } from "vant"; // axios.defaults.baseURL = 'http://hplqy.suoluomei.cn/index.php?s=/hfs/Api/' //正式 axios.defaults.baseURL = 'http://hplqytest.suol
vue axios请求封装
xiaocn325的博客
06-23 320
介绍就不多写了，直接上代码了！ import axios from 'axios' // create an axios instance const service = axios.create({ // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url withCredentials: true, // send cookies when cross-domain requests
vue axios封装 axios 请求
03-27
vue axios封装 axios 请求
vue中axios请求的封装实例代码
12-03
// GET请求封装 export function httpGet({ url, params = {} }) { return new Promise((resolve, reject) => { axios.get(url, { params }).then(resolve).catch(reject); }); } // POST请求封装 export ...
vue项目中axios请求网络接口封装的示例代码
10-17
在Vue项目中，使用axios进行网络接口的封装是提高代码复用性和可维护性的重要步骤。下面我们将详细探讨如何在Vue项目中实现axios的封装，以及封装get和post方法的具体步骤。 首先，我们需要创建一个新的JavaScript...
详解vue axios二次封装
10-18
Vue Axios 二次封装是...总的来说，Vue Axios 二次封装的核心目的是使请求更加规范、易于管理，减少代码冗余，并提供统一的错误处理机制。通过以上步骤，可以创建一个符合项目需求的自定义 Axios 实例，提升开发体验。
详解vue中axios请求的封装
10-17
在Vue.js应用中，使用axios进行HTTP请求是常见的实践，因为axios是一个强大的基于Promise的库，支持浏览器和Node.js环境。Vue官方推荐使用axios作为HTTP客户端。为了提高代码的可维护性和灵活性，开发者通常会对其...
Vue中Axios的封装和API接口的管理
H_Y_X_C的博客
06-07 4440
然后，在每次请求接口的时候，都会在请求的header中携带token，后台人员就可以根据你携带的token来判断你的登录是否过期，如果没有携带，则说明没有登录过。在http.js中介绍了，我们会在断网的时候，来更新vue中network的状态，那么这里我们根据network的状态来判断是否需要加载这个断网组件。例如上面的思想：如果后台返回的状态码是200，则正常返回数据，否则的根据错误的状态码类型进行一些我们需要的错误，其实这里主要就是进行了错误的统一处理和没登录或登录过期后调整登录页的一个操作。
【Vue】axios的二次封装和使用(附详细代码)
10-15 1452
之所以要二次封装axios，是有一些公用的事情，每次请求都要做；
Vue2中使用axios的三种方法
m0_59553217的博客
06-04 1万+
这是axios封装的三种方式，也是vue实战中最常用的三种方式
Vue登录注册与axios请求
nys666的博客
07-23 959
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中axios的github: https://github.com/axios/axiosAxios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求，可以用在浏览器和 node.js 中。React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。
Vue简单项目登录注册页面实现,axios请求方式以及跨越问题的解决
渡边彻的博客
07-22 2662
Vue项目登录注册，axios请求方式细节，以及跨域问题的解决
vue-cli中配置gzip压缩
AIpoem的博客
01-24 5744
1. 引入依赖compression-webpack-plugin 2. vue.config.js配置
vue axios请求接口封装
最新发布
10-07
Vue中使用axios发送请求时，可以将请求接口进行封装，以提高代码的可维护性和复用性。 首先，在Vue项目中安装Axios库： ``` npm install axios --save ``` 然后，在需要使用请求接口的地方引入axios： ``` import axios from 'axios' ``` 接下来，我们可以创建一个名为api.js的文件，用于封装请求接口。在api.js中，我们可以定义各种请求接口的方法，例如： ``` import axios from 'axios' const baseUrl = 'http://api.example.com' //接口请求基础URL export const getUserInfo = (userId) => { return axios.get(baseUrl + '/user/' + userId) } export const postUserInfo = (userInfo) => { return axios.post(baseUrl + '/user', userInfo) } export const deleteUserInfo = (userId) => { return axios.delete(baseUrl + '/user/' + userId) } ``` 在上述代码中，我们定义了三个请求接口方法，分别是获取用户信息、提交用户信息和删除用户信息。 接下来，在需要使用接口的组件中引入这些接口方法： ``` import { getUserInfo, postUserInfo, deleteUserInfo } from './api.js' ``` 然后，在组件中可以直接使用这些封装好的接口方法发送请求，例如： ``` getUserInfo(123).then(response => { //处理请求成功后返回的数据 }).catch(error => { //处理请求失败的错误 }) const userInfo = { //用户信息数据 } postUserInfo(userInfo).then(response => { //处理请求成功后返回的数据 }).catch(error => { //处理请求失败的错误 }) deleteUserInfo(123).then(response => { //处理请求成功后返回的数据 }).catch(error => { //处理请求失败的错误 }) ``` 上述代码演示了如何使用封装好的接口方法发送请求，其中.then()方法处理请求成功后返回的数据，.catch()方法处理请求失败的错误。 通过封装接口方法，我们可以将复杂的请求逻辑隐藏在api.js文件中，使组件更加清晰和简洁，提高了项目的可维护性。同时，由于接口方法已经封装好，可以在其他组件中重复使用，提高了代码的复用性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值