首页 > 资讯 > 前端开发 > JavaScript >Vue网络请求的三种实现方式介绍

274

分享到

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

2024-04-02 19:04:59 274人浏览八月长安

摘要

目录1.XMLHttpRequest发送请求2.fetch发送请求3.axiOS请求库（Vue中推荐写法）模拟发送get和post请求网络请求时发送用户认证信息请求拦截器响应拦截器用

1.XMLHttpRequest发送请求

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

<div id="app">
    <ul>
        <li v-for="item in users" :key="item.id">{{item.name}}</li>
    </ul>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            users: []
        },
        mounted() {
            const xhr = new XMLHttpRequest()
            // // true 表示发送异步请求
            xhr.open('get', '/mock/users.json', true)
            // // 写法1
            // xhr.onreadystatechange = () => {
            //   // 0 - 4 xhr.readyState状态值 
            //   if (xhr.readyState === 4 && xhr.status === 200) {
            //     console.log(JSON.parse(xhr.responseText));
            //     this.users = JSON.parse(xhr.responseText)
            //   }
            // }
            // 写法2
            xhr.onload = ()=>{
                console.log(JSON.parse(xhr.responseText));
                this.users = JSON.parse(xhr.responseText)
            }
            xhr.send(null)
        }
    })
</script>

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

2.fetch发送请求

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

<div id="app">
    <ul>
        <li v-for="item in users" :key="item.id">{{item.name}}</li>
    </ul>
</div>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            users: []
        },
        // 兼容写法
        mounted() {
            fetch('/mock/users.json')
                .then(ret => ret.json())
                .then(json => this.users = json)
        }
        // 高版本写法
        // async mounted() {
        //   let ret = await fetch('/mock/users.json')
        //   this.users = await ret.json()
        // }
        // 高版本装逼写法
        // async mounted() {
        //   this.users  = await (await fetch('/mock/users.json')).json
        // }
    })
</script>

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

概述：

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

优势：

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

使用方法：

<div id="app">
    <ul>
        <li v-for="item in users" :key="item.id">{{item.name}}</li>
    </ul>
</div>
<script src="./js/axios.js"></script>
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            users: []
        },
        mounted() {
            // 获取数据的简单使用
            axios.get('/mock/users.json').then(ret => {
                console.log(ret.data);
                this.users=ret.data;
            })

        }
    })
</script>

模拟发送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
        }
    })
})

前端获取数据：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue学习使用</title>
        <!-- 第1步： 引入vue库文件 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 第2步：挂载点 -->
        <div id="app">
            <ul>
                <li v-for="item in users" :key="item.id">{{item.name}}</li>
            </ul>
        </div>
        <!-- 第3步：实例化vue -->
        <script src="./js/axios.js"></script>
        <script>
            // axios全局配置  这里的地址会自动补全到 get 或 post 要请求的地址中
            // 可以写在配置文件中，方便修改
            axios.defaults.baseURL = 'http://localhost:9000';
            // 全局设置网络请求超时时间，10s中还没请求到数据，就停止请求
            axios.defaults.timeout = 10000
            const vm = new Vue({
                el: '#app',
                data: {
                    users: []
                },
                mounted() {
                    // 发送 get 请求
                    // axios.get('/api/users').then(ret => {
                    //     console.log(ret.data);
                    //     // 只会监听当前 then 方法中是否有异常
                    // }, () => console.log('有异常'))
                    // 发送 post 请求
                    // axios.post('/api/users', {
                    //     name: '李四'
                    // }).then(ret => {
                    //     console.log(ret.data);
                    // })
                    // 发送 put 请求
                    // axios.put('/api/users', {
                    //     name: '李四 -- put'
                    // }).then(ret => {
                    //     console.log(ret.data);
                    // })
                    // 发送 delete 请求
                    axios.delete('/api/users/100').then(ret => {
                        console.log(ret.data);
                    })
                }
            })
        </script>
    </body>
</html>

注意：

超时请求不到数据就报出异常，这种捕获异常的方式，会监听前面所有的 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
        }
    })
})

前端代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习使用</title>
    <!-- 第1步： 引入vue库文件 -->
    <script src="./js/vue.js"></script>
