axios基础用法请求参数

最新推荐文章于 2024-05-07 22:08:11 发布
最新推荐文章于 2024-05-07 22:08:11 发布
阅读量1.1k 收藏 7
点赞数 1
分类专栏： axios基础用法请求参数 文章标签： axios基础用法请求参数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45441561/article/details/103181845
版权

axios

  • 基于promise用于浏览器和node.js的http客户端
  • 支持浏览器和node.js
  • 支持promise
  • 能拦截请求和响应
  • 自动转换JSON数据
  • 能转换请求和响应数据
axios基础用法
  • get和 delete请求传递参数
    • 通过传统的url 以 ? 的形式传递参数
    • restful 形式传递参数
    • 通过params 形式传递参数
  • post 和 put 请求传递参数
    • 通过选项传递参数
    • 通过 URLSearchParams 传递参数
    • 在这里插入图片描述
      -在这里插入图片描述
    • 在这里插入图片描述
    # 1. 发送get 请求 
	axios.get('http://localhost:3000/adata').then(function(ret){ 
      #  拿到 ret 是一个对象      所有的对象都存在 ret 的data 属性里面
      // 注意data属性是固定的用法，用于获取后台的实际数据
      // console.log(ret.data)
      //ret拿到所有数据
      console.log(ret)
    })
	# 2.  get 请求传递参数
    # 2.1  通过传统的url  以 ? 的形式传递参数
	axios.get('http://localhost:3000/axios?id=123').then(function(ret){
      console.log(ret.data)
    })
    # 2.2  restful 形式传递参数 
    axios.get('http://localhost:3000/axios/123').then(function(ret){
      console.log(ret.data)
    })
	# 2.3  通过params  形式传递参数 
    axios.get('http://localhost:3000/axios', {
      params: {
        id: 789
      }
    }).then(function(ret){
      console.log(ret.data)
    })
	#3 axios delete 请求传参     传参的形式和 get 请求一样
    axios.delete('http://localhost:3000/axios', {
      params: {
        id: 111
      }
    }).then(function(ret){
      console.log(ret.data)
    })

	# 4  axios 的 post 请求
    # 4.1  通过选项传递参数默认传递的json格式的数据
    axios.post('http://localhost:3000/axios', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })
	# 4.2  通过 URLSearchParams  传递参数 
    var params = new URLSearchParams();
    params.append('uname', 'zhangsan');
    params.append('pwd', '111');
    axios.post('http://localhost:3000/axios', params).then(function(ret){
      console.log(ret.data)
    })

 	#5  axios put 请求传参   和 post 请求一样 
    axios.put('http://localhost:3000/axios/123', {
      uname: 'lisi',
      pwd: 123
    }).then(function(ret){
      console.log(ret.data)
    })


后台服务index.js
const express = require('express')
const app = express()
const bodyParser = require('body-parser')
    // 处理静态资源
app.use(express.static('public'))
    // 处理参数
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))

// 设置允许跨域访问该服务
app.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*')
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS')
    res.header('Access-Control-Allow-Headers', 'X-Requested-With')
    res.header('Access-Control-Allow-Headers', 'Content-Type')
    res.header('Access-Control-Allow-Headers', 'mytoken')
    next()
})

// 路由接口
app.get('/adata', (req, res) => {
    res.send('Hello axios!')
})
app.get('/axios', (req, res) => {
    res.send('axios get 传递参数' + req.query.id)
})
app.get('/axios/:id', (req, res) => {
    res.send('axios get (Restful) 传递参数' + req.params.id)
})
app.delete('/axios', (req, res) => {
    res.send('axios get 传递参数' + req.query.id)
})
app.delete('/axios', (req, res) => {
    res.send('axios get 传递参数' + req.query.id)
})
app.post('/axios', (req, res) => {
    res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
})
app.put('/axios/:id', (req, res) => {
        res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
    })
    // 启动监听
