使用axios方式实现Ajax请求

r囧r小猫 2022-11-17 13:37 478阅读 0赞

> 项目已开源至gitee：[https://gitee.com/guo-qianliang/es6-vue-node.js][https_gitee.com_guo-qianliang_es6-vue-node.js]  
> 项目已开源至github：[https://github.com/Guoqianliang/ES6-Vue-Node.js][https_github.com_Guoqianliang_ES6-Vue-Node.js]

![axios][]

### 使用axios请求后端数据 ###

*   *  步骤1：引入axios依赖
     *  步骤2：实现Ajax请求

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

`在前后端分离开发中，前端通过Ajax请求请求后端，后端返回JSON数据，进而在页面中渲染显示。`Ajax请求可以通过原生方式实现、也可以通过jQuery方式实现，在Vue中，通常使用`axios方式(读作阿修斯)`方式实现Ajax。axios是独立于vue的一个项目，可以用于浏览器和node.js中发送ajax请求。

由于axios请求后端后，接收一段JSON数据，这里手动模拟一段JSON数据。  
![手动模拟JSON数据][JSON]

## 步骤1：引入axios依赖 ##

依赖即axios的js文件，可以从从[github][]进行下载，下载后放在项目文件夹，并在项目中引入。

## 步骤2：实现Ajax请求 ##

> 页面渲染前调用created方法，created方法中调用getList方法，在axios的get方法中传入`请求接口路径`(这里使用模拟的JSON数据代替)，如果请求成功执行`.then()`方法，如果请求失败执行`.catch()`方法。

![axios实现Ajax请求][axios_Ajax]

[https_gitee.com_guo-qianliang_es6-vue-node.js]: https://gitee.com/guo-qianliang/es6-vue-node.js
[https_github.com_Guoqianliang_ES6-Vue-Node.js]: https://github.com/Guoqianliang/ES6-Vue-Node.js
[axios]: /images/20221022/d9f6947b9dbb44a2ad28dbd2c7ac642b.png
[JSON]: /images/20221022/abf813de1ce4425d8793a10596bd56ad.png
[github]: https://github.com/axios/axios/tree/master/dist
[axios_Ajax]: /images/20221022/6c3a04ce6de247b0b9bb5e4345c53734.png