vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)
手把手式笔记
Axios配置
安装 axiosnpm install axios
main.js同级目录新建axios配置文件setaxios.js
import axios from 'axios'// import store from './store' //vuex// import router from './router' //路由export default function setAxios() {//拦截request请求axios.interceptors.request.use(config=>{console.log(config.data);return config;})//拦截response回调axios.interceptors.response.use(response=>{if(response.status===200){const data=response.data// if (data.code === 400){////登录过期,权限不足//console.warn("登陆过期");////清除token//mit('setToken','')//window.localStorage.removeItem('token')////跳转登录//router.replace({// path:"/login"//})// }return data;}return response;})}
main.js中引入axios与其配置文件
import axios from 'axios'import setaxios from './setaxios'//Vue全局挂载axiosVue.prototype.$http=axios//设置baseUrlaxios.defaults.baseURL = '/api'
devServer中配置本地mock数据接口(vue.config.js文件中)参考webpack中文文档
module.exports = {publicPath: './',outputDir: 'dist',assetsDir: 'static',configureWebpack: {devServer: {contentBase: './build',//项目基本访问目录host: 'localhost',//服务器ip地址port: 8088,//端口open: true, //自动打开页面hot: true,//模块热替换hotOnly: true,//只有热更新不会刷新页面//mock数据接口部分 关键部分before(app) {const bodyParser = require('body-parser')app.use(bodyParser.json()) //通过bodyParser获取req.body)/*** testGet*/app.get('/api/test/get',(req,resp)=>{console.log(req.query);resp.json({"code":111,"msg":"get测试成功"})})/*** testPost*/app.post('/api/test/post', (req, resp) => {console.log(req.body);resp.json({"code": 123,"msg": "post测试成功"})})/*** testPut*/app.put('/api/test/put', (req, resp) => {console.log(req.body)resp.json({"code": 123,"msg": "put测试成功"})})/*** testDelete*/app.delete("/api/test/delete",(req,resp)=>{console.log(req.body);resp.json({"code":666,"msg":"delete测试成功"})})}}}}
通过上述配置操作即可完成本地mock数据接口编写,接下来是axios发送http请求测试示例
restful风格接口axios发送请求示例 参考axios中文文档
methods: {sendGet: function() {this.$http.get("/test/get", {params: {param1: "get字符串",param2: 13131}}).then(res => {console.log(res);});},sendPost: function() {this.$http.post("/test/post", {param1: "post字符串",param2: 13131}).then(res => {console.log(res);});},sendPut: function() {this.$http.put("/test/put", {param1: "put字符串",param2: 13131}).then(res => {console.log(res);}).catch(err => {console.log(err);});},sendDelete: function() {this.$http.delete("/test/delete", {data: {param1: "delete字符串",param2: 13131}}).then(res => {console.log(res);}).catch(err => {console.log(err);});}}
完整测试demo(Test.vue)
<template><div><h2>HTTP-Request</h2><button @click="sendGet()">GET</button><span>  </span><button @click="sendPost()">POST</button><span>  </span><button @click="sendPut()">PUT</button><span>  </span><button @click="sendDelete()">DELETE</button><hr /></div></template><script>export default {name: "testPage",data() {return {};},methods: {sendGet: function() {this.$http.get("/test/get", {params: {param1: "get字符串",param2: 13131}}).then(res => {console.log(res);});},sendPost: function() {this.$http.post("/test/post", {param1: "post字符串",param2: 13131}).then(res => {console.log(res);});},sendPut: function() {this.$http.put("/test/put", {param1: "put字符串",param2: 13131}).then(res => {console.log(res);}).catch(err => {console.log(err);});},sendDelete: function() {this.$http.delete("/test/delete", {data: {param1: "delete字符串",param2: 13131}}).then(res => {console.log(res);}).catch(err => {console.log(err);});}}};</script>
示例效果图
参考文档
webpack中文文档
Axios中文文档
如有不妥,不解之处,请滴滴我,或在评论区留言
如果觉得《vue-cli3.x中使用axios发送请求 配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)...》对你有帮助,请点赞、收藏,并留下你的观点哦!