vue3中使用axios(vue3中使用window方法)

发布时间：2024-01-17

vue3中使用axios vue3中使用axios1.axios在vue3.x中的基础入门使用

推荐整理分享vue3中使用axios(vue3中使用window方法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue3.0使用axios,vue3中使用require,vue3中使用pinia,vue3中使用pinia,vue3中使用for循环引用多个组件,vue3中使用gis地图,vue3中使用for循环引用多个组件,vue3中使用for循环引用多个组件,内容如对您有帮助，希望把文章链接给更多的朋友！

在不涉及使用axios进行请求拦截以及响应拦截的场景下，axios的使用可以简化为以下步骤。

step1. 使用npm安装axios

npm install axios

step2. 我们将要使用的axios实例单独编写成一个js文件，文件夹可以建立在src/plugins/（自己选择建立在什么地方）。命名为： axiosInstance.js

//axiosInstance.js//导入axiosimport axios from 'axios'//使用axios下面的create([config])方法创建axios实例，其中config参数为axios最基本的配置信息。const API = axios.create({baseUrl:'http://localhost:8080' //请求后端数据的基本地址，自定义timeout: 2000 //请求超时设置，单位ms})//导出我们建立的axios实例模块，ES6 export用法export default API

step3. 然后在main.js中导入我们编写axiosInstance.js文件，全局配置一下axios的引用。

//main.jsimport { createApp } from 'vue'import App from './App.vue'import axios from '@/plugins/axiosInstance.js'const app = createApp(APP); //建立一个vue3appapp.mount('#app'); //将这个vue3app全局挂载到#app元素上app.config.globalProperties.$axios=axios; //配置axios的全局引用 vue3中使用axios(vue3中使用window方法)

step4. 就是在我们需要进行aixos请求的地方进行使用了，为了方便演示，使用mockjs进行模拟后端接口，

以下是mockjs的基础入门使用

安装mockjs

npm install mockjs

然后在我们的src/ 路径下建立一个用于存放mock模拟数据的文件，就叫index.js吧，此时层级关系为：

/src/mock/index.js, 在这个index.js中编写我们关于mock模拟数据的配置以及需要请求的数据，如下：

// src/mock/index.jsimport Mock form 'mockjs' //导入mockjs//使用Mock下面提供的mock方法进行需要模拟数据的封装//参数1，是需要拦截的完整请求地址，参数2，是请求方式，参数3，是请求的模拟数据const testData = Mock.mock('http://localhost:8080/test','get',{status:200, //请求成功状态码dataList:[1,2,3,4,5,6,7,8,9,10] //模拟的请求数据})//导出export default testData

在main.js里面全局引用一下我们的编写的相关mockjs

//导入mockimport './mock/'

mockjs简单配置也完成了，下面就在创建的初始 /about 页面简单编写一个请求测试是否成功

//About.vue<template> <div class="about"> <h1>This is an about page</h1> <button @click="getData()">test axios 请求数据</button> <p>这是请求到的数据{{testData.list}}</p> </div></template><script>import { reactive } from '@vue/reactivity'import API from "../plugins/axiosInstance"export default{ name:'About', setup(){ //数据 const testData = reactive({ list:[] }); //测试请求方法 const getData = function(){ API({ url:'/test', method:'get' }).then((res)=>{ alert('请求成功!'); testData.list = res.data.dataList; }); } return{ testData, getData, } }}</script>

结果

本文链接地址:https://www.jiuchutong.com/zhishi/299917.html 转载请保留说明！

上一篇：Java面试题及答案整理汇总（2023最新版）(java面试题及答案下载)

下一篇：（pytorch进阶之路）IDDPM之diffusion实现(pytorch教程)