</head>
<body>
    <!-- 第2步：挂载点 -->
    <div id="app">
        <ul>
            <li v-for="item in users" :key="item.id">{{item.name}}</li>
        </ul>
    </div>
    <!-- 第3步：实例化vue -->
    <script src="./js/axios.js"></script>
    <script>
        // axios全局配置  这里的地址会自动补全到 get 或 post 要请求的地址中
        // 可以写在配置文件中，方便修改
        axios.defaults.baseURL = 'http://localhost:9000';
        // 全局设置网络请求超时时间，10s中还没请求到数据，就停止请求
        axios.defaults.timeout = 10000
        const vm = new Vue({
            el: '#app',
            data: {
                users: []
            },
            mounted() {
                // 发送 get 请求
                axios.get('/api/users', {
                    // 认证信息放在请求头发送
                    headers: {
                        token: 'abc'
                    }
                }).then(ret => {
                    console.log(ret.data);
                    // 只会监听当前 then 方法中是否有异常
                }, () => console.log('有异常'))
            }
        })
    </script>
</body>
</html>

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

请求拦截器

延续上面的案例，如果我们的需求是，如果是 get 方法发送，则在请求头中添加用户认证信息，其他方法不添加，则前端页面需要这样写：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue学习使用</title>
        <!-- 第1步： 引入vue库文件 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 第2步：挂载点 -->
        <div id="app">
            <ul>
                <li v-for="item in users" :key="item.id">{{item.name}}</li>
            </ul>
        </div>
        <!-- 第3步：实例化vue -->
        <script src="./js/axios.js"></script>
        <script>
            // axios全局配置  这里的地址会自动补全到 get 或 post 要请求的地址中
            // 可以写在配置文件中，方便修改
            axios.defaults.baseURL = 'http://localhost:9000';
            // 全局设置网络请求超时时间，10s中还没请求到数据，就停止请求
            axios.defaults.timeout = 10000
            // 请求拦截器
            axios.interceptors.request.use(config => {
                if (config.method === 'get') {
                    config.headers.token = 'abc'
                }
                // 请求拦截器中的回调函数中的config对象一定要return出去
                return config
            })
            const vm = new Vue({
                el: '#app',
                data: {
                    users: []
                },
                mounted() {
                    // 发送 get 请求
                    axios.get('/api/users', {
                        // 认证信息放在请求头发送
                        headers: {
                            token: 'abc'
                        }
                    }).then(ret => {
                        console.log(ret.data);
                        // 只会监听当前 then 方法中是否有异常
                    }, () => console.log('有异常'))
                }
            })
        </script>
    </body>
</html>

注意：请求拦截器中的回调函数中的config对象一定要return出去。

响应拦截器

作用：

对响应的数据做处理或判断

应用：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue学习使用</title>
        <!-- 第1步： 引入vue库文件 -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 第2步：挂载点 -->
        <div id="app">
            <ul>
                <li v-for="item in users" :key="item.id">{{item.name}}</li>
            </ul>
        </div>
        <!-- 第3步：实例化vue -->
        <script src="./js/axios.js"></script>
        <script>
            // axios全局配置  这里的地址会自动补全到 get 或 post 要请求的地址中
            // 可以写在配置文件中，方便修改
            axios.defaults.baseURL = 'http://localhost:9000';
            // 全局设置网络请求超时时间，10s中还没请求到数据，就停止请求
            axios.defaults.timeout = 10000
            axios.defaults.headers.token = 'aaaaa'
            // 响应拦截器
            axios.interceptors.response.use(res => {
                // 这里是未被处理过的响应数据
                console.log(res);
                // 解套，减少数据的调用层级，直接返回 res.data
                if (res.data.code == 0) return res.data
                // 这里是做了全局的网络错误处理
                alert('有错')
            }, err => Promise.reject(err))
            const vm = new Vue({
                el: '#app',
                data: {
                    users: []
                },
                mounted() {
                    // 发送 get 请求
                    axios.get('/api/users').then(ret => {
                        // 这里返回的时解套后的数据（已经被响应拦截器处理过了）
                        console.log(ret);
                        // 只会监听当前 then 方法中是否有异常
                    }, () => console.log('有异常'))
                }
            })
        </script>
    </body>
</html>

用户管理

服务端：

