vue+axios+element-ui实战（二）--axios请求封装

上一篇我们搭建了vue项目的简单框架，现在来讲一下请求后端接口的封装，我们这里用的是axios，大家可以查看中文文档：https://www.kancloud.cn/yunye/axios/234845

安装：

[code]npm install axios

安装完成后，我们先在src目录下新建一个utils文件夹，然后在utils里面新建request.js文件，对照着axios中文文档进行封装：

[code]import axios from 'axios'
import { Message, Loading } from 'element-ui'
import router from '@/router'

// create an axios instance
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 30000 // request timeout
})

// request interceptor
// 添加请求拦截器
service.interceptors.request.use(config => {
// Do something before request is sent
config.headers['Cache-Control'] = 'no-cache' // ie清缓存，否则无法正常刷新
config.headers['Pragma'] = 'no-cache' // HTTP/1.1版本，ie清缓存，否则无法正常刷新

if (config.formType && config.formType === 1) {
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'

config.transformRequest = [function (data) {
// Do whatever you want to transform the data
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret.substring(0, ret.length - 1)
}]
}
if (config.showLoading) {
showFullScreenLoading()
}
return config
}, error => {
// Do something with request error
Promise.reject(error)
})

// respone interceptor
// 添加响应拦截器
service.interceptors.response.use(
response => {
if (response.config.showLoading) {
tryHideFullScreenLoading()
}
var res = response.data
// 以下请根据后端返回具体格式修改!!!!!
if (res.code === 200) {
return res
} else {
Message({
message: res.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(res)
}
},
error => {
// 错误处理
tryHideFullScreenLoading()
Message({
message: error.message,
type: 'error',
duration: 5 * 1000
})
return Promise.reject(error)
}
)

// 加载封装
let loading
function startLoading () {
loading = Loading.service({
lock: true,
text: '加载中',
background: 'rgba(0, 0, 0, 0.7)'
})
}
// 关闭加载
function endLoading () {
loading.close()
}
let needLoadingRequestCount = 0
export function showFullScreenLoading () {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}

export function tryHideFullScreenLoading () {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
endLoading()
}
}
export default service

然后，我们配置一下config文件下的index.js文件里面的proxyTable：

[code]proxyTable: {
'/api': {
target: 'https://api.apiopen.top/',
secure: false,  // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {
'^/api': '/'
}
}
}

这样，我们可以把接口都统一管理，在src文件夹下新建文件夹api，新建index.js文件，把接口请求都放在这里：

[code]import request from '@/utils/request'

export function musicBroadcastingDetails (params) {
return request({
url: `musicBroadcastingDetails?channelname=${params.channelname}`,
method: 'get',
data: params,
showLoading: true // loading效果
})
}

在具体页面上调用：

[code]<template>
<div>
<div style="padding: 30px 0; border-bottom: 1px solid #ccc;">
<div>请求接口示例</div>
<div>element UI表格形式展示</div>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="artist"
label="歌手"
width="180">
</el-table-column>
<el-table-column
prop="title"
label="歌曲"
width="180">
</el-table-column>
<el-table-column
prop="thumb"
label="歌曲地址">
</el-table-column>
</el-table>
</div>
</div>
</template>

<script>
import { musicBroadcastingDetails } from '@/api/index.js'
export default {
name: "index",
data() {
return {
tableData: [],
}
},
mounted() {
this.requestApi()
},
methods: {
requestApi() {
let channelname = 'public_tuijian_spring'
musicBroadcastingDetails({channelname}).then( res => {
let data1 = JSON.stringify(res) // 因示例调用网上开放接口返回json数据太多，需做转换
let data = JSON.parse(data1)
this.tableData = data.result.songlist

for (let i in data.result.songlist) {
this.songDatas.push({artist: data.result.songlist[i].artist, title: data.result.songlist[i].title, thumb: data.result.songlist[i].thumb})
}
})
},
}
}
</script>

<style scoped lang="scss">
</style>

效果如下：