app.listen(3000, () => {
    console.log('服务器running...')
})

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>

    <script type="text/javascript" src="js/axios.js"></script>
    <script type="text/javascript">
        /*
                      axios请求传递
                    */
        //axios基本用法
        axios.get('http://localhost:3000/adata').then(function(ret) {
            // 注意data属性是固定的用法，用于获取后台的实际数据
            console.log(ret.data)
                //ret拿到所有数据
                // console.log(ret)
        })
        app.get('/adata', (req, res) => {
                res.send('Hello axios!')
            })
            // axios get请求传参问号
        axios.get('http://localhost:3000/axios?id=123').then(function(ret) {
            console.log(ret.data)
        })
        app.get('/axios', (req, res) => {
                res.send('axios get 传递参数' + req.query.id)
            })
            // axios get请求传参restful 形式传递参数
        axios.get('http://localhost:3000/axios/123').then(function(ret) {
            console.log(ret.data)
        })
        app.get('/axios/:id', (req, res) => {
                res.send('axios get (Restful) 传递参数' + req.params.id)
            })
            // axios get请求传参通过params  形式传递参数
        axios.get('http://localhost:3000/axios', {
            params: {
                id: 789
            }
        }).then(function(ret) {
            console.log(ret.data)
        })
        app.get('/axios', (req, res) => {
                res.send('axios get 传递参数' + req.query.id)
            })
            // axios delete 请求传参
        axios.delete('http://localhost:3000/axios', {
            params: {
                id: 111
            }
        }).then(function(ret) {
            console.log(ret.data)
        })
        app.delete('/axios', (req, res) => {
            res.send('axios get 传递参数' + req.query.id)
        })

        // axios post 请求传参默认传递的json格式的数据
        axios.post('http://localhost:3000/axios', {
            uname: 'lisi',
            pwd: 123
        }).then(function(ret) {
            console.log(ret.data)
        })
        app.post('/axios', (req, res) => {
                res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
            })
            // post通过 URLSearchParams  传递参数表单格式 拿到的是键值对
        var params = new URLSearchParams();
        params.append('uname', 'zhangsan');
        params.append('pwd', '111');
        axios.post('http://localhost:3000/axios', params).then(function(ret) {
            console.log(ret.data)
        })
        app.post('/axios', (req, res) => {
                res.send('axios post 传递参数' + req.body.uname + '---' + req.body.pwd)
            })
            // axios put 请求传参
        axios.put('http://localhost:3000/axios/123', {
            uname: 'lisi',
            pwd: 123
        }).then(function(ret) {
            console.log(ret.data)
        })
        app.put('/axios/:id', (req, res) => {
            res.send('axios put 传递参数' + req.params.id + '---' + req.body.uname + '---' + req.body.pwd)
        })
    </script>
</body>

