vue3中使用axios
Posted 普通网友
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue3中使用axios相关的知识,希望对你有一定的参考价值。
vue3中使用axios
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 API
-
step3. 然后在main.js中导入我们编写axiosInstance.js文件,全局配置一下axios的引用。
//main.js import createApp from 'vue' import App from './App.vue' import axios from '@/plugins/axiosInstance.js' const app = createApp(APP); //建立一个vue3app app.mount('#app'); //将这个vue3app全局挂载到#app元素上 app.config.globalProperties.$axios=axios; //配置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 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
//导入mock import './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>
-
-
结果
vue中使用axios最详细教程
vue中使用axios最详细教程:https://www.cnblogs.com/nogodie/p/9853660.html
前提条件:vue-cli 项目
安装:
npm npm
在main.js导入:
// 引入axios,并加到原型链中 import axios from ‘axios‘; Vue.prototype.$axios = axios; import QS from ‘qs‘ Vue.prototype.qs = QS;
封装好的axios,拿走不送:(最好是在main.js同级目录创建一个 https.js 文件,复制粘贴下面代码,改 接口地址 就可以用)
import axios from ‘axios‘ import qs from ‘qs‘ axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded;charset=UTF-8‘; //配置请求头 axios.defaults.baseURL = ‘‘; //配置接口地址 //POST传参序列化(添加请求拦截器) axios.interceptors.request.use((config) => //在发送请求之前做某件事 if(config.method === ‘post‘) config.data = qs.stringify(config.data); return config; ,(error) => console.log(‘错误的传参‘) return Promise.reject(error); ); //返回状态判断(添加响应拦截器) axios.interceptors.response.use((res) => //对响应数据做些事 if(!res.data.success) return Promise.resolve(res); return res; , (error) => console.log(‘网络异常‘) return Promise.reject(error); ); //返回一个Promise(发送post请求) export function fetchPost(url, params) return new Promise((resolve, reject) => axios.post(url, params) .then(response => resolve(response); , err => reject(err); ) .catch((error) => reject(error) ) ) ////返回一个Promise(发送get请求) export function fetchGet(url, param) return new Promise((resolve, reject) => axios.get(url, params: param) .then(response => resolve(response) , err => reject(err) ) .catch((error) => reject(error) ) ) export default fetchPost, fetchGet,
开发环境一般要跨域,解决跨域问题(设置代理):vue-cli 3.0的在 package.json 同级目录新建一个 vue.config.js 文件,加入下面代码,其他版本找到配置文件的devServer加入代码
:
module.exports = //axios域代理,解决axios跨域问题 baseUrl: ‘/‘, devServer: proxy: ‘‘: target: ‘http://192.168.0.108:8090‘, changeOrigin: true, ws: true, pathRewrite:
修改完后记得重启项目应用配置
然后就到收获的时候了,在要请求的vue模块中导入并使用:
import https from ‘../https.js‘ // 注意用自己的路径 // 请求后台数据================== loginPost: function () let params =‘username‘: ‘admin‘, ‘password‘: ‘admin123‘, ‘rememberMe‘: ‘true‘,‘isMobile‘:‘1‘ https.fetchPost(‘/login‘,params ).then((data) => this.base.token = data.data.token // console.log("this.base.tokenthis.base.token",this.base.token) this.indexPost2(this.rres) ).catch(err=> console.log(err) ) , indexPost2:function (date) var this_ = this this_.check = false var jobj =data:‘menuDate‘: date,‘token‘:this.base.token let string = JSON.stringify(jobj) let params = dailyInfo:string https.fetchPost(‘/meals/mobile/getDailyMenuByDate‘, params) .then((data) => this_.base.indexData = data this_.check = true // console.log(‘thenthenthenthen‘,data) ) .catch((err)=> console.log(err) ) , // ================================================ ,
文字不是很多,但重要的都在这,看代码的注释就行了
不懂的可以留言,我们一起探讨
以上是关于vue3中使用axios的主要内容,如果未能解决你的问题,请参考以下文章