【vue】axios和vue-axios请求模块

目录

一、axios模块

二、 axios使用方法

1.创建服务器端Express项目

2.创建服客户端Vite项目

3.在vite客户端安装axios

 三、axios的六种请求

1.无参的get请求

2.带参的get请求

3. post请求

4.put请求

5.patch请求

6.delete请求

四、 axios的数据封装格式

五、vue-axios模块

1.安装

2.在main.js文件中进行全局的配置

---

一、axios模块

axios是一个基于promise的http客户端请求工具，可以用在浏览器和node.js中。

可以提供以下服务:

1. 从浏览器中创建XMLHttpRequest2：异步请求对象
2. 从node.js 创建http请求
3. 支持PromiseAPl：请求的返回值是Promise对象(resolve、reject)
4. 拦截请求和响应
5. 转换请求数据和响应数据
6. 取消请求
7. 自动转换JSON数据
8. 客户端支持防御XSRF

二、 axios使用方法

1.创建服务器端Express项目

（1）在webstorm创建express项目

（2）点击右上角运行按钮后，项目运行在3000端口号上

（3）在webtorm中安装跨域模块

        npm install cors

在express服务器端进行此模块的安装，因为在前后端交互时，浏览器出于安全考虑，会将js代码跨域模块的访问进行拦截，所以为了进行跨域访问，需要安装这个cors模块。

（4）在app.js中导入跨域模块进行使用

（5）在uers.js路由文件中创建测试路由

（6）重新运行后，在接口测试软件中测试结果

2.创建服客户端Vite项目

（1）在webstorm创建vite项目

 （2）点击右下角Run 'npm install'，安装依赖

 （3）如下图所示进行运行配置

 

（4）点击右上角运行按钮，运行项目

注意：如果出现服务器端于客户端端口相同的情况，会默认打开服务器端，此时需要将服务器端中“bin文件→www”中的端口改成与客户端不同的端口。

3.在vite客户端安装axios

（1）安装axios

        npm install axios

 （2）新建模块

 三、axios的六种请求

1.无参的get请求

方式一：