axios简单使用

最新推荐文章于 2024-05-05 12:15:00 发布

pingting_

最新推荐文章于 2024-05-05 12:15:00 发布

阅读量719

点赞数

分类专栏： Vue2 文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/pingting_/article/details/122992914

版权

Vue2 专栏收录该内容

20 篇文章 4 订阅

订阅专栏

axios简单使用

1. axios 的基本使用
2. get 请求传递参数 **params**
3. post 请求传递请求体 data
4. 使用 async await 调用 axios
5. 使用结构赋值
6. axios.get 和 axios.post
- 6.1 axios.get
- 6.2 axios.post

1. axios 的基本使用

axios 是一个专注于网络请求的库！

axios 基本语法如下：

axios({
    method: '请求方式',
    url: '请求地址',
}).then((result) => {
    // result 是请求成功之后的结果
    console.log(result)
})

调用 axios 方法得到的返回值是 Promise 对象
axios 在请求数据收到之后，套了一层壳

{
    config: {},
    data: {真实的数据},
    headers: {},
    request: {},
    status: xxx,
    statusText: ''
}

2. get 请求传递参数 params

axios({
    method: 'get',
    url: 'http://www.liulongbin.top:3006/api/getbooks',
    // URL 中的查询参数
    params: {
        id: 1
    }
}).then((result) => {
    console.log(result)
})

3. post 请求传递请求体 data

axios({
    method: 'post',
    url: 'http://www.liulongbin.top:3006/api/post',
    // 请求参数体
    data: {
        name: 'zs',
        age: 12
    }
}).then((result) => {
    // result 是请求成功之后的结果
    console.log(result)
})

4. 使用 async await 调用 axios

如果调用某个方法的返回值是 Promise 实例，则前面可以加 await
await 只能用在被 async 修饰的方法中

async function  A(){
    const result = await axios({
        method: 'post',
        url: 'http://www.liulongbin.top:3006/api/post',
        // 请求参数体
        data: {
            name: 'zs',
            age: 12
        }
    })
    console.log(result)
}
A()

5. 使用结构赋值

将服务器返回的数据 data 解构出来

const { data } = await axios(...)

将解构出来的数据 data 重命名为 res

const { data: res  } = await axios(...)

6. axios.get 和 axios.post

6.1 axios.get

基本用法

axios.get('url 地址' , {
    // GET 参数
    params: {
		// ...
    }
})

示例

<body>
    <button id="btnGet">btn</button>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        document.getElementById('btnGet').onclick = async function(){
            const { data: res} = await axios.get('http://www.liulongbin.top:3006/api/getbooks' , {
                // GET 参数
                params: {
                    id: 1
                }
            })
            console.log(res)
        }
    </script>
</body>

6.2 axios.post

基本用法：
```
axios.post('url 地址' , {数据})
```

示例

<body>
    <button id="btn">btn</button>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script>
        document.getElementById('btn').onclick = async function(){
            const { data: res} = await axios.post('http://www.liulongbin.top:3006/api/post' , {
                name: 'zs',
                age: '20'
            })
            console.log(res)
        }
    </script>
</body>

pingting_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
axios简单使用

axios简单使用1. axios 的基本使用2. get 请求传递参数 **params**3. post 请求传递请求体 data4. 使用 async await 调用 axios5. 使用结构赋值6. axios.get 和 axios.post6.1 axios.get6.2 axios.post1. axios 的基本使用axios 是一个专注于网络请求的库！axios 基本语法如下：axios({ method: '请求方式', url: '请求地址',})
复制链接

扫一扫