vue中使用axios.get请求获取的数组length长度为什么是0

可能有以下几个原因： 1. 服务器返回的数据为空数组。 2. 请求的URL地址错误或者服务器端没有处理该URL地址，导致请求失败，返回的数据为空数组。 3. 在处理响应数据时出现了错误，导致获取不到数组长度。可以通过打印请求返回的数据，查看是否真的返回了数组数据。同时可以使用try-catch捕获错误，并在控制台输出错误信息，以便更好地定位问题。

axios.defaults.baseURL = 'http://localhost:8080/book/'; var vm = new Vue({ el: '#app', data: { id: '', bookName:'', flag: false, submitFlag: false, books: [] }, methods:{ handle: async function () { //编辑 var book = { id: this.id, bookName: this.bookName }; await axios.put(book.id, book); await this.queryBooks(); this.id = ''; this.bookName = ''; this.flag = false; }, //编辑处理 toEdit: async function (id) { var response = await axios.get(id); this.id = response.data.id; this.bookName = response.data.bookName; this.flag = true; }, deleteBook: async function (id) { }, queryBooks: async function () { var response = await axios.get(); this.books = response.data; } }, computed:{ total: function () { return this.books.length; } }, watch: { name: function (val) { console.log(val); } }, mounted:function () { this.queryBooks(); } });补全代码

这段代码已经是一个完整的 Vue.js 组件，如果你想在页面中使用这个组件，需要在 HTML 中引入 Vue.js 库，并在页面中添加一个元素作为 Vue.js 组件的挂载点。示例代码如下： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue.js 组件</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> </head> <body> <div id="app"> <table> <thead> <tr> <th>ID</th> <th>书名</th> <th>操作</th> </tr> </thead> <tbody> <tr v-for="(book, index) in books" :key="index"> <td>{{ book.id }}</td> <td>{{ book.bookName }}</td> <td> <button @click="toEdit(book.id)">编辑</button> <button @click="deleteBook(book.id)">删除</button> </td> </tr> </tbody> </table> <div v-if="flag"> <input type="text" v-model="bookName"> <button @click="handle">保存</button> </div> </div> <script> var vm = new Vue({ el: '#app', data: { id: '', bookName: '', flag: false, submitFlag: false, books: [] }, methods: { handle: async function () { // 编辑 var book = { id: this.id, bookName: this.bookName }; await axios.put(book.id, book); await this.queryBooks(); this.id = ''; this.bookName = ''; this.flag = false; }, // 编辑处理 toEdit: async function (id) { var response = await axios.get(id); this.id = response.data.id; this.bookName = response.data.bookName; this.flag = true; }, deleteBook: async function (id) { // 删除 if (confirm('确定删除该书吗？')) { await axios.delete(id); await this.queryBooks(); } }, queryBooks: async function () { var response = await axios.get(); this.books = response.data; } }, computed: { total: function () { return this.books.length; } }, watch: { name: function (val) { console.log(val); } }, mounted: function () { this.queryBooks(); } }); </script> </body> </html> ``` 在上面的示例代码中，我们使用了 Vue.js 的模板语法来渲染表格和表单，使用了 `v-for` 指令来循环渲染每一行数据，使用了 `v-if` 指令来判断表单是否需要显示。在 Vue.js 组件中，我们可以使用 `data` 属性来定义组件的数据，使用 `methods` 属性来定义组件的方法，使用 `computed` 属性来定义组件的计算属性，使用 `watch` 属性来监听组件的数据变化，使用 `mounted` 生命周期钩子来在组件挂载后执行一些操作。

vue统一封装axios请求取消重复请求

在Vue项目中，我们通常会使用axios来发送请求。为了方便管理和维护代码，我们可以将axios请求进行统一封装。首先，我们需要在项目中安装axios： ``` npm install axios --save ``` 然后，我们可以在src目录下新建一个api目录，用来存放所有的接口请求。在api目录下，我们可以新建一个request.js文件，用来封装axios请求： ``` import axios from 'axios'; // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 5000 // 请求超时时间 }); // request拦截器 service.interceptors.request.use(config => { // 在请求发送之前做一些处理 return config; }, error => { // 处理请求错误 console.log(error); Promise.reject(error); }) // respone拦截器 service.interceptors.response.use( response => { // 在接收响应做一些处理，例如统一的错误处理 return response.data; }, error => { console.log('err' + error);// for debug return Promise.reject(error); } ) export default service; ``` 这里我们创建了一个axios实例，并进行了一些配置，例如设置请求超时时间、拦截请求和响应等。并且将其导出，其他地方可以直接引用该实例进行请求。接下来，我们可以在api目录下新建一个模块，例如user.js，用来存放用户相关的接口请求。在user.js中，我们可以这样写： ``` import request from '@/api/request'; export function login(username, password) { return request({ url: '/user/login', method: 'post', data: { username, password } }) } export function getInfo(token) { return request({ url: '/user/info', method: 'get', params: { token } }) } ``` 这里我们引入了之前封装的axios实例，然后对外导出两个方法login和getInfo，分别用来请求登录和获取用户信息的接口。最后，我们可以在Vue组件中使用这些接口，例如： ``` import { login, getInfo } from '@/api/user'; export default { name: 'Login', methods: { handleLogin() { login(this.username, this.password).then(response => { // 处理登录成功的逻辑 getInfo(response.token).then(info => { // 处理获取用户信息成功的逻辑 }) }) } } } ``` 这里我们引入了之前定义的login和getInfo方法，并在handleLogin方法中调用它们。需要注意的是，我们在处理登录成功后，还调用了getInfo方法来获取用户信息。这里我们可以看到，我们可以将多个请求串联起来进行处理。在实际开发中，我们经常会遇到重复请求的问题，例如多次点击提交按钮或者页面切换时进行数据加载等。为了避免重复请求，我们可以对axios进行进一步封装，例如： ``` import axios from 'axios'; // 定义一个空的数组，用来存储每个请求的取消函数和标识 const pending = []; const CancelToken = axios.CancelToken; const removePending = (config) => { for (let i = 0; i < pending.length; i++) { if (pending[i].url === config.url + '&' + config.method) { pending[i].cancel(); // 取消重复请求 pending.splice(i, 1); // 删除已经取消的请求记录 } } } // 创建axios实例 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 5000 // 请求超时时间 }); // request拦截器 service.interceptors.request.use(config => { // 在请求发送之前做一些处理 removePending(config); config.cancelToken = new CancelToken((c) => { pending.push({ url: config.url + '&' + config.method, cancel: c }); }); return config; }, error => { // 处理请求错误 console.log(error); Promise.reject(error); }) // respone拦截器 service.interceptors.response.use( response => { // 在接收响应做一些处理，例如统一的错误处理 removePending(response.config); return response.data; }, error => { console.log('err' + error);// for debug return Promise.reject(error); } ) export default service; ``` 这里我们定义了一个pending数组，用来存储每个请求的取消函数和标识。在每次请求发送之前，我们会先调用removePending函数，用来取消重复请求。在每次请求完成之后，我们会再次调用removePending函数，用来删除已经取消的请求记录。这样就可以避免重复请求的问题了。

阅读全文

vue中 使用axios.get请求获取的数组length长度为什么是0

vue统一封装axios请求 取消重复请求

相关推荐

详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

VUE axios发送跨域请求需要注意的问题

vue解决使用$http获取数据时报错的问题

vue2axios案例

用vue3＋axios+element-puls写，表格中实现批量删除的代码

vue3+axios+antd 点击按钮实现切换小说章节

前端vue3使用setup实现滑轮向下滑动继续发送axios请求

vue遍历一个数组获取id，用id调用后台接口获取相应数组，把所有返回的数组拼接起来，赋值给一个新数组，给出具体代码

vue.js如何获取文件夹里的文件名

Tobit与Probit模型Stata实现代码-最新发布.zip

供AI训练的中文数据集持续更新与AI公司图谱目前的数据集餐饮行业8000问百度知道Alpaca中文数据集计算机领域数据.zip

红警单机版（单机游戏）

最新推荐

详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

VUE axios发送跨域请求需要注意的问题

vue解决使用$http获取数据时报错的问题

Vue前后端不同端口的实现方法

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

"互动学习：行动中的多样性与论文攻读经历"

vue中使用axios.get请求获取的数组length长度为什么是0

vue统一封装axios请求取消重复请求