如何通过axios发起Ajax请求(最新推荐)

axios  

什么是axios

Axios是专注于网络数据请求的库,相比于原生的XMLHttpRequest对象,axios简单易用。相比于Jquery,axios更加轻量化,只专注于网络数据请求。

axios发起GET请求

axios发起get请求的语法:

在这里插入图片描述


代码


    
    

如何通过axios发起Ajax请求(最新推荐)_第1张图片

axios发起POST请求

axios发起post请求的语法

在这里插入图片描述

 
  document.querySelector('#btn2').addEventListener('click', function () {
            let url = 'http://www.liulongbin.top:3006/api/post';
            axios.post(url, { name: 'xiaoxie', age: '20' }).then(function (res) {
                console.log(res.data);
            })
        })

如何通过axios发起Ajax请求(最新推荐)_第2张图片

直接使用axios发起get请求

axios也提供了类似于Jquery中$.ajax()的函数,语法如下:

如何通过axios发起Ajax请求(最新推荐)_第3张图片


    
    

如何通过axios发起Ajax请求(最新推荐)_第4张图片

直接使用axios发起post请求


    
        document.getElementById('btn4').addEventListener('click', function () {
            let url = 'http://www.liulongbin.top:3006/api/post';
            let paramsData = {
                name: 'xiaoxie',
                age: 20
            }
            axios({
                method: 'post',
                url: url,
                data: paramsData,
            }).then(
                function (res) {
                    console.log(res.data);
                }
            )
        })
    

如何通过axios发起Ajax请求(最新推荐)_第5张图片

到此这篇关于如何通过axios发起Ajax请求的文章就介绍到这了,更多相关axios发起Ajax请求内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

你可能感兴趣的:(如何通过axios发起Ajax请求(最新推荐))