vue 基于axios封装request接口请求——request.js文件

已于 2022-02-16 09:52:12 修改
阅读量2.2w 收藏 73
点赞数 13
分类专栏： JavaScript vue 文章标签： javascript 前端 axios vue.js
于 2022-02-15 14:40:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q1ngqingsky/article/details/122845653
版权

目录

了解几个Content-type类型

第一种：application/json;charset=UTF-8

第二种：multipart/form-data

第三种： application/x-www-form-urlencoded

第一步新建request.js文件

第二步新建services/apiUrl文件

第三步新建services/index.js文件

最后如何使用封装好的request请求

了解几个Content-type类型

Content-type类型：代表发送端（客户端|服务器）发送的实体数据的数据类型

格式：Content-Type：type/subtype ;parameter

* 要根据服务端定而定，否则一般情况无需做设置改动

/**

* get请求不存在设置Content-Type

* 只有post和put用到Content-Type

* content-type会根据参数的类型会自动有对应的值，一般无需设置

*/

第一种：application/json;charset=UTF-8

默认行参 axios.post(url,{a:1,b:2})

若不标注Content-type类型，则content-type默认是application/json;charset=UTF-8类型

第二种：multipart/form-data

多用于图片上传

let formData = new FormData() ;

formData.append('a',1); 

formData.append('b',2)

第三种： application/x-www-form-urlencoded

 let data = {a:1,b:2}; axios.post(url,qs.stringify({ data })) 

例如服务端需要的类型为第三种，此时只需要统一设置请求前将参数变成字符串即可

