【vue】axios和vue-axios请求模块

已于 2022-08-20 21:11:47 修改
阅读量1.6k 收藏 8
点赞数
分类专栏： Web前端 Vue 文章标签： 前端 javascript 开发语言
于 2022-08-19 16:28:24 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51481135/article/details/126426972
版权

目录

一、axios模块

二、 axios使用方法

1.创建服务器端Express项目

2.创建服客户端Vite项目

3.在vite客户端安装axios

 三、axios的六种请求

1.无参的get请求

2.带参的get请求

3. post请求

4.put请求

5.patch请求

6.delete请求

四、 axios的数据封装格式

五、vue-axios模块

1.安装

2.在main.js文件中进行全局的配置

一、axios模块

axios是一个基于promise的http客户端请求工具，可以用在浏览器和node.js中。

可以提供以下服务:

  1. 从浏览器中创建XMLHttpRequest2：异步请求对象
  2. 从node.js 创建http请求
  3. 支持PromiseAPl：请求的返回值是Promise对象(resolve、reject)
  4. 拦截请求和响应
  5. 转换请求数据和响应数据
  6. 取消请求
  7. 自动转换JSON数据
  8. 客户端支持防御XSRF

二、 axios使用方法

1.创建服务器端Express项目

（1）在webstorm创建express项目

（2）点击右上角运行按钮后，项目运行在3000端口号上

（3）在webtorm中安装跨域模块

        npm install cors

在express服务器端进行此模块的安装，因为在前后端交互时，浏览器出于安全考虑，会将js代码跨域模块的访问进行拦截，所以为了进行跨域访问，需要安装这个cors模块。

（4）在app.js中导入跨域模块进行使用

（5）在uers.js路由文件中创建测试路由

（6）重新运行后，在接口测试软件中测试结果

2.创建服客户端Vite项目

（1）在webstorm创建vite项目

 （2）点击右下角Run 'npm install'，安装依赖

 （3）如下图所示进行运行配置

 

（4）点击右上角运行按钮，运行项目

注意：如果出现服务器端于客户端端口相同的情况，会默认打开服务器端，此时需要将服务器端中“bin文件→www”中的端口改成与客户端不同的端口。

3.在vite客户端安装axios

（1）安装axios

        npm install axios

 （2）新建模块

 三、axios的六种请求

1.无参的get请求

