vue2【axios请求】

红太狼 2024-02-18 10:09 8阅读 0赞

## 1：axios作用 ##

axios（发音：艾克c奥斯）是前端圈最火的，专注于数据请求的库。

![835fb801d68940f0990c2b34073a98b3.png][]

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中axios的github:https://github.com/axios/axios

中文官网地址：http://www.axios-js.com/

英文官网地址：https://www.npmjs.com/package/axios

### 1.1：引入axios ###

首先就是引入axios,如果你使用es6，只需要安装axios模块之后

![6b6f6c4c645546b1ba6ce85efcc84b4b.png][]

当然也可以用script引入

## 2：axios的基础语法 ##

### 2.1：发起get请求示例 ###

get请求传参的两种方式

第一种拼接路径上面，第二种将参数写在params内

//通过给定的ID来发送请求
    axios.get('/user?ID=12345').then(function(response){
            console.log(response);
        }).catch(function(err){
        console.log(err);
    });
    //以上请求也可以通过这种方式来发送
    axios.get('/user',{
                params:{
                    ID:12345
                   }
        }).then(function(response){
            console.log(response);
        }).catch(function(err){
        console.log(err);
    });

### 2.2：发起post请求示例 ###

post请求的示例：

axios.post('/user',
            {
                firstName:'Fred',
                lastName:'Flintstone'
            }
          ).then(function(res){
            console.log(res);
        }).catch(function(err){
            console.log(err);
    });

## 3：为什么使用async和await ##

**调用axios方法得到的返回值是Promise对象**

![b749a276d8814d41a00e6b2e3eb2bed8.png][]

![dfe11b3b4ad74deebfccb8f3a5f5b97b.png][]

**注意：如果调用某个方法的返回值是Promise实例，则前面可以添加await！**

**因为await只能用在被async"修饰"方法中，所有使用await需要带async，成对出现**

示例：

![2c685a2c183545f1b320e687ec8f4ada.png][]

### 3.1：结构响应的属性 ###

![29878977cb484c478f7027eea6c04e33.png][]

**通过\{对象里面的属性名\} 解构出想要的属性**

### 3.2：对结构的属性重命名 ###

![eac432b3b1ec4e9ea502e5c9d96bf046.png][]

**通过：的方式对属性进行重命名**

## 4：基于axios.get()和axios.post()发送请求 ##

![2952e2f0cc0143d9837946ead4d1d4b7.png][]

[835fb801d68940f0990c2b34073a98b3.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/7197d20ee97d44f8bd27122a594ab252.png
[6b6f6c4c645546b1ba6ce85efcc84b4b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/dafe2d468756403294a3c00506e711eb.png
[b749a276d8814d41a00e6b2e3eb2bed8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/80f53dc70b91410fab0fe2ec41a34ba9.png
[dfe11b3b4ad74deebfccb8f3a5f5b97b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/a252a255f50a455499864205f9de3146.png
[2c685a2c183545f1b320e687ec8f4ada.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/6d567175a5ef459c82e3db89877eee06.png
[29878977cb484c478f7027eea6c04e33.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/25310cf6e4a741829b7ba9495ef4e2ad.png
[eac432b3b1ec4e9ea502e5c9d96bf046.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/22ce11e99d36403c846bf08b82627562.png
[2952e2f0cc0143d9837946ead4d1d4b7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/18/b0b55e32fabc476dba80a068c7a91bfc.png