Axios发送请求

news2025/1/22 13:04:30

---  axios是什么:

Axios,是一个基于promise的网络请求库,作用于node.js和浏览器中。

一、axios的特点:

1.在浏览器中发送XMLHttpRequest请求。

2.在node.js中可以发送请求

3.支持PromiseAPI

4.拦截请求和响应数据


二、axios的请求方式:


三、使用axios

1.安装axios: npm install axios

2.在main.js中导入axios

import axios from 'axios'  //安装完之后,导入axios

3.设置全局配置 请求默认根路径

// 配置请求根路径
axios.defaults.baseURL = 'https://web.eylives.cn/api.svc'

4.挂载到vue实例中设置为全局属性,后面可通过 this.$http 调用发送请求

// 挂在到Vue实例,后面可通过this.$http调用
Vue.prototype.$http = axios

在页面中直接使用 this.$http.post(),即可调用接口并发送请求 

//在发送请求调用接口时,就可以直接写接口名
getNoticeList() {
            console.log(localStorage.getItem('userId'), localStorage.getItem('token'));
            let sendInfo = {
                id: localStorage.getItem('userId'),
                token: localStorage.getItem('token')
            }
            sendInfo = JSON.stringify(sendInfo)
            this.$http.post('getpropertynoticelist_wechat', sendInfo).then((res) => {
                console.log('链接成功', res);
                let resInfo = JSON.parse(res.data)
                console.log('后端获取数据', resInfo);
                let resDataList = resInfo.data
                console.log('返回数据列表', resDataList);
                this.noticeList = resDataList
                //简写一步到位
                // this.noticeList = JSON.parse(res.data).data
            }).catch((err) => {
                console.log('链接失败', err);
            })
        },

 四、axios发送并发请求(发送两个请求)

 

五、axios常见配置项:

 注意:

get请求传递参数params:{}

如果是get请求,请求体是空的。

如果是post请求,请求体不可为空.

所以在post请求时,请求体对应的是 data:{}

 

 

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408440.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

thinkphp5.0.24反序列化漏洞分析

thinkphp5.0.24反序列化漏洞分析 文章目录thinkphp5.0.24反序列化漏洞分析具体分析反序列化起点toArraygetRelationData分析$modelRelation生成进入__call前的两个if__call虚假的写文件setTagItem绕过exitexppop链图解决windows下的文件名问题参考链接thinkphp5框架&#xff1a…

webstorm使用指南

前言 前端开发比较推荐的两款编辑器JetBrains的WebStorm和微软的VsCode,本人之前开发一直用的VsCode,日常开发其实基本上就满足了,但有几个地方对于我来说一直都是痛点,体验感非常不好。 首先是Git分支管理和提交,虽然…

漂亮的弹出框,javascript库bootbox介绍

传统的javascript的警告框、确认框、提示框&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>弹出框</title> </head> <body> <button onclick"f1()">…

Javaweb实验:静态网页制作

Javaweb实验&#xff1a; 1.静态网页制作 目录 Javaweb实验&#xff1a; 前言 一、实验目的 二、实验原理 三、实验内容 四、实验步骤 五、实验结果 六、实验内容 七、实验步骤 八、实验结果 九、思考 1、frameset和frame标签的作用是什么&#xff1f; 2、个人主…

不用AI也能实现的文字自动播报

背景如果注意观察的话&#xff0c;在现实生活中&#xff0c;你一定会遇到下列几个场景&#xff0c;一起来看看有没有熟悉的感觉。场景一、某周某&#xff0c;小明和朋友一起去某美食街进行聚餐&#xff0c;到了美食街找到一家推荐度非常高的美食店。由于推荐度非常高&#xff0…

【JavaScript 进阶教程】对象新增方法 defineProperty 与 keys 的说明与使用

文章导读&#xff1a; 这篇文章给大家讲解在 ES5 中对象新增的两个常用方法&#xff1a;defineProperty()&#xff0c;keys()&#xff0c; 这两个方法可以让我们更方便的操作对象&#xff0c;获取对象属性&#xff0c;赋值修改等等操作&#xff0c;最重要的是&#xff0c;这些方…

JS的同步与异步

js的同步与异步 ​ 众所周知&#xff0c;js是一个单线程的语言&#xff0c;学过java、c之类的都知道&#xff0c;其他语言有个叫类继承的东西&#xff0c;就相当于开辟另个一个流水线&#xff0c;是多线程 ​ 而javascript就像一条流水线&#xff0c;它无法开辟别的流水线&am…

猿创征文|【React 三】组件实例的三大属性(state、props、refs)

目录 一、 State 1.概念 2.State的简单用法3. JS绑定事件 4.react 绑定事件 5.react this指向问题 6.修改state值 7.代码简写 二、props 1.概念 2.传参的基础方法、运算符传参 三、refs 定义 字符串形式的ref、回调函数下ref、createRef 创建ref容器 一、 State 1…

【微信小程序】-- 分包(四十四)

