Vue2配置Axiosapi接⼝调⽤⽂件的⽅法
前情回顾
在上⼀篇中，我们通过配置基本的信息，已经让我们的项⽬能够正常的跑起来了。但是，这⾥还没有涉及到 AJAX 请求接⼝的内容。
vue 本⾝是不⽀持 ajax 接⼝请求的，所以我们需要安装⼀个接⼝请求的 npm 包，来使我们的项⽬拥有这个功能。
这其实是⼀个重要的 unix 思想，就是⼀个⼯具只做好⼀件事情，你需要额外的功能的时候，则需要安装对应的软件来执⾏。如果你以前是⼀个 jquery 重度⽤户，那么可能理解这个思想⼀定要深⼊的理解。
⽀持 ajax 的⼯具有很多。⼀开始，我使⽤的是 superagent 这个⼯具。但是我发现近⼀年来，绝⼤多数的教程都是使⽤的axios 这个接⼝请求⼯具。其实，这本来是没有什么差别的。但是为了防⽌你们在看了我的博⽂和其他的⽂章之后，产⽣理念上的冲突。因此，我也就改⽤ axios 这个⼯具了。
本⾝， axios 这个⼯具已经做了很好的优化和封装。但是，在使⽤的时候，还是略显繁琐，因此，我重新封装了⼀下。当然，更重要的是，封装 axios 这个⼯具是为了和我以前写的代码的兼容。不过我封装得很好，也推荐⼤家使⽤。
封装 axios ⼯具，编辑 src/api/index.js ⽂件
⾸先，我们要使⽤ axios ⼯具，就必须先安装 axios ⼯具。执⾏下⾯的命令进⾏安装
npm install axios -D
由于宿舍条件不好，这⾥使⽤ cnpm 替代
这样，我们就安装好了 axios ⼯具了。
还记得我们在第三篇博⽂中整理的系统结构吗？我们新建了⼀个 src/api/index.js 这个空⽂本⽂件，就那么放在那⾥了。这⾥，我们给它填写上内容。
// 配置API接⼝地址
var root = '/api/v1'
// 引⽤axios
var axios = require('axios')
// ⾃定义判断元素类型JS
function toType (obj) {
return ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
}
// 参数过滤函数
function filterNull (o) {
for (var key in o) {
if (o[key] === null) {
delete o[key]
}
if (toType(o[key]) === 'string') {
o[key] = o[key].trim()
} else if (toType(o[key]) === 'object') {
o[key] = filterNull(o[key])
} else if (toType(o[key]) === 'array') {
o[key] = filterNull(o[key])
}
}
return o
}
/
*
接⼝处理函数
这个函数每个项⽬都是不⼀样的，我现在调整的是适⽤于
/api/v1 的接⼝，如果是其他接⼝
需要根据接⼝的参数进⾏调整。参考说明⽂档地址：
/topic/5378720ed6e2d16149fa16bd
主要是，不同的接⼝的成功标识和失败提⽰是不⼀致的。
另外，不同的项⽬的处理⽅法也是不⼀致的，这⾥出错就是简单的alert
*/
function apiAxios (method, url, params, success, failure) {
if (params) {
params = filterNull(params)
}
axios({
method: method,
app接口测试工具url: url,
data: method === 'POST' || method === 'PUT' ? params : null,
params: method === 'GET' || method === 'DELETE' ? params : null,
baseURL: root,
withCredentials: false
})
.then(function (res) {
if (res.data.success === true) {
if (success) {
success(res.data)
}
} else {
if (failure) {
failure(res.data)
} else {
window.alert('error: ' + JSON.stringify(res.data))
}
}
})
.catch(function (err) {
let res = sponse
if (err) {
window.alert('api error, HTTP CODE: ' + res.status)
}
})
}
// 返回在vue模板中的调⽤接⼝
export default {
get: function (url, params, success, failure) {
return apiAxios('GET', url, params, success, failure)
},
post: function (url, params, success, failure) {
return apiAxios('POST', url, params, success, failure)
},
put: function (url, params, success, failure) {
return apiAxios('PUT', url, params, success, failure)
},
delete: function (url, params, success, failure) {
return apiAxios('DELETE', url, params, success, failure)
}
}
好，我们写好这个⽂件之后，保存。
2017年10⽉20⽇补充，删除了评论中有⼈反映会出错的 return ，确实这个 return 是没有什么作⽤的。不过我这边确实没出错。没关系啦，本来就没啥⽤，只是⼀个以前的不好的习惯代码。
但就是这样，我们还不能再 vue 模板⽂件中使⽤这个⼯具，还需要调整⼀下 main.js ⽂件。
调整 main.js 绑定 api/index.js ⽂件
这次呢，我们没有上来就调整 main.js ⽂件，因为原始⽂件就配置得⽐较好，我就没有刻意的想要调整它。
原始⽂件如下：
import Vue from 'vue'
import App from './App'
import router from './router'
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
我们插⼊以下代码：
// 引⽤API⽂件
import api from './api/index.js'
/
/ 将API⽅法绑定到全局
Vue.prototype.$api = api
也就是讲代码调整为：
import Vue from 'vue'
import App from './App'
import router from './router'
// 引⽤API⽂件
import api from './api/index.js'
// 将API⽅法绑定到全局
Vue.prototype.$api = api
/
* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
好了，这样，我们就可以在项⽬中使⽤我们封装的 api 接⼝调⽤⽂件了。
测试⼀下看看能不能调通
我们来修改⼀下 src/page/index.vue ⽂件，将代码调整为以下代码：
<template>
<div>index page</div>
</template>
<script>
export default {
created () {
this.$('topics', null, r => {
console.log(r)
})
}
}
</script>
好，这⾥是调⽤ 的 topics 列表接⼝，并且将结果打印出来。
我们在浏览器中打开控制台，看看 console 下⾯有没有输出⼊下图⼀样的内容。如果有的话，就说明我们的接⼝配置已经成功了。
< 接⼝数据演⽰
好，如果你操作正确，代码没有格式错误的话，那么现在应该得到的结果是和我⼀样的。如果出错或者怎么样，请仔细的检查代码，看看有没有什么问题。
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
发表评论