axios发送Ajax请求

已于 2023-08-17 14:00:08 修改
阅读量1k 收藏 2
点赞数 1
分类专栏： Ajax 文章标签： ajax javascript 前端
于 2022-05-13 23:09:02 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mantou_riji/article/details/124761150
版权

文章目录

axios简介

axios是一个前端Ajax的一个工具库。
axios资源 https://github.com/axios/axios
axios的引入：<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>

请求格式

get请求

axios.get('url地址',{
属性名:属性值
})

eg:

  axios.get('http://127.0.0.1:8000/axios-server',{
      // 参数：
      params:{
          id:100,
          vip:7
      },
      // 请求头
      headers:{
          name:'yang',
          age:20
      }
  }).then(value =>{
      // 响应体结果
      console.log(value)    
  })

post请求

和get请求格式一样，但是他有请求体，放在post的第二个参数。

axios.post('url地址',{
post请求体
},{
属性名:属性值
})

eg：

       btns[1].onclick =function(){
        // post请求
        axios.post('/axios-server',
            {// 请求体
                username:'admin',
                password:'admin'
            },{
            // 参数：
            params:{
                id:200,
                vip:9
            },
            // 请求头
            headers:{
                heigth:200,
                width:200
            }
        })
        }

ajax请求（通用请求，既可post也可get）

格式：
Post请求

axios({
//    请求方法：
 method:'POST',
 //    请求地址
 url:'/axios-server',
 // 参数
params:{},
// 请求头
headers:{},
// 请求体
data:{}
}).then()

Get请求

axios({
//    请求方法：
 method:'GET',
 //    请求地址
 url:'/axios-server',
 // 参数
params:{},
// 请求头
headers:{},
}).then()

eg：通用方法发送Post请求：

btns[2].onclick = function (){
           axios({
            //    请求方法：
            method:'POST',
            //    url
            url:'/axios-server',
            // 参数
            params:{
                vip:10,
                level:30
            },
            // 请求头
            headers:{
                heigth:200,
                width:200
            },
            // 请求体
            data:{
                username:'admin',
                password:'admin'
            }

           }).then(response=>{
            //    console.log(response)
               //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
           })
        }

所有代码

html：

<!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>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.js"></script>
</head>
<body>
    <div class="container">
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
        const btns =document.querySelectorAll('button')
        axios.defaults.baseURL = 'http://127.0.0.1:8000'
        btns[0].onclick =function(){
        // get请求
        axios.get('/axios-server',{
            // 参数：
            params:{
                id:100,
                vip:7
            },
            // 请求头
            headers:{
                name:'yang',
                // age:20
            }
        }).then(value =>{
            // 响应体结果
            console.log(value)    
        })
        }

        btns[1].onclick =function(){
        // post请求
        axios.post('/axios-server',
            {// 请求体
                username:'admin',
                password:'admin'
            },{
            // 参数：
            params:{
                id:200,
                vip:9
            },
            // 请求头
            headers:{
                heigth:200,
                width:200
            }
        })
        }
        //通用方法：POST请求
        btns[2].onclick = function (){
           axios({
            //    请求方法：
            method:'POST',
            //    url
            url:'/axios-server',
            // 参数
            params:{
                vip:10,
                level:30
            },
            // 请求头
            headers:{
                heigth:200,
                width:200
            },
            // 请求体
            data:{
                username:'admin',
                password:'admin'
            }

           }).then(response=>{
            //    console.log(response)
               //响应状态码
                console.log(response.status);
                //响应状态字符串
                console.log(response.statusText);
                //响应头信息
                console.log(response.headers);
                //响应体
                console.log(response.data);
           })
        }
    </script>
    
</body>
</html>

server.js:

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();
// 3.创建路由规则
// 如果请求行的路径是/server的GET请求就会执行回调函数里面的内容
app.get('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    // 设置响应体
    response.send('HELLO AJAX GET')
})
// 如果请求行的路径是/server的POST请求就会执行回调函数里面的内容
app.all('/server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers','*')
    // 设置响应体
    response.send('HELLO AJAX POST')
})

app.all('/json-server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 响应数据
    const data = {
        name: 'yang',
        // age:18
    }
    // 数据类型转化
    let str = JSON.stringify(data);
    // 设置响应体
    response.send(str)
})
// IE缓存
app.get('/IE', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers', '*');
    // 设置响应体
    response.send('HELLO IE -- 3')
})
// 延时
app.all('/delay', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    setTimeout(()=>{
       response.send('延时响应')
    },3000)
})

// jQuery服务
app.all('/jquery-server', (request, response) => {
    // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Headers','*')
    const data = {name:'yang'}
    response.send(JSON.stringify(data));
})

// Anxios服务
app.all('/axios-server', (request, response) => {
       // 设置响应头 设置允许跨越
    response.setHeader('Access-Control-Allow-Origin','*');
    // 响应头(接受所有响应头信息)
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'yang'}
    response.send(JSON.stringify(data));
})
// 4.监听端口启动服务
app.listen(8000, () => {
    console.log('服务已经启动，8000端口监听中……')
})

获取请求错误信息

请求很可能出错，那么返回的就是错误信息我们可以使用 error参数进行接收。
eg：get请求

axios.get('http://localhost:5000/students').then(
        response => {
          console.log("响应体内容", response.data)
        },
        error => {
          console.log("请求失败", error.message)
        }
      )

开发中常用的请求格式

//下载axios库
import axios from "axios";
//post请求
axios({
    method: "post",
    url: "请求地址",
    data: {请求参数，一般是对象模式},
  });

//post请求
axios({
    method: "get",
    url: "请求地址",
   params:{可以携带一些数据}
  });

params参数和data请求体