&#x1f48c; 所属专栏&#xff1a;【微信小程序开发教程】 &#x1f600; 作  者&#xff1a;我是夜阑的狗&#x1f436; &#x1f680; 个人简介&#xff1a;一个正在努力学技术的CV工程师&#xff0c;专注基础和实战分享 &#xff0c;欢迎咨询&#xff01; &…

Vue3 + PDF.js 实现 PDF 预览

文章目录1 前言2 PDF 预览测试2.1 下载 PDF.js2.2 window.open 直接打开2.3 弹框形式打开3 修改配置项3.1 修改主题色为暗色系3.2 修改默认语言为简体中文3.3 打开 PDF 后默认跳转到某一页4 移除部分按钮4.1 简单按钮移除4.2 复杂按钮移除5 错误处理5.1 跨域报错5.2 默认语言为…

架构图以及vue的简介

架构图 前后端分离总架构图 ​ 前端架构设计图 ​ MVVM 架构模式 MVVM 的简介 MVVM 由 Model,View,ViewModel 三部分构成&#xff0c;Model 层代表数据模型&#xff0c;也可以在Model中定义数据修改和操作的业务逻辑&#xff1b;View 代表UI 组件&#xff0c;它负责将数据模…

养老院管理系统(Java+Web+MySQL)

目 录 摘 要 1 Abstract 2 第一章 绪论 6 一、 选题的依据及意义 6 二、 国内外现状研究 6 三、 研究目的 7 四、 本文研究的主要内容 7 五、 本文章节安排 7 六、 本章小结 8 第二章 设计技术与开发环境 9 一、 相关技术介绍 9 &#xff08;一&#xff09; JSP简介 9 &#xf…

在vue中使用echarts

欢迎大家加入我的社区&#xff1a;http://t.csdn.cn/Q52km 社区中不定时发红包 文章目录1、安装2、在vue中引入&#xff08;全局引入&#xff09;3、在vue中的使用4、模板代码放在哪个位置5、完整的一个vue页面实例&#xff1a;6、实现效果7、可能遇到的问题&#xff0c;下载不…

vue3 解决各场景 loading过度 ,避免白屏尴尬!

Ⅰ、前言 当我们每次打卡页面&#xff0c;切换路由&#xff0c;甚至于异步组件&#xff0c;都会有一个等待的时间 &#xff1b;为了不白屏&#xff0c;提高用户体验&#xff0c;添加一个 loading 过度动画是 非常 常见的 &#xff1b;那么这几种场景我们应该把 loading 加在哪…

Vue3 - $attrs 的几种用法(1个或多个根元素、Options API 和 Composition API)

theme: smartblue 持续创作&#xff0c;加速成长&#xff01;这是我参与「掘金日新计划 6 月更文挑战」的第6天&#xff0c;点击查看活动详情 本文简介 点赞 关注 收藏 学会了 使用 Vue 开发时&#xff0c;肯定会接触到 组件 的概念&#xff0c;无可避免的也会接触到 组件通…

Vue:Vue事件整理

文章目录前言一、Vue基本事件this对象传递参数总结二、事件修饰符三、键盘事件keyup/keydown四、ElementUi前言 本篇复习Vue中的事件处理&#xff0c;包含事件基本响应、事件修饰符、键盘事件等内容 一、Vue基本事件 Vue中&#xff0c;设置点击、鼠标滚动和键盘输入等相应事…

vue3【列表渲染】v-for 详细介绍(vue中的“循环”)

vue 常用语法——列表渲染 v-for文章简介v-for 主要内容&#x1f53a;item in itemsv-for 变量的作用域v-for 与对象在 v-for 里使用范围值&#x1f53a;<template> 上的 v-forv-for 与 v-if&#x1f53a;通过 key 管理状态&#x1f53a;组件上使用 v-forsummary下期预告…

前端设置页面字体尺寸跟随屏幕大小而进行变化

越来越多的前端项目现在需要这个操作&#xff0c;其操作的原因很简单&#xff0c;你的项目可能跑在小尺寸分辨率的电脑上&#xff0c;也有可能在大尺寸的会议平板上&#xff0c;更有甚者是在LED上。那么如何让你的项目根据屏幕分辨率的大小而自动变化&#xff0c;修改页面展示字…

运行调试前端项目之ts

本文分四个部分&#xff1a; 直接node或ts-node运行ts通过package.json文件运行tsts翻译为js后运行js在ide中运行和调试ts — vscode中&#xff0c;配置launch.json文件&#xff0c;来调试ts&#xff0c;与js调试一致 — idea、webstorm中&#xff0c;安装“run configuration…

vue3 超好用的富文本编辑器

Ⅰ. 前言 quillEditor 毫无疑问一款非常强大的 富文本编辑器 在 vue 中一个也非常好用 &#xff0c;而且也十分轻量的&#xff1b; 然而如今的vue3 我们该如何使用它呢 &#xff1a; Ⅱ.vue3 中 安装 quillEditor ① 下载 npm install vueup/vue-quillalpha --save② 在ma…