</html>
晴雨恋
关注
  • 1
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
axios请求数据
weixin_43709908的博客
12-07 937
1.axios的get请求传参、、、.axios中delete数据请求和get的请求方式是一样的 // axios.get('http://localhost:3000/axios?id=123').then(function(ret){ // console.log(ret.data) // }) // axios.get('http://localhost:3...
前端Axios各种请求参数携带方式以及后端SpringBoot方式如何接收！！！
2301_77058976的博客
05-05 2375
前端Axios各种请求参数携带方式以及后端SpringBoot方式如何接收！！！
axios请求参数的三种方式
SYQ15544423296的博客
08-29 5836
axios请求参数的三种方式：1.拼接，2.配置设置参数params，3.Form Data 动态参数
axios参数汇总
最新发布
AZURE060606的博客
05-07 462
自定义代理用于执行 HTTP 和 HTTPS 请求的代理。: 与请求一起发送的 URL 参数，必须是一个简单对象或。: 带有 xsrf token 值的 HTTP 请求头名称。: HTTP 请求内容的最大字节数（仅Node.js）: 在发送请求前修改请求数据的函数，仅适用于。: 用于解码响应的编码（Node.js 专属）: 定义对于给定的 HTTP 状态码是。: 创建请求时使用的方法，默认为。: 作为请求体发送的数据，适用于。: HTTP 响应内容的最大字节数。: 用于请求的服务器 URL。
axios的参数配置
weixin_41277748的博客
12-21 5562
axios的参数配置 用法 axios({ method: 'get', // post、get、put.... baseURL: '', // 请求的域名，基本地址，公共的路径 url: '', // 请求的路径 params: {}, // get参数会将请求参数拼接在url上 data: {}, // post会将请求参数放在请求体中 headers: {}, // 设置请求头，例如设置token等 timeout: 1000, // 设置请求超时时长，单位：ms }
Axios 请求配置参数详解
热门推荐
Wisdom—Yoga—TaciturnKnight（WYT）
06-23 9万+
axios API可以通过向 axios 传递相关配置来创建请求axios(config)// 发送 POST 请求 axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); axios(url[, config])// 发送...
axios框架使用
weixin_68531033的博客
05-08 1195
axios基本语法 axios语法 : axios .get('url') .then( res=>{ //请求成功 res.data 服务器响应数据 } ) .catch( err=>{ //请求失败 err"错误信息} ) .then( ()=>{ //本次请求完成 无论成功和失败都会执行 } ) ...
【汇总笔记】axios的四种请求方式及参数设置
Thea12138的博客
02-21 4251
url (string): 请求的 URL 地址。data (any): 请求的数据。params (object): 请求的查询参数对象。headers (object): 请求头对象。timeout (number): 请求超时时间。withCredentials (boolean): 是否携带跨域请求的凭证。cancelToken (CancelToken): 用于取消请求的 CancelToken 对象。responseType (string): 响应数据的类型。
vue+axios全局添加请求头和参数操作
10-15
如果后端接受将token作为请求参数，可以在axios的拦截器中检查localStorage，获取token并将其添加到请求参数中。例如： ```javascript const service = axios.create({ baseURL: "http://XXXXXXXXX:XXXX", ...
Vue中 axios delete请求参数操作
10-14
在处理数组作为参数时，有时会出现问题，特别是在将数组作为单一请求参数传递时。如果直接传递，后端可能无法正确解析。为了解决这个问题，你可以尝试使用`JSON.stringify()`转换数组为字符串，但这样会在字符串中...
axios发送post请求springMVC接收不到参数的解决方法
08-27
我们可以使用 Spring MVC 的 `@RequestBody` 注解来接收参数，这样可以使得 Spring MVC 正常地接收到请求参数。 ```java @PostMapping(value = "/login") public String testLogin(@RequestBody Map, String> ...
完整过一遍axios，再也不怕写请求
开源世界
12-02 321
axios请求方法 主要有get，post，put，patch，delete get 获取数据 post 提交数据（表单提交+文件上传） put 更新数据（将所有数据均推放到服务端） patch 更新数据（只将修改的数据推送到后端） dlelete 删除数据 get方法 写法 调用型 axios.get('/data.json').then((res)=>{ console.log(res) }) 复制代码 axios()型 axios({ method:'get',
axios
fxinn的博客
07-26 206
axios是一个第三方JS库，用于实现接口调用的 用法： ① 下载，然后再像一个JS文件引入 axios.js文件 ② 或者 使用npm 安装 axios特征： （axios是一个基于promise用于浏览器和node.js的 HTTP 客户端），是一个基于promise，可以用于浏览器的 http 客户端 和 node.js的 http 客户端 支持浏览器和node.js （浏览器、node.js都是客户端，是环境） 支持promise 支持请求拦截器、响应拦截器 自动转换JSON数..
servlet 获取get,post请求方式的区别
m0_67513847的博客
09-13 650
axiospost请求传参数问题及后台接收request域里的请求参数及映射问题
axios的then写法
weixin_43507141的博客
12-12 1352
axios then的写法
axios 使用入门
weixin_49928707的博客
10-25 2723
axios 使用入门 阅读目录 一、前言# 二、干货合集# 　　1、加载# 　　2、get & post# 　　3、拦截器# 三、总结# 一、前言 在没有接触 React、Angular、Vue 这类 MVVM 的前端框架之前，无法抛弃 Jquery 的重要理由，除了优秀的前端 DOM 元素操作性以外，能够非常便捷的发起 http 请求也占有非常重要的地位。 既然我们已经开始使用 Vue 进行前端开发，抛弃了对页面 DOM 元素的操作，难道，为了方便的发起 http 请求，还需要在项目中加载 j
axios中get、post请求传参区别及使用
Komorebi_00的博客
01-04 7157
axios
axios总结
hzg_hou的博客
06-07 1247
拦截器本质上其实就是一些函数，里面有两类拦截器，一个是请求拦截器；一个是响应拦截器。请求拦截器的作用：对请求的内容以及参数做处理和检查。响应拦截器的作用：对响应的内容进行预处理。
Vue中关于axios请求的数据通过‘.then’转存报错问题
weixin_52033993的博客
10-02 417
即服务器返回的数据无法通过this指向进行转存至data中，此处this所指向的位置不存在相关内容，也就是说此处的this并不是我们以为的当前组件中的this，因此我们打印此处的this ==>经过查询后发现：function函数中的this指向页面的window对象而不是指向该vue组件实例，因此我们需要做的便是使问题代码中的this指向变为vue实例本身。默认指向在定义它时所处的对象(宿主对象),而不是执行时的对象。可以看到这里的this为空即此处的this指向时有问题的。而选择箭头函数的原因在于。
axios post 请求头参数
09-02
在使用Axios进行POST请求时，你可以通过配置请求头参数来发送请求。可以通过在配置对象中添加`headers`属性来设置请求头。 下面是一个示例代码，展示如何使用Axios进行POST请求并设置请求头参数： ```javascript import axios from 'axios'; // 请求体数据 const data = { // 请求体数据 }; // 请求头参数 const headers = { 'Content-Type': 'application/json', // 设置请求的 Content-Type 'Authorization': 'Bearer your_token', // 设置授权头 }; // 发送POST请求 axios.post('your_url', data, { headers }) .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); ``` 在上述示例中，我们通过将`headers`对象作为第三个参数传递给`axios.post()`方法来设置请求头参数。你可以根据需要自定义请求头参数，例如设置`Content-Type`为`application/json`，或者添加授权头等。 请确保替换示例代码中的`your_url`、`your_token`和请求体数据为你实际使用的值。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值