Axios是什么？

最新推荐文章于 2024-02-20 22:30:43 发布

comen on彬彬

最新推荐文章于 2024-02-20 22:30:43 发布

阅读量235

点赞数

分类专栏： Vue 文章标签： vue nodejs js html5

本文链接：https://blog.csdn.net/qq_42080467/article/details/117163234

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

Axios是什么？

>>Axios官方中文文档

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

# 特性

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

# 安装

使用 npm:

$ npm install axios

使用 bower:

$ bower install axios

使用 cdn:

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

# 案例

执行GET请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Axios</title>
</head>
<body>
    
    <div id="app">
        {{text.name}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

    <script>
        new Vue({
            el: '#app',
            data:{
                text:{}
            },
            mounted() {
                    axios.get('data.json').then(res =>{
                        this.text = res.data
                    });
            },
        })
    </script>
</body>
</html>

执行 POST 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

ps：你需要在VScode中先安装live-server , 不然你是无法访问到本地文件的 ! 安装live-server操作如下 : 打开终端, 输入npm install -g live-server ; 出现+ live-server@1.2.1
added 194 packages from 149 contributors in 13.215s ; 证明你已经安装成功 ; 最后输入live-server 启动服务

comen on彬彬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Axios是什么？

Axios是什么？>>Axios官方中文文档Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。# 特性从浏览器中创建XMLHttpRequests 从 node.js 创建http请求支持PromiseAPI 拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客户端支持防御XSRF# 安装使用 npm: $ npm install axios 使用 ...
复制链接

扫一扫