axios实现GET/POST

柔光的暖阳◎ 2022-10-27 15:54 153阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70]

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    
    
        <style> [v-cloak] { display: none; } </style>
    </head>
    
    <body>
        <div id="app" v-cloak>
            <h1>{
       {text}}</h1>
            <input type="button" value="Get请求：获取文字" @click="getText">
            <input type="text" v-model="inputVal">
            <input type="button" value="Post请求:注册" @click="register">
    
        </div>
    
        <script> var vm = new Vue({ el: '#app', data: { text: "", img: "", inputVal: "" }, methods: { getText() { var that = this; axios.get("https://autumnfish.cn/api/joke").then(function (response) { that.text = response.data; }).catch(function (error) { console.error(error); }) }, register() { var that = this; axios.post("https://autumnfish.cn/api/user/reg", { username: that.inputVal }).then(function (response) { that.text = response.data; }).catch(function (error) { console.error(error); }) } } }); </script>
    </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTEzMDgx_size_16_color_FFFFFF_t_70]: /images/20221024/24ff7aab523f484a882694e620009ae6.png

发表评论取消回复

表情：

评论列表（有 0 条评论，153人围观）

还没有评论，来说两句吧...

相关阅读

相关 Axios 如何实现请求重试？

在 [Axios 如何取消重复请求？][Axios] 这篇文章中，阿宝哥介绍了在 Axios 中如何取消重复请求及 `CancelToken` 的工作原理。而本文将介绍在 Ax

男娘i/ 2023年01月15日 14:27/ 0 赞/ 443 阅读

相关 vue+axios+echarts实现一个折线图

前端可视化是一个前端最基本的技能，要想做的好看，还是得借助一下百度家的echarts，那要怎么在Vue中使用echarts？这个官网没有给出实例，实例基本都是在jquery里面

小鱼儿/ 2022年12月21日 00:45/ 0 赞/ 186 阅读

相关 Java接口自动化测试系列[V1.0.0][GETPOST]

HttpClient隶属于Apache的HttpComponents项目，它提供了更加丰富且高效的HTTP访问方式，具备几个特色纯Java实现、支持HTTPS、支持通过CONN

以你之姓@/ 2022年11月29日 12:58/ 0 赞/ 187 阅读

相关使用axios方式实现Ajax请求

> 项目已开源至gitee：[https://gitee.com/guo-qianliang/es6-vue-node.js][https_gitee.com_guo-qian

r囧r小猫/ 2022年11月17日 13:37/ 0 赞/ 437 阅读

相关 axios实现GET/POST

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

柔光的暖阳◎/ 2022年10月27日 15:54/ 0 赞/ 154 阅读

相关 axios 请求取消及其实现过程

一、axios 请求取消 1. `axios` 请求取消，代码如下所示： <!DOCTYPE html> <html lang="en"> <

怼烎@/ 2022年08月31日 12:21/ 0 赞/ 211 阅读

相关 axios 拦截器及其实现过程

一、axios 拦截器 1. `axios` 拦截器，代码如下所示： <!DOCTYPE html> <html lang="en"> <he

以你之姓@/ 2022年08月31日 12:21/ 0 赞/ 152 阅读

相关 getpost请求的区别

1, get是从服务器上获取数据，post是向服务器传送数据。 2, get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应

一时失言乱红尘/ 2022年06月03日 02:27/ 0 赞/ 365 阅读

相关 axios.js实现文件下载功能

[原文链接][Link 1] > 在开发中遇到了需要实现文件下载的功能，起初以为只用`<a>`标签就能搞定，`<a>`标签确实能够搞定常见的场景。但是像导出或者在`heade

拼搏现实的明天。/ 2022年01月12日 02:11/ 0 赞/ 1046 阅读

相关 vue中axios实现下载

前端项目实现请求后台步骤一：安装axios组件，一般使用命令：npm install axios --save 步骤二：为了项目规范整洁，把一些常用的请求方式放在了一个

骑猪看日落/ 2021年07月26日 20:16/ 0 赞/ 574 阅读