Axios学习(1)---介绍与使用

蔚落 2021-08-02 12:29 371阅读 0赞

### 一、Axios介绍 ###

**1、Axios是什么？**

Axios是一个基于promise的HTTP库，类似于jQuery的ajax，用于http请求。可以应用于浏览器端和node.js，既可以用于客户端，也可以用于node.js编写的服务端。

**2、Axios特性**

（1）支持Promise API

（2）拦截请求与响应，比如：在请求前添加授权和响应前做一些事情。

（3）转换请求数据和响应数据，比如：进行请求加密或者响应数据加密。

（4）取消请求

（5）自动转换JSON数据

（6）客户端支持防御XSRF

**3、浏览器支持情况**

Firefox、Chrome、Safari、Opera、Edge、IE8+

--------------------

### 二、Axios使用 ###

1、vue创建项目 vue create axios-vue，选择自定义配置manually select features，终端显示如下：上下键切换，空格键选择对应配置。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70][]

而后，我们一次选择一下配置：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 1][]

运行终端指令 cd axios-vue 、npm run serve启动项目后，运行终端指令npm add axios安装axios，至此，项目创建完成，axios安装完成。

在项目的public文件夹下新建data.json文件，用于模拟数据。在组建中引入axios，并发起请求。

备注：因为接口访问的index.html文件实际上就是http://localhost:8080/就是public这个文件夹，所以json文件放在这个地方。

{
        "title":"vue project",
        "create_time":"2019-01-01"
    }

在组件中中，引入axios并使用。

import axios from "axios"
    
    
    axios.get("/data.json").then(res=>{
        console.log(res)
    }).catch(err=>{
        console.log(err)
    })

此时，已经可以请求掉数据了，效果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 2][]

### ** 三、微信提示** ###

**更多博文，请关注公众号：小拾岁月 xssy5431**

**扫码：**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 3][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70]: /images/20210802/04ab8fa6431c4062aaa2652dd4c56411.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 1]: /images/20210802/3e34d9e9234c4e8daf2446a3926cc84b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 2]: /images/20210802/e059069b6e7343c9950e6e1259cfd18c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMTE1OTY1_size_16_color_FFFFFF_t_70 3]: /images/20210802/2c49ee1b130c472697d60c79841d1544.png