// 服务端代码：具备增删改查、数据源
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())
// 声明一个变量，只要服务不重启，我就永久存储（放入内存了）
let users = [
    { id: 1, name: '张三', age: 10 },
    { id: 2, name: '李四', age: 20 }
]
// 响应get请求
app.get('/api/users', (req, res) => {
    res.send({
        code: 0,
        msg: 'ok',
        // 如果请求成功就返回对应的users
        data: users
    })
})
// 增添数据
app.post('/api/users', (req, res) => {
    // 接受post提交过来的数据，用当前时间作为主键id
    const user = { ...req.body, id: Date.now() }
    // 添加数据
    users.push(user)
    res.send({
        code: 0,
        msg: 'ok',
        // 如果请求成功就返回对应的users
        data: users
    })
})
// 修改数据
app.put('/api/users/:id', (req, res) => {
    // 接受修改的id号
    let id = req.params.id
    // 接受put提交过来的数据
    users = users.map(item => (item.id == id ? { ...item, ...req.body } : item));
    res.send({
        code: 0,
        msg: 'ok',
        data: users
    })
})
// 删除数据
app.delete('/api/users/:id', (req, res) => {
    // 接受修改的id号
    let id = req.params.id
    users = users.filter(item => item.id != id)
    res.send({
        code: 0,
        msg: 'ok',
        data: users
    })
})

客户端：

http.js（axios发送请求）：

// 解套处理（响应拦截器），直接返回所需数据，降低层级
axios.interceptors.response.use(
    res => res.data,
    err => Promise.reject(err)
)
// 请求拦截器
axios.interceptors.request.use(
    config => {
        config.baseURL = 'http://localhost:9000'
        // 请求超时拦截
        config.timeout = 10000
        return config
    },
    err => Promise.reject(err)
)
// 封装 axios 中的方法
const get = url => axios.get(url)
const post = (url, data = {}) => axios.post(url, data)
const put = (url, data = {}) => axios.put(url, data)
const del = url => axios.delete(url)

index.html：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>vue学习使用</title>
    </head>
    <body>
        <div id="app">
            <button @click="add">添加用户</button>
            <hr>
            <ul>
                <!-- 条件渲染 -->
                <!-- template标签 影子标签，可以占位，可以读取指令，但不会被解析成html，可以使有效的标签中没有不想要的指令 -->
                <template v-if="users.length===0">
                    <li>数据加载中...</li>
                </template>
                <template v-else>
                    <li v-for="item in users" :key="item.id">
                        <span>{{item.name}}</span>
                        <span>
                            <button @click="edit(item.id)">修改</button>
                        </span>
                        <span>
                            <button @click="del(item.id)">删除</button>
                        </span>
                    </li>
                </template>
            </ul>
        </div>
        <script src="./js/vue.js"></script>
        <script src="./js/axios.js"></script>
        <script src="./utils/http.js"></script>
        <script>
            const vm = new Vue({
                el: '#app',
                data: {
                    // 定义数据源
                    users: []
                },
                async mounted() {
                    // this.users = await (await get('/api/users')).data
                    let users = await get('/api/users')
                    this.users = users.data
                },
                methods: {
                    async add() {
                        let users = await post(`/api/users`, { name: Date.now() + '' })
                        this.users = users.data
                    },
                    async edit(id) {
                        let users = await put(`/api/users/${id}`, { name: Date.now() + '' })
                        this.users = users.data
                    },
                    async del(id) {
                        let users = await del(`/api/users/${id}`)
                        this.users = users.data
                    }
                }
            })
        </script>
    </body>
</html>

到此这篇关于Vue网络请求的三种实现方式介绍的文章就介绍到这了,更多相关Vue网络请求内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: Vue网络请求的三种实现方式介绍

本文链接: https://www.lsjlt.com/news/167134.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

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

目录1.XMLHttpRequest发送请求2.fetch发送请求3.axios请求库（Vue中推荐写法）模拟发送get和post请求网络请求时发送用户认证信息请求拦截器响应拦截器用...

99+

2022-11-13
JS实现网络请求的三种方式梳理

目录背景前言XMLHttpRequestPromiseasync/await结语背景为了应对越来越多的测试需求，减少重复性的工作，有道智能硬件测试组基于 electron 开发了一...

99+

2022-11-13
JAVA多线程实现的三种方式介绍

本篇内容主要讲解“JAVA多线程实现的三种方式介绍”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JAVA多线程实现的三种方式介绍”吧!JAVA多线程实现方式主要有三种：继承Thread类、实现R...

99+

2023-06-02
JS实现网络请求的方式有哪些

这篇文章将为大家详细讲解有关JS实现网络请求的方式有哪些，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。背景为了应对越来越多的测试需求，减少重复性的工作，有道智能硬件测试组基于 electron 开发了一系...

99+

2023-06-29
Android开发中的几种网络请求方式详解

Android应用经常会和服务器端交互，这就需要手机客户端发送网络请求，下面介绍四种常用网络请求方式，我这边是通过Android单元测试来完成这四种方法的，还不清楚Androi...

99+

2022-06-06

