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

一、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，终端显示如下：上下键切换，空格键选择对应配置。

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

运行终端指令 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)
})

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

 三、微信提示

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

扫码：