基于promise用于浏览器和node.js的http客户端的axios

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征:

  • 从浏览器中创建 XMLHttpRequest
  • 从 node.js 发出 http 请求
  • 支持 Promise API
  • 拦截请求和响应
  • 转换请求和响应数据
  • 取消请求
  • 自动转换JSON数据
  • 客户端支持防止 CSRF/XSRF

axios中文文档:https://blog.csdn.net/qq_36538012/article/details/81942990 axios-w3cschool-菜鸟教程:http://www.27900.com/axios

Vue 官方建议用 axios 代替 vue-resourse,所以在这里不做vue-resourse的探讨;

axios 使用基本方法和个别参数

axios({
            url: 'http://jsonplaceholder.typicode.com/users',
            method: 'get',
            responseType: 'json', // 默认的
            data: {
                //'a': 1,
                //'b': 2,
            }
        }).then(function (response) {
            console.log(response);
            console.log(response.data);
        }).catch(function (error) {
            console.log(error);
        })

相关依赖

安装

1:npm安装

   npm install axios --save

2.在main.js下引用axios

  import axios from 'axios'

一切环境依赖搭建好之后

下面来写个例子:axios请求本地json

1:在static文件夹底下新建json文件,( 本地JSON文件一定要需放在static文件夹之下。) 访问服务器文件,应该把 json文件放在最外层的static文件夹,这个文件夹是vue-cli内置服务器向外暴露的静态文件夹

图片.png

2:test.json数据格式如下:

图片.png

{
   "name":"wnagxiaoting",
   "age":24
}

3:写一个axios

getData() {

                axios.get('../../static/test.json').then(response => {
                    
                    console.log(response.data);

                }, response => {
                    console.log("error");
                });
            }

4:整体代码如下:

<template>
    <div id="app">

    </div>
</template>

<script>
    import axios from "axios";

    export default {
        name: "app",
        data() {
            return {
                itemList: []
            }
        },
        mounted() {
            this.getData();
        },
        methods: {
            getData() {

                axios.get('../../static/test.json').then(response => {
                    
                    console.log(response.data);

                }, response => {
                    console.log("error");
                });
            }
        }
    }
</script>

5:前台显示:

图片.png

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,欢迎大家一起探讨交流。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏unlike

用paxos实现多副本日志系统--multi paxos部分

上篇 basic paxos : https://cloud.tencent.com/developer/article/1147420

3658
来自专栏互联网杂技

为什么要用 Node.js

这是一个移动端工程师涉足前端和后端开发的学习笔记,如有错误或理解不到位的地方,万望指正。 Node.js 是什么 传统意义上的 JavaScript 运行在浏览...

5058
来自专栏FreeBuf

PHP代码审计实战思路浅析

对于面向过程写法的程序来说,最快的审计方法可能时直接丢seay审计系统里,但对于基于mvc模式的程序来说,你直接丢seay审计系统的话,那不是给自己找麻烦吗?

1193
来自专栏BeJavaGod

通过spring实现javamail的那些事儿

以前很早的时候大家都用javamail实现发送邮件的功能,而且我们也一直沿用至今,代码拷过来用用就行了,现在我们改为用spring来实现,这样一来减少代码的复杂...

2954
来自专栏猿人谷

进程、线程、应用程序之间的关系

进程是指在系统中正在运行的一个应用程序;线程是系统分配处理器时间资源的基本单元, 或者说进程之内独立执行的一个单元。对于操 作系统而言,其调度单元是线程。一个进...

2196
来自专栏喵了个咪的博客空间

phalapi-入门篇4(国际化高可用和自动生成文档)

phalapi-入门篇4(国际化高可用和自动生成文档) ? 前言 先在这里感谢phalapi框架创始人@dogstar,为我们提供了这样一个优秀的开源框架. 在...

3699
来自专栏技术翻译

Kafka和Redis的系统设计

我最近致力于基于Apache Kafka的水平可扩展和高性能数据摄取系统。目标是在文件到达的几分钟内读取,转换,加载,验证,丰富和存储风险源。系统收到银行上游风...

4320
来自专栏IT可乐

Linux系列教程(三)——Linux学习技巧

  前面我们讲了Linux系统的详细安装教程,大家跟着教程一步一步的操作,应该能完美的完成安装。那么这篇博客跟大家聊聊如何来学习Linux。 1、工欲善其事必先...

2297
来自专栏风中追风

为什么redis 是单线程的?

在说这个事前希望大家都能对 CPU 、 内存 、 硬盘的速度都有了解了,这样可能理解得更深刻一点,不了解的朋友点:CPU到底比内存跟硬盘快多少

97711
来自专栏北京马哥教育

服务器病了吗? Linux 服务器的那些性能参数指标

2622

扫码关注云+社区

领取腾讯云代金券