axios中的params参数和data参数可以同时使用，它们的作用是不同的。

  • params参数用于传递URL的查询参数，在GET请求中常用。它会将参数拼接在URL的后面，例如：/api/user?id=123。可以通过传递一个对象给params参数来指定查询参数，例如：axios.get('/api/user', { params: { id: 123 } })。
  • data参数用于传递请求体中的数据，在POST、PUT等请求中常用。它会将数据放在请求体中发送给服务器。可以通过传递一个对象给data参数来指定要发送的数据内容，例如：axios.post('/api/user', { name: 'John' })。
    这两个参数在使用时可以单独使用，也可以同时使用。params参数用于传递URL中的查询参数，data参数用于传递请求体中的数据。

虽然在GET请求中也可以使用data参数传递请求体中的数据，但是通常不推荐这样做。根据HTTP规范，GET请求中的数据应该放在URL的查询参数中，而不是请求体中。在POST请求中，也可以使用params参数来传递请求参数，但是这种方式不太常见，也不是推荐的做法。根据HTTP规范，POST请求中的数据应该放在请求体中，而不是拼接在URL的后面。大部分服务器也会将POST请求体中的数据作为请求参数进行处理，而不会解析URL中的查询参数。

_洋
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
今天小编就为大家分享一篇vue项目使用axios发送请求让ajax请求头部携带cookie的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Axios发送Ajax请求
xpmhhh的博客
03-20 437
Axios是目前最热门的Ajax工具库，使用频率比较高，是Vue和React推荐的Ajax请求的工具包。 axios发送ajax请求：结构清晰 axios函数发送ajax请求：
10.初学AJAX（9）
t13268668791的博客
08-22 168
用Axios发送AJAX请求 与之前类似 三个按钮 分别发送GET　POST　通用方式　三种方式的请求 与之前类似，其实只要记住格式就可以写出来相应代码了 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="v
axios发送请求的五种方法详解
最新发布
m0_59335810的博客
03-11 1562
2、Content-Type: multipart/form-data （用以支持向服务器发送二进制数据，多用于文件上传，multipart/form-data不会对参数编码，使用的boundary(分割线)，相当于&，boundary的值是----Web******）3、Content-Type: application/x-www-form-urlencoded （提交的默认方式，参数都是通过浏览器的url传递，都是以key=&value=的方式写在url后面）// 方式一:参数在url。
使用axios发送ajax请求
qq_42524153的博客
11-05 502
使用axios发送ajax请求小示例(axios基于promise) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <s
Ajax学习：Axios发送Ajax请求
weixin_47295886的博客
12-01 369
/baseURL对路径进行简化 axios.default.baseURL='http://127.0.0.1:8000';（注意有请求头 存在两次请求 包含预检请求）在nodejs中发送请求、支持promise(ES6推出的异步编程的解决方案)、拦截器机制、数据转换、取消请求、自动转换json,安全防护。防止报警告：crossorigin="anonymous"传递url参数 params GET请求。可以使用各种方法安装:本例使用cdn。POST请求（请求体请求头设置）发送ajax请求（）
axios发送AJAX请求
weixin_42541725的博客
02-23 256
axios发送AJAX请求
vue使用Axios做ajax请求详解
08-30
本篇文章主要介绍了vue使用Axios做ajax请求详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue发送ajax请求所需axios插件包
08-10
vue2.0以上版本建议使用axios 进行ajax请求 资源是经过压缩的小体积版本
vue发送ajax请求详解
01-19
本文为大家介绍vue使用axios发送AJAX请求 首页安装并引入axios 1、npm install axios -S #直接下载axios组件，下载完毕后axios.js就存放在node_modules\axios\dist中 2、网上直接下载axios.min.js文件 3、通过...
Ajax（三）: axios发送Ajax请求
799喵的博客
01-30 528
axios发送Ajax请求
Axios发送AJAX请求
baibo6666684的博客
04-29 180
Axios [toc] github文档：axios github 该模块兼容浏览器端和node.js后端发送http请求。 本文主要简单介绍了请求的发送和响应callback的注册。也就是axios发送ajax请求的使用方式，至于具体的请求内容和响应内容对象属性定义；以及全局配置；拦截器功能，请移驾到axios github文档，已经很简介明了了。 博文图片挂了临时解决办法 ...
【Ajax】Axios发送ajax请求
wlc19981111的博客
05-17 55
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>axios 发送 AJAX请求</title> <script crossorigin="anonymou
axios发送ajax请求
weixin_46564011的博客
03-06 100
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <button id="btn1">简易get请求</button> <button id="btn2">简易POST请求</button><bu.
Axios发送ajax请求
G1best的博客
08-02 91
Axios发送ajax请求
使用axios发送AJAX请求
sinat_33940108的博客
03-31 223
使用axios发送AJAX请求 <!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">
axios发送AJAX请求应该如何配置
05-31
要使用axios发送AJAX请求，需要先引入axios库，可以通过以下命令安装axios： ``` npm install axios ``` 然后在代码中引入axios： ```javascript import axios from 'axios'; ``` 接下来，可以使用axios发送请求，例如： ```javascript axios.get('/api/users') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 上面的代码发送了一个GET请求，获取了/api/users接口返回的数据。在发送请求时，可以通过配置axios实例来设置请求的一些参数，例如： ```javascript const instance = axios.create({ baseURL: 'https://api.example.com', timeout: 5000, headers: {'X-Custom-Header': 'foobar'} }); ``` 上面的代码创建了一个axios实例，设置了请求的基本URL为https://api.example.com，请求超时时间为5秒，请求头中添加了一个自定义的头部X-Custom-Header。创建好实例后，就可以通过它来发送请求了，例如： ```javascript instance.get('/users') .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 这样就发送了一个GET请求，获取了https://api.example.com/users接口返回的数据。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值