vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)...

vue-cli3.x中使用axios发送请求,配合webpack中的devServer编写本地mock数据接口(get/post/put/delete)

手把手式笔记

Axios配置

1. 安装 axios

npm install axios

1. 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
//     store.commit('setToken','')
//     window.localStorage.removeItem('token')
//     //跳转登录
//     router.replace({
//         path:"/login"
//     })
// }
return data;
}
return response;
}
)
}

1. main.js中引入axios与其配置文件

import axios from 'axios'
import setaxios from './setaxios'

//Vue全局挂载axios
Vue.prototype.$http=axios
//设置baseUrl
axios.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>&emsp;&emsp;</span>
<button @click="sendPost()">POST</button>
<span>&emsp;&emsp;</span>
<button @click="sendPut()">PUT</button>
<span>&emsp;&emsp;</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中文文档

如有不妥,不解之处,请滴滴我,或在评论区留言

转载于:https://www.cnblogs.com/roseAT/p/11228369.html