vue-cli3.x中使用axios發送請求,配合webpack中的devServer編寫本地mock數據接口(get/post/put/delete)
手把手式筆記
Axios配置
- 安裝 axios
npm 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
// store.commit('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全局掛載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>  </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>
示例效果圖
參考文檔
如有不妥,不解之處,請滴滴我,或在評論區留言