专栏首页编程微刊基于promise用于浏览器和node.js的http客户端的axios

基于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 条评论
登录 后参与评论

相关文章

  • Vue+axios请求本地json

    1:在static文件夹底下新建json文件,( 本地JSON文件一定要需放在static文件夹之下。)

    王小婷
  • Vue框架Element UI教程-axios请求数据(六)

    Element UI手册:https://cloud.tencent.com/developer/doc/1270 中文文档:http://element-c...

    王小婷
  • ajax和axios请求本地json数据对比

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术,通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重...

    王小婷
  • Vue 的axios的使用

    axios直接进行访问会出现跨域问题,需要配置代理了。(前提是服务器没有设置禁止跨域的权限问题)

    我不是费圆
  • 【融职培训】Web前端学习 第7章 Vue基础教程9 数据交互

    基于Vue的web项目显示的所有服务端数据,都是通过Ajax获取的。官方推荐使用Axios作为Ajax库,所以本节主要讲解在Vue项目中,如何安装和使用Axio...

    学习猿地
  • Web前端学习 第7章 Vue基础教程9 数据交互

    基于Vue的web项目显示的所有服务端数据,都是通过Ajax获取的。官方推荐使用Axios作为Ajax库,所以本节主要讲解在Vue项目中,如何安装和使用Axio...

    学习猿地
  • Vue使用axios

    3、使用   mounted: function () {     // 按需引入     axios.get(‘https://api.coindesk...

    苦咖啡
  • Vue笔记:使用 axios 发送请求

    在Vue1.0的时候有一个官方推荐的 ajax 插件 vue-resource,但是自从 Vue 更新到 2.0 之后,官方就不再更新 vue-resource...

    朝雨忆轻尘
  • axios介绍与使用说明 axios中文文档

    本周在做一个使用vuejs的前端项目,访问后端服务使用axios库,这里对照官方文档,简单记录下,也方便大家参考。 Axios 是一个基于 Promise 的 ...

    用户1177380
  • axios2教程

    axios 是一个基于 promise 的 HTTP 库,用于浏览器和node.js的http客户端,支持拦截请求和响应,自动转换 JSON 数据, 客户端支持...

    飞狗

扫码关注云+社区

领取腾讯云代金券