Axios库

最新推荐文章于 2024-03-07 18:12:49 发布

so_#

最新推荐文章于 2024-03-07 18:12:49 发布

阅读量2.9k

点赞数

分类专栏：文章笔记

Jine

本文链接：https://blog.csdn.net/weixin_42760849/article/details/108518568

版权

文章同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

笔记

32 篇文章 0 订阅

订阅专栏

Axios库

基本概述

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


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


使用 npm安装axios:
$ npm install axios

语法

请求方式

get/post/head/delete/put/option

例如：
axios.get([URL],[OPTIONS]).then((res)=>{
    //xxxx
})

axios.post([URL],[OPTIONS]).then((res)=>{
    //xxxx
})

======================================================
实例代码如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>axios基础使用</title>
    <script src="./node_modules/axios/dist/axios.js"></script>
</head>
<body>
    <script>
        console.log(axios)
        //get请求（写法1）
        axios.get("https://v1.hitokoto.cn",{
            params:{
                name:"jine"
            }
        }).then(res=>{
            console.log(res)
            
            /*
                结果返回promise实例
                config（配置）
                data（从服务器获取的响应主体内容）
                headers（从服务器获取的响应的头信息）      
                request（创建的AJAX实例）
                status （状态码）            
                statusText（状态码的描述）
            */
        })

        //get请求（写法2）
        axios.get("https://v1.hitokoto.cn?name=jine").then(res=>{
            console.log(res)
        })


        // //post请求
        axios.post("https://v1.hitokoto.cn",{
            name:"jine"
        }).then((res)=>{
            console.log(res)
        })
    </script>
</body>
</html>

执行多个并发请求

一次可以同时执行多个并发请求

1、第一种方法（通过数组集合方式）：

例如：

    <script>
        let pormiseArry=[
            axios.get('./data.json'),
            axios.get('./data.text')
        ]
        axios.all(pormiseArry).then(res=>{
            console.log(res)
            //结果返回，俩个get请求数据得到的数组集合
        })
    </script>

=====================================================================================
2、第二种方法（axios.spread(a,b)=>{xxxx}）

例如：

<script>
        //多个并发请求数组
        let spreadArray=[
            axios.get('./data.json'),
            axios.get('./data.txt')
        ]

        axios.all(spreadArray).then(axios.spread((spreadA,spreadB)=>{
            //分别打印出俩个请求到的数据结果
            console.log(spreadA.data)
            console.log(spreadB.data)
        }))
    </script>

axios（config）

可在发送并发请求前进行一系列配置（一般不用这么麻烦）
创建请求时可以用的配置选项。只有 url 是必需的。如果没有指定 method，请求将默认使用 get 方法。（更多请求配置，如若需要，查看中文文档）


// 发送 POST 请求

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    name: 'jine',
    age: 21
  }
});

=====================================================
// 获取远端图片
    
axios({
  method:'get',
  url:'http://bit.ly/2mTM3nY',
  responseType:'stream'
})
  .then(function(response) {
  response.data.pipe(fs.createWriteStream('ada_lovelace.jpg'))
});