android开发 Android
vue结合axios实现restful风格的四种请求方式

目录1、npm下载axios到vue项目中2、main.js里引入3、定义全局变量路径（不是必须的，但是推荐）（1）、方法一（2）、方法二4、在具体需求的地方使用（1）、get（2）...

99+

2022-11-13
PHP实现网络请求的方法总结

一、分析php发送网网络请求的方法对于php发送网络请求，我们最常用的请求就是curl,有时我们也会用到file_get_contents函数发送网络请求，但file_get_co...

99+

2022-11-13
Java 实现HTTP请求的四种方式总结

前言在日常工作和学习中，有很多地方都需要发送HTTP请求，本文以Java为例，总结发送HTTP请求的多种方式 HTTP请求实现过程 GET ▶️①、创建远程连接 ▶️②、设置连接方式（get、post、put…） ▶️③、设置连接超时...

99+

2023-08-17

java http restful
10种CSS3实现的loading动画的方式介绍

本篇内容主要讲解“10种CSS3实现的loading动画的方式介绍”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“10种CSS3实现的loading动画的方式介绍”吧!效果html<body...

99+

2023-06-08
Java实现单例模式的五种方法介绍

目录饿汉式懒汉式双重检查锁静态内部类内部枚举类实现饿汉式立即加载防止new对象，构造私有，写一个公共的方法返回对象占用空间，线程安全 public class Singleto...

99+

2023-01-31

Java单例模式 Java单例模式实现方式
AJAX请求数据及实现跨域的三种方法详解

目录传统方法的缺点:什么是ajax？XMLHttpRequest 对象五步使用法：同步和异步的区别：如何将原生ajax进行封装JS几种跨域方法和原理附：ajax跨域post请求的ja...

99+

2022-11-12
jquery实现Ajax请求的几种常见方式总结

在jQuery中，可以使用以下几种方式实现Ajax请求：1. 使用$.ajax()方法：这是最常见和最灵活的方式。可以通过设置不同的...

99+

2023-08-14

JQuery
Kotlin结合Rxjava+Retrofit实现极简网络请求的方法

前言因为最近正在写的项目集成了两个网络请求框架（Volley and Retrofit）对比之下也是选择了Retrofit。既然选择那自然要让自己以后开发更加省力（就是懒）。于是我在Retrofit中加入了Rxjava，这也是当下蛮流行的一...

99+

2023-05-30

retrofit rxjava kotlin
Java 实现 HTTP 请求的四种方式，你都学会了么？

前言在日常工作和学习中，有很多地方都需要发送HTTP请求，本文以Java为例，总结发送HTTP请求的多种方式 HTTP请求实现过程 GET 创建远程连接设置连接方式（get、post、put…）设置连接超时时间设置响应读取时...

99+

2023-09-20

java http 开发语言
Flutter 将Dio请求转发原生网络库的实现方案

目录背景实现方案实现步骤交互协议注意点背景首先看到标题，相信大家已经血压飙升了，既然都用了Flutter，怎么还用原生的网络库呢？这不是多此一举么。emmmmm，当我看到这个需求的...

99+

2022-11-13
NAT网络地址转换的3种实现方式

NAT网络地址转换的3种实现方式： 1、静态NAT(一对一) 2、动态NAT(多对多) 3、端口多路复用PAT(多对一) 1、静态配置 (1)在内部局部和内部全局地...

99+

2023-01-31

网络地址方式 NAT
Vue实现刷新当前页面的三种方式总结

目录背景思路实现方式1-通过location.reload和$router.go(0)方法方式2-通过空白页面方式3-通过provide和inject背景项目当中如果做新增/修改/...

99+

2023-01-14

Vue刷新当前页面 Vue刷新页面
Android实现TextView中文字链接的4种方式介绍及代码

Android 的实现TextView中文字链接的方式有很多种。总结起来大概有4种： 1.当文字中出现URL、E-mail、电话号码等的时候，可以将TextVie...

99+

2022-06-06

Android
Vue实现hash模式网址方式(就是那种带#的网址、井号url)

目录Vue实现hash模式网址Vue路由中hash模式模式一：mode:‘hash’模式二：mode:‘history’Vue实现ha...

99+

2022-11-13
jQuery+CSS怎样实现前端网页加载进度条的三种方式

这篇“jQuery+CSS怎样实现前端网页加载进度条的三种方式”文章，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要参考一下，对于“jQuery+CSS怎样实现前端网页加载进度条的三种方式”，小编整理了以下知识点，请...

99+

2023-06-06