Ajax里的axios工具使用

原创已于 2022-11-17 20:15:04 修改 · 217 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #ecmascript

于 2022-11-16 12:59:48 首次发布

前端专栏收录该内容

36 篇文章

订阅专栏

本文详细介绍了Axios库中的常用参数，如url、method、query、params、data和then，并通过实例展示了GET和POST请求的配置方法。重点讲解了params用于GET请求的查询参数，以及data在POST请求中作为请求体发送数据的用法。理解这些概念对于前端开发人员进行API交互至关重要。

一、axios里的常见单词

url

method

query

params

data

then

二.、axios基本语法

axios({
    url: '请求的URL网址',
    method: '请求的方法'
}).then((结果变量名) => {
    // .then 用来指定请求成功之后的回调函数
    // 形参中的 result 是请求成功之后的结果
})

三、axios的配置项

1、params：对应查询参数query，是让后端返回匹配的数据。

axios({
            url: 'http://ajax-api.itheima.net/api/area',  // 请求地址
            method: 'GET',  // 请求方式
            params: {
                pname: '湖北省',  // 返回参数
                cname: '武汉市'
            }
        }).then(res => {
            console.log(res)
        })

2、data：对应请求体body，是要发给后端的数据。

axios({
            url: 'http://hmajax.itheima.net/api/books',
            method: 'POST',
            data: {
                bookname: '111',
                author: '222',
                publisher: '333'
            }
        }).then(res => {
            console.log(res)
        })

params(对应的GET方式)传递的参数最终会出现在请求行中，不会在请求体中。

data(对应的POST方式)传递的参数会在请求体中。