// `transformRequest` 允许在向服务器发送前，
最低0.47元/天 解锁文章
woowen！
关注
  • 13
    点赞
  • 踩
  • 73
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
(springboot-vue) 前后端交互实现
qq_55054495的博客
08-23 3217
一个例子 在vue写的前端创建用户 发送请求 后端springboot实现新用户的创建
详解vue中axios请求的封装
10-17
主要介绍了vue中axios请求的封装，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue使用request.js封装axios
crushlj的博客
11-14 419
在vue项目中创建util 工具包，并在util中创建request.js文件。添加request.js后，新建api文件夹，新建api.js。//兼容服务端返回的字符串数据。//比如统一加token，对请求参数做处理。//可以自请求发送前对请求做一些处理。//如果返回的是文件。//可以在接口响应后统一处理结果。//response 拦截器。//request 拦截器。
Vue封装request请求
最新发布
ytwoyyyyy的博客
05-28 408
封装好request之后，后面项目中便可以直接使用request. 来进行请求了。首先在vue中安装anxios。utils文件夹 其中新建。在src目录下新建一个。
vue中 request.js
wwll177的博客
01-22 643
/ 可在组件内获取到服务器返回信息。errMsg = `错误${Number(err.status)}-未知错误`errMsg = msg || '接口未知错误，请联系管理员'errMsg = '错误504-响应超时，请稍后重试'errMsg = '错误500-服务器内部错误'errMsg = '错误503-系统服务升级中'errMsg = '错误404-接口路径错误'errMsg = '错误401-接口无权限'errMsg = '错误502-网关错误'//判断报错的code 优先判断数据code。
request.js
caoyuan258的博客
12-15 3969
// 1.引入axios // 2.axios.create方法创建实例 // 3.使用实例对象创建请求拦截器 // 4.使用实例创建响应拦截器 // 5.export抛出实例对象 // 6.main.js中引入request文件对象 import axios from 'axios' import store from '@/store/index' const Server =axios.create({ baseURL:'', timeout:3000 }) //使用Server创建请
使用requirejs编写模块化代码
编程技术靠北
10-22 1972
写在前面最早接触javascript的时候，javascript代码直接扔在script标签里面就完事了。反正代码不多，交互简单，逻辑不难，和HTML混在一起也未尝不可。后来交互越来越复杂，代码越多越多了，我们就开始把JS代码独立到了单独的JS文件中。公共的库引用在前，自己的逻辑代码引用在后，全局变量定义在HTML内部，在独立JS文件中直接使用变量就好。我们会经常看到下面这种代码：　　<script
Request.js的使用
t111_的博客
02-08 400
安装axios：npm i axios -S request.js的封装 import axios from 'axios' const request = axios.create({ baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！ timeout
vue项目中request.js文件基础配置
weixin_57246557的博客
09-01 2928
【代码】vue项目中request.js文件基础配置。
详解Vue中Axios封装API接口的思路及方法
10-14
在 Vue 中封装 Axios API 接口的主要目的是为了提高代码复用性和易维护性。以下是一个详细的封装过程： 1. **安装 Axios** 首先，需要在项目中安装 Axios。在命令行中执行 `npm install axios` 来添加 Axios 作为...
基于小程序请求接口wx.request封装的类axios请求
10-15
`wx.request` 是微信小程序提供的原生网络请求接口，而 `axios` 是一个广泛使用的基于Promise的HTTP库，它在Web开发中非常流行，尤其在Vue.js等前端框架中应用广泛。为了将 `axios` 的便利性引入到小程序中，我们...
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
在Vue项目中，我们通常会在`main.js`文件中全局引入并配置axios。以下是一种常见的配置方法： ```javascript import axios from 'axios'; // 设置axios配置，开启withCredentials选项，允许携带cookie axios....
解决vue axios的封装 请求状态的错误提示问题
10-17
在Vue.js开发过程中，我们经常使用axios库来处理HTTP请求。然而，在实际应用中，可能会遇到各种错误情况，如网络错误、服务器错误状态码等。本文将详细讲解如何解决Vue与axios结合时，关于请求状态的错误提示问题。 ...
vue中Axios的封装与API接口的管理详解
10-18
Vue.js中的Axios封装与API接口管理是提升项目效率和代码规范的重要环节。Axios是一个基于Promise的HTTP库，它可以用于浏览器和Node.js环境中，具备拦截请求和响应、取消请求、转换JSON等功能，使得与服务器的数据...
VueRequest——管理请求状态库
qq_34082921的博客
11-11 2378
VueRequest——开发文档VueReques——GitHub地址在以往的业务项目中，我们经常会被 loading 状态的管理、请求的节流防抖、接口数据的缓存、分页等重复的功能实现所困扰。每次开启一个新项目都需要重新实现一遍，这是一项重复的工作，还需要确保团队的一致性。VueRequest 的目的是为开发人员提供一种方便、快速的方式来管理 API 状态。通过简单的配置，可以省去那些繁琐的任务，专注于业务核心的开发。提示：以下是本篇文章正文内容，下面案例可供参考。
为vue3 封装一个基于axios的request
06-01
好的，以下是一个基于 Axios 封装的 request 工具，可以在 Vue3 项目中使用： ```javascript import axios from 'axios'; const request = axios.create({ baseURL: process.env.VUE_APP_API_BASE_URL, timeout: 10000, }); request.interceptors.request.use( config => { // 在请求头中添加 token 等信息 const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => { return Promise.reject(error); } ); request.interceptors.response.use( response => { return response.data; }, error => { const response = error.response; if (response && response.data) { // 处理错误信息 console.log(response.data); } return Promise.reject(error); } ); export default request; ``` 在此封装中，我们使用 `axios.create()` 方法创建了一个实例，可以设置一些默认配置。在请求拦截器中，我们可以在请求头中添加 token 等信息。在响应拦截器中，我们可以处理错误信息，并返回响应内容中的 `data` 字段。 在使用时，可以直接调用 `request` 实例的方法，例如： ```javascript import request from '@/utils/request'; request.get('/users').then(data => { console.log(data); }).catch(error => { console.log(error); }); ``` 这样，就可以方便地发送请求并处理响应了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值