Vue中axios的基础使用方式

最新推荐文章于 2024-09-13 14:34:15 发布
最新推荐文章于 2024-09-13 14:34:15 发布
阅读量362 收藏 3
点赞数 5
文章标签： vue.js vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_74641039/article/details/138465465
版权

简单的为大家介绍一下如何在vue中使用axios
废话不多说直接上代码：

基础使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="root">
        <button @click="search">点击发送GET请求</button>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
<script src="../JS/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#root",
        methods: {
            search() {
                // 第一种方式
                // axios({
                // 请求方式
                //     method: "GET",
                // 请求的url
                //     url: "http://localhost:3000/posts"
                // }).then(res => {
                //     console.log(res);
                // })

                // 第二种方式 常用
                // 比较方便 第一个直接写url
                axios.get("http://localhost:3000/posts").then(res => {
                    console.log(res);
                })
            }
        },
    })
</script>
</html>
渲染页面

修改页面的数组让他重新解析就能达到渲染页面的目的了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div id="root">
        <button @click="search">点击发送GET请求</button>
        <ul>
            <li v-for="item in list" :key="item.id">
                {{item.id}}--{{item.title}}--{{item.author}}
            </li>
        </ul>
    </div>
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.5.0/axios.js"></script>
<script src="../JS/vue.js"></script>
<script>
    const vm = new Vue({
        el: "#root",
        data: {
            list: []
        },
        methods: {
            search() {
                // 第一种方式
                // axios({
                // 请求方式
                //     method: "GET",
                // 请求的url
                //     url: "http://localhost:3000/posts"
                // }).then(res => {
                //     console.log(res);
                // })

                // 第二种方式 常用
                // 比较方便 第一个直接写url
                axios.get("http://localhost:3000/posts").then(res => {
                    // console.log(res);
                    this.list = res.data
                })
            }
        },
    })
</script>
</html>

注：

如果碰到跨域问题怎么办
第一种：使用cors解决
第二种：在vueconfig里面配置proxy
上代码：

devServer: {
    proxy: {
      '/posts': {
        target: 'http://localhost:3000'
      }
    }
  },
