您现在的位置是：网站首页> 编程资料编程资料

Vue网络请求的三种实现方式介绍_vue.js_

2023-05-24 267人已围观

简介 Vue网络请求的三种实现方式介绍_vue.js_

1.XMLHttpRequest发送请求

使用 XMLHttpRequest 请求 users.json 中的数据：

{{item.name}}

注意：上面介绍了两种方法，分别是onreadystatechange和onload，我们需要知道这两种方法的区别。XMLHttpRequest 对象有一个属性 readyState，将其 (xhr.readyState) 打印后发现：进入onreadystatechange请求方式中时，可以打印其状态为2，状态为3，状态为4；进入onload之后，只出现了状态码4。也就是说，只有处于状态码4，请求已完成，响应已就绪的情况下，才会进入onload。只要进入onload请求中，一定是已经到4这个状态了。nreadystatechange()的定义是只要返回的状态码只要变化时就回调一次函数，而onload只有状态码为4时才能回调一次函数。

2.fetch发送请求

使用 fetch 请求 users.json 中的数据：

{{item.name}}

3.axios请求库（Vue中推荐写法）

概述：

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和node.js中。能拦截请求和响应，自动转换JSON数据。axios也是vue作者推荐使用的网络请求库。

优势：

使用人群多
对 Ts 支持非常好
跨平台（nodejs、移动端）
基于 promise ，异步变同步，写法简单
添加了拦截器等封装好的函数，使用更加方便

使用方法：

{{item.name}}

模拟发送get和post请求

创建自己的服务器，模拟发送 get 和 post 请求

步骤1：

使用npm init -y初始化 node.js 配置文件

步骤2：

使用npm i -S express，安装 express

步骤3：

新建app.js，并且修改package.json文件如下

准备工作完成后，我们就可以书写服务端代码了：

app.js：

const express = require('express') const app = express() app.listen(9000, () => { console.log('http://localhost:9000') }) // 中间件 // 解决跨域 npm i -S cors 下载并写入配置文件 app.use(require('cors')()) // post提供，内容为json格式 app.use(express.json()) app.get('/api/users', (req, res) => { // 解决跨域问题 // res.setHeader('Access-Control-Allow-Origin', '*') res.send({ code: 0, msg: 'ok', data: { users: [ { id: 1, name: '张三' }, { id: 2, name: '李四' } ], // 获取用户认证信息 token: req.headers?.token } }) }) app.post('/api/users', (req, res) => { res.send({ code: 0, msg: 'ok', // 把传过来的参数再返回出去 data: req.body }) }) // patch/put // patch 增量更新 // put 全量更新 app.put('/api/users/:id', (req, res) => { res.send({ code: 0, msg: 'ok', data: req.body }) }) app.delete('/api/users/:id', (req, res) => { // 返回 204 意味着不会返回任何数据 // res.status(204).send({ res.status(200).send({ code: 0, msg: 'ok', data: { id: req.params.id } }) })

前端获取数据：

vue学习使用{{item.name}}

注意：

超时请求不到数据就报出异常，这种捕获异常的方式，会监听前面所有的 then 方法

axios.get('/api/users').then(ret => { console.log(ret.data); }).catch(() => console.log('有异常'))

下面这种写法，只会监听当前 then 方法中是否有异常：

axios.get('/api/users').then(ret => { console.log(ret.data); },() => console.log('有异常'))

网络请求时发送用户认证信息

有时候我们通过网络请求一个服务器的时候，需要携带一个用户认证信息，例如用户只有在登录状态下才能获取服务端的信息，否则不能获取数据，即所谓的接口认证。

那么这个登录的状态，即用户的认证信息，这是怎样传给服务器的呢？

我们会将用户的认证信息包含在前端的请求头当中，发送给服务端。

以 get 请求为例，服务端代码如下：

const express = require('express') const app = express() app.listen(9000, () => { console.log('http://localhost:9000') }) // 中间件 // 解决跨域 app.use(require('cors')()) // post提供，内容为json格式 app.use(express.json()) app.get('/api/users', (req, res) => { // 解决跨域问题 // res.setHeader('Access-Control-Allow-Origin', '*') res.send({ code: 0, msg: 'ok', data: { users: [ { id: 1, name: '张三' }, { id: 2, name: '李四' } ], // 获取用户认证信息 token: req.headers?.token } }) })

前端代码如下：

vue学习使用{{item.name}}

注意：我们还可以使用全局配置来发送用户认证信息：axios.defaults.headers.token = 'aaaaa'，（请求头中的 token 因该删掉，否则会覆盖全局配置）但是这样的配置会给所有的请求方法都添加上用户认证信息，不能区别对待，也就是不能进行业务处理，不够灵活，所以我们需要用到拦截器。