axios+qs簡單實現post請求form-data格式
- 有的時候後臺接口以form-data的格式來接收參數，那麼默認的寫法後臺是拿不到參數的，這個時候前端必須得以form-data的格式來傳遞
核心知識
- 1.引入qs
npm install -save qs
#or
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
- 2.引入axios
npm install -save axios
#or
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
- 3axios簡單封裝
//創建一個實例
const $http = axios.create({
baseURL: 'https://api.apiopen.top',
timeout: 3000,
});
//全屏loading加載動畫
let loadingInstance;
$http.interceptors.request.use(
config => {
//請求格式爲form-data時需設置
config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
loadingInstance = vm.$loading({
lock: true,
text: '加載中,請稍後...',
spinner: 'el-icon-loading',
background: 'rgba(255,255,255,0.7)'
});
return config;
},
err => {
return Promise.reject(err);
}
)
$http.interceptors.response.use(
response => {
loadingInstance && loadingInstance.close();
return response.data;
},
err => {
loadingInstance && loadingInstance.close();
return Promise.reject(err);
}
);
- 4.post請求代碼
//對參數進行處理
const data = Qs.stringify({
page:this.page,
count:this.count
})
const { result,code,message } = await $http.post('/getWangYiNews',data)
if(code !== 200 ){
this.$message({
type: 'info',
message: message
});
this.loading = false
return;
}
this.tableData = result;
this.loading = false;
- 5.結果
![在這裏插入圖片描述]()
- 6.簡單的完整代碼(實現分頁+請求loading+模擬刪除+獲取數據)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>axios封裝</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
<!-- 引入樣式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入組件庫 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.4/qs.min.js"></script>
</head>
<body>
<div id="app">
<el-button type="primary" round @click="handleGetWangYiNews">主要按鈕</el-button>
<div style="max-width: 1000px;margin:20px auto;">
<el-table
border
v-loading="loading"
:data="tableData" >
<el-table-column label="時間">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.passtime}}</span>
</template>
</el-table-column>
<el-table-column label="圖片">
<template slot-scope="scope">
<el-image
style="width: 140px; height: 88px"
:src="scope.row.image"
fit="scale-down"></el-image>
</template>
</el-table-column>
<el-table-column label="標題" prop="title"></el-table-column>
<el-table-column label="外鏈">
<template slot-scope="scope">
<el-link type="primary" :href="scope.row.path" >外鏈</el-link>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">刪除
</el-button>
</template>
</el-table-column>
</el-table>
<div class="block">
<el-pagination
style="text-align: right;"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="page"
:page-sizes="[5, 10, 15, 20]"
:page-size="5"
layout="total,sizes, prev, pager, next, jumper"
:total="20"
>
</el-pagination>
</div>
</div>
</div>
<script>
//創建一個實例
const $http = axios.create({
baseURL: 'https://api.apiopen.top',
timeout: 3000,
});
let loadingInstance;
$http.interceptors.request.use(
config => {
config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
loadingInstance = vm.$loading({
lock: true,
text: '加載中,請稍後...',
spinner: 'el-icon-loading',
background: 'rgba(255,255,255,0.7)'
});
return config;
},
err => {
return Promise.reject(err);
}
)
$http.interceptors.response.use(
response => {
loadingInstance && loadingInstance.close();
return response.data;
},
err => {
loadingInstance && loadingInstance.close();
return Promise.reject(err);
}
);
const vm = new Vue({
el: "#app",
data: {
tableData:[],
loading:true,
page: 1,
count:5
},
mounted() {
this.handleGetWangYiNews()
},
methods: {
async handleGetWangYiNews() {
const data = Qs.stringify({
page:this.page,
count:this.count
})
const { result,code,message } = await $http.post('/getWangYiNews',data)
if(code !== 200 ){
this.$message({
type: 'info',
message: message
});
this.loading = false
return;
}
this.tableData = result;
this.loading = false;
},
handleDelete(index,row){
const _self = this;
setTimeout(function(){
_self.$message({
type: 'success',
message: '刪除成功!'
});
_self.handleGetWangYiNews()
},2000)
},
handleSizeChange(e){
this.count = e;
this.handleGetWangYiNews()
},
handleCurrentChange(e){
this.page = e;
this.handleGetWangYiNews()
}
}
})
</script>
</body>
</html>
- 代碼效果
![在這裏插入圖片描述]()