最低0.47元/天 解锁文章
早睡早起长头发
关注
  • 0
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios - 简 单 的 请 求 模 板
pig_ning的博客
05-24 140
axios - 简 单 的 请 求 模 板
axios和vue-axios区别及vue-axios使用
千里之行，始于足下！
10-21 9758
一、axios和vue-axios区别 1、axios是基于promise的HTTP库，可以使用在浏览器和node.js中，它不是vue的第三方插件 2、使用的时候不能像vue的插件（如：Vue-Router、VueX等）通过Vue.use()安装插件，需要在原型上进行绑定：Vue.prototype.$axios = axios; 3、vue-axios是axios集成到Vue.js的小包装器，...
Vue axios和vue-axios的关系及使用区别
Tongyao
08-01 3213
在使用axios或vue-axios时我们基本都会需要配置axios的拦截器，对axios的请求、响应进行二次封装，会多一道工作。在vue项目当中，可以使用。使用Vue的插件写法，更符合Vue整体生态环境。而直接写原型链，感觉有些粗暴了，除非是很底层的实现，否则不太推荐这样写了。因此，我们更推荐使用。使用的时候不能像vue的插件（如Vue-Router、VueX等）通过。是基于promise的HTTP库，可以使用在浏览器和。插件的方式，不太推荐是直接使用。中，它不是vue的第三方插件。...........
vue axios 请求头的Content-Type没有生效
maggie的博客
08-17 1880
post请求500但是postMan、apiPost测试都没有问题，发现多了一个 content-type多了application/x-www-form-urlencoded， axios请求头设置了content-type，但是post请求没有生效，请求时content-type自动改为application/x-www-form-urlencoded，我看了一遍又一遍的代码，写法是没有问题的，因为qs也是用了的。解决方法：降低了axios版本，就好啦。
vue axios请求设置content-type无效
小白白的博客
06-21 2188
vue-admin-template开发中在request请求中设置了Content-type，但是在在浏览器中查看请求主体并没有Content-type service.interceptors.request.use( config => { if (store.getters.token) { config.headers['X-Token'] = getToken(); } config.headers["Content-type"] = "applic
Vue使用axios，设置axios请求格式为form-data
zhang2383906154的博客
09-01 973
https://www.jianshu.com/p/b10454ed38ba
vue的vue-resource和axios介绍
橙-极纪元-cplvfx-JJY.Cheng
01-22 1302
vue的vue-resource和axios介绍
Vue3 中使用 “vue-axios“
白瑕 的博客
09-09 6292
这是一个基于Vue并进行了轻度封装的axios包,里面整合了vue环境下会用到的一些axios相关. 我先声明一下我以前的一个误解:这东西不能替代axios,它的使用是需要基于axios的,所以安装的时候要安装axios. v
axios 发送 x-www-form-urlencoded 请求
qq_33286757的博客
03-23 4985
charset=utf-8' 的post请求让我搞了好久，记录一下。前言：作为一个后端开发的人来讲，使用vue也会写一些简单的按钮和请求，但遇到了一次。
VUE项目axios请求头更改Content-Type操作
10-15
主要介绍了VUE项目axios请求头更改Content-Type操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 设置axios请求格式为form-data的操作步骤
12-13
Cover 在Vue中使用axios 这个老生常谈了，还是先记录一遍，方面后面自己查。 !!! 设置form-data请求格式...axios封装了get方法，传入请求地址和请求参数，就可以了，同样支持Promise。 //不带参数的get请求 let url
vue axios请求超时的正确处理方法
08-27
在本文中，我们介绍了 Vue Axios 请求超时的正确处理方法，包括使用 Axios.setDefaultTimeout() 方法、Axios.interceptors 和 retry 机制。这些方法可以帮助我们正确地处理 Axios 请求超时问题，提高程序的可靠性和...
vue-axios + vue3-axios Axiso解决跨域访问完整源码
02-16
import VueAxios from 'vue-axios' import axios from 'axios' Vue.use(VueAxios, axios) ``` 3. 对于 Vue3 项目，安装 vue3-axios： ``` npm install @vue/axios ``` 在 main.js 或者 setup 函数中导入...
网站基本布局CSS
m0_46608027的博客
07-24 791
* 滚动条轨道样式 *//* 滚动条样式 *//* 滑块样式 */
ASP.NET Web Api 使用 EF 6，DateTime 字段如何取数据库服务器当前时间
最新发布
yangshuquan的专栏
07-24 785
在做数据库设计时，为了方便进行数据追踪，通常会有几个字段是每个表都有的，比如创建时间、创建人、更新时间、更新人等，这些时间字段一般存储的是数据库服务器的时间，EF 是操作整个数据表对象，所以需要寻找方法来实现这个目的。本文分享 DB First 和 Code First 两种模式的 EF 中 DateTime 字段如何存储数据库服务器当前时间的方法。
TS如何处理js模块的类型？
闻人放歌的三寸青草园圃
07-24 255
【代码】TS如何处理js模块的类型？
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 342
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 338
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
想用自己封装的axios替换 vue-upload-component的上传请求
06-11
好的，我理解你的问题了。如果你想用自己封装的axios替换vue-upload-component的上传请求，你需要在Vue组件中使用axios发送请求，然后在axios的请求拦截器中将上传文件的请求转换为FormData格式，然后再发送请求。下面是一个示例代码： ``` javascript import axios from 'axios' import Vue from 'vue' import Upload from 'vue-upload-component' // 创建一个axios实例 const http = axios.create({ baseURL: 'http://your.api.com', timeout: 10000 }) // axios请求拦截器 http.interceptors.request.use(config => { // 判断是否为上传文件的请求 if (config.url === '/upload') { // 将请求转换为FormData格式 const formData = new FormData() for (const key in config.data) { formData.append(key, config.data[key]) } config.data = formData } return config }) Vue.component('upload', Upload) new Vue({ el: '#app', template: `<upload :http-client="httpClient" :url="'/upload'"></upload>`, data() { return { httpClient: http } } }) ``` 在上面的示例中，我们创建了一个名为http的axios实例，并在请求拦截器中判断是否为上传文件的请求，如果是，则将请求转换为FormData格式。然后，在Vue组件中使用了vue-upload-component，并将httpClient属性设置为我们创建的axios实例http，url属性设置为上传文件的接口地址。这样，我们就成功用自己封装的axios替换了vue-upload-component的上传请求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值