咋么做网站,做网站防护的网站,商丘网络推广外包,贵州省城乡建设局网签网站-2023.05.18更新#xff0c;修复了之前demo中存在的3个问题。现在可以无bug跑起来。
1.axios在vue3.x中的基础入门使用
在不涉及使用axios进行请求拦截以及响应拦截的场景下#xff0c;axios的使用可以简化为以下步骤。 step1. 使用npm安装axios
npm install axios
step…-2023.05.18更新修复了之前demo中存在的3个问题。现在可以无bug跑起来。
1.axios在vue3.x中的基础入门使用
在不涉及使用axios进行请求拦截以及响应拦截的场景下axios的使用可以简化为以下步骤。 step1. 使用npm安装axios
npm install axios
step2. 我们将要使用的axios实例单独编写成一个js文件文件夹可以建立在src/plugins/自己选择建立在什么地方。命名为 axiosInstance.js
//axiosInstance.js
//导入axios
import 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 APIstep3. 然后在main.js中导入我们编写axiosInstance.js文件全局配置一下axios的引用。
//main.js
import { createApp } from vue
import App from ./App.vue
import axios from /plugins/axiosInstance.jsconst app createApp(APP); //建立一个vue3app
app.mount(#app); //将这个vue3app全局挂载到#app元素上
app.config.globalProperties.$axiosaxios; //配置axios的全局引用
step4. 就是在我们需要进行aixos请求的地方进行使用了为了方便演示使用mockjs进行模拟后端接口
以下是mockjs的基础入门使用 安装mockjs
npm install mockjs然后在我们的src/ 路径下建立一个用于存放mock模拟数据的文件就叫index.js吧此时层级关系为
/src/mock/index.js, 在 这个index.js中编写我们关于mock模拟数据的配置以及需要请求的数据如下
// src/mock/index.js
import Mock from 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
//导入mock
import ./mock/mockjs简单配置也完成了下面就在创建的初始 /about 页面简单编写一个请求测试是否成功
//About.vue
templatediv classabouth1This is an about page/h1button clickgetData()test axios 请求数据/buttonp这是请求到的数据{{testData.list}}/p/div
/template
script
import { reactive } from vue
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
结果
