如何在vue中使用axios

简介: 记录如何在vue中使用axios

0 写在前面

Axios 是一个基于 promise 的 HTTP 库
他可以:
1、可以在浏览器中发送 XMLHttpRequests
2、可以在 node.js 发送 http 请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求数据和响应数据
6、能够取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 XSRF 攻击

1 安装

使用npm命令安装,在建好的vue工程里使用命令npm install axios
在这里插入图片描述
在main.js中引用


import axios from "axios";
Vue.prototype.$axios = axios

new Vue({

    axios,

    render: function (h) {
        return h(App)
    }
}).$mount('#app')

在这里插入图片描述

2 使用

此时在项目中可以使用了。
举例:发送post请求

  methods: {    
      方法名() {
      this.$axios.post('地址', {
        参数:参数数值
      }).then(parim => {
        回调
      })

    },
}

此时可以正常发起请求了。

相关文章
|
4天前
|
JavaScript API
Vue中如何完成对axios的二次封装、统一接口管理
这篇文章介绍了在Vue项目中如何对axios进行二次封装,实现接口的统一管理和简化请求过程,包括创建api包、编写request.js、在main.js中引入封装好的axios以及在项目中发送请求的方法。
Vue中如何完成对axios的二次封装、统一接口管理
|
17天前
|
JavaScript 前端开发
vue引入axios出现Module parse failed: Unexpected token (5:2)
vue引入axios出现Module parse failed: Unexpected token (5:2) 页面显示 Cannot GET /
|
1月前
|
前端开发 JavaScript 数据库
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
vue 使用 async 和 await 实现异步 axios 同步化(实战案例:数据异步校验通过后,再执行保存)
40 1
|
1月前
|
JSON JavaScript 前端开发
Vue中的axios深度探索:从基础安装到高级功能应用的全面指南
在Vue项目中,高效的前后端通信是构建丰富用户体验的关键。axios作为前端与后端沟通的桥梁,其重要性不言而喻。本文将带您领略axios的魅力,从基本概念、安装方法,到高级应用技巧,助您快速掌握在Vue中利用axios进行HTTP请求的精髓。我们不仅会探讨axios的基础用法,如GET、POST请求,还将深入探索跨域配置、全局注册以及设置拦截器等高级功能,助您轻松实现优雅的前后端通信。
|
2月前
|
JavaScript
vue对axios封装
vue对axios封装
34 2
|
2月前
|
存储 JSON 自然语言处理
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
SSMP整合案例交互之在idea中利用vue和axios发送异步请求进行前后端调用
23 2
|
1月前
|
JavaScript API
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
vue 异步网络请求 axios 【实用教程】(含访问本地接口)
43 0
|
2月前
|
JavaScript 前端开发 Java
vue使用axios与springboot通讯
vue使用axios与springboot通讯
34 0
|
3月前
|
前端开发 JavaScript
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
1天搞定SpringBoot+Vue全栈开发 (7)Axios网络请求
|
3月前
|
JSON JavaScript 前端开发
< 每日份知识快餐:axios是什么?如何在Vue中 封装 axios ? >
本文介绍了前端开发中常用的HTTP客户端库Axios,它基于Promise,支持浏览器和Node.js,特点是功能强大、支持Promise API和并发请求,并能拦截请求和响应。文章强调了理解Axios的内部原理和优化使用的重要性,不仅讲解了基本的安装、导入和使用方法,还阐述了为何选择Axios,包括其丰富的配置选项和良好的浏览器支持。此外,文章探讨了封装Axios的必要性,以减少重复代码和提高代码维护性,并给出了设置接口请求前缀、请求头、超时时间以及封装请求方法和拦截器的示例。通过封装,开发者可以更高效地管理和使用Axios,适应不同项目需求。