喜欢九月
关注
vue中axios的使用
lightoneone的博客
12-03 1万+
vue中axios的使用
Vue中axios的使用
kangkang212916的博客
06-08 1495
3, 在任意组件中使用axios(添加$用于和组件内字段区分)2, 在组件的script标签中导入axios。2, 在main.js中导入并设置Vue原型。1, 在vue项目中下载安装axios模块。1, 在vue项目中下载安装axios模块。3, 在当前组件的函数发起ajax请求。局部使用(在某一个组件中用)全局使用(在任意组件中用)
Vue中axios的基本使用
热门推荐
Asafoetida的博客
12-29 4万+
首先简单了解什么是Axios？ Axios是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本，符合最新的ES规范。 关于axios的特点，可以查看axios中文文档，还可以了解一下axios, ajax和fetch的详细比较内容。 接下来开始安装axios，在项目目录下执行npm i axiosvue-axios（不同的node版本，成功后的提示不同） 安装成功后进行引入，在项目目录下src文件..
vue中axios基本用法
qq_59717525的博客
11-10 802
1.首先安装axios： 1)：npm install 2)：npm install vue-axios --save 3)：npm install qs.js --save　　//这一步可以先忽略，它的作用是能把json格式的直接转成data所需的格式 2.安装成功后，在main.js页面引用： import Vue from 'vue' import axios from 'axios' Vue.prototype.$axios = axios //全局注册...
VUE axios使用方法
Zhen0510的博客
07-29 733
axios的安装 $ npm i axios -S $ npm i vue-axios -S //main.js //全局注册 axios import Vue from 'vue'; import axios from 'axios'; Vue.prototype.$axios = axios;//this.$axios使用 //或 vue-axios import Vue from 'vue'; import axios from 'axios'; import vueAxios fr
详解vue中axios的使用与封装
10-17
本文主要介绍如何在Vue项目中使用Axios，并展示如何进行封装以简化HTTP请求。 首先，Axios的安装非常简单。可以通过npm命令来安装。在命令行中输入以下命令即可： ```bash npm install axios --save ``` 接下来，...
vue+axios实现文件下载及vue中使用axios的实例
10-17
3. **在 Vue 组件中使用**：在 Vue 组件中，你可以导入并使用这个配置好的 Axios 实例来发送请求。例如，调用上面定义的 `get` 方法： ```javascript import api from '@/api/index.js'; export default { ...
在vue中使用axios实现post方式获取二进制流下载文件(实例代码)
10-15
在Vue.js应用中，使用axios库来实现POST方式获取二进制流并下载文件是一个常见的需求，特别是当需要从服务器获取如Excel、PDF等特定格式的...在Vue项目中，通过将axios注入到原型链，可以更方便地在各个组件中使用。
vue-axios使用详解
08-30
在 Vue-Axios 中，可以使用 `axios.create()` 方法来创建一个新的 Axios 实例，并进行配置。例如： ``` const instance = axios.create({ baseURL: 'https://some-domain.com/api/' }); ``` 六、Axios 实例方法 在...
Vue使用axios出现options请求方法
10-16
在Vue项目中，我们经常使用axios库来进行HTTP请求。然而，有时在进行跨域请求时，浏览器会先发送一个预检请求（OPTIONS请求），这是由于CORS（Cross-Origin Resource Sharing，跨源资源共享）机制的规定。当请求的...
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 375
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
Vue CLI：初学者指南与深入理解
x15514104477的博客
09-10 1029
本文为初学者提供了一个关于如何使用 Vue CLI 的指南，并帮助读者深入理解其核心概念。Vue CLI 是一个用于快速搭建 Vue.js 项目的命令行工具，适用于所有水平的开发者。
Vue Router push方法的使用
最新发布
ithongchou的博客
09-13 691
是一个用于编程式导航的方法，它可以将用户导航到应用中的不同路由。它提供了灵活的路由控制能力，允许你在应用的逻辑中进行路由操作，例如在用户交互后进行页面跳转。
element-plus组件问题汇总
xiaoxian_xian的博客
09-12 374
element-plus组件问题汇总
美术|基于java+vue的美术外包管理信息系统(源码+数据库+文档)
weixin_66413741的博客
09-10 936
游戏美术管理信息系统。该系统基于B/S即所谓浏览器/服务器模式，应用java技术，选择MySQL作为后台数据库。系统主要包括系统首页，个人中心，用户管理，公司管理，作品信息管理，作品订单管理，外包需求管理，外包应征管理，流程追踪管理，在线交流管理，在线回复管理，管理员管理，留言反馈，系统管理等功能模块。本文首先介绍了游戏美术外包管理信息技术发展背景与发展现状，然后遵循软件常规开发流程，首先针对系统选取适用的语言和开发平台，
Vue接入高德地图并实现基本的路线规划功能
黄团团的个人博客
09-11 525
找到public目录下的index.html文件，把刚才申请好的2个密钥分别粘贴进去，第一个securityJsCode是填入安全密钥，第二个红框是填入Key。登录高德开放平台，点击我的应用，先添加新应用，然后再添加Key。如图所示填写对应的信息，系统就会自动生成。
有关 Element-ui 的一些思考
小白小白从不日别的博客
09-11 700
这里列举了一些我们在使用element-ui时的一些实用技巧，比如主题样式修改、el-form-item label宽度自适应等
大文件切片上传-vue3.0
m0_56416159的博客
09-12 514
大文件切片上传（也称为分片上传）是一种处理大文件上传的有效方法，它通过将大文件分割成多个较小的部分（即切片或分片），然后分别上传这些切片到服务器，最后在服务器上将这些切片合并成原始文件。以下是关于大文件切片上传的详细步骤和注意事项。onUploadInit： 文件初始化调用接口，用于后端创建存放切片文件的文件夹。SparkMD5：生成文件唯一的hash，用来验证文件的完整性。onUploadFinish：文件上传完成验证完整性的接口。onUploadChunk：分片上传接口。基于vue3.0代码实现。
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
qq_60281421的博客
09-11 512
Ai+若依（智能售货机运营管理系统---帝可得）--货道关联商品【08篇---0004：关联商品】
Vue中axios封装详解与实战
本文将深入讲解Vue框架中axios请求的封装，着重介绍如何在Vue项目中有效地管理和重用axios，这是一个常见的前端开发实践...本文提供的示例代码和实践方法，对学习者理解和实现在Vue项目中使用axios具有很高的参考价值。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值