VueJs构建Axios界面请求工具

axios简介

Axios是基于Promise的浏览器和nodejs的HTTP客户端，具有以下特点：

从Browser创建XMLHttpRequest从node.js发送http请求支持Promise API拦截请求并响应转换请求和响应数据取消请求，自动转换JSON数据。客户端支持防止CSRF/XSRF。在前一章中，我们了解了项目的目录结构，并对项目的目录结构进行了一些调整，这使得项目能够再次运行。今天，我们将构建一个api接口调用工具Axios。Vue本身不支持ajax调用，所以如果需要这些功能，就需要安装相应的工具。

有很多工具支持ajax请求，比如superagent和axios。今天我们用的是axios，因为听说最近网上的教程书大部分都用axios。axios本身已经进行了优化和打包，但使用起来仍然很麻烦，所以让我们重新打包。

安装Axios工具

cnpm安装axios -D

安装时，请务必切换到我们的项目根目录，然后运行安装命令。如果系统提示您上述信息，则安装完成。

打包Axios工具

编辑src/api/index.js文件(上一章整理目录结构时，我们在src/api/目录中创建了一个空的index.js文件)，现在我们填写这个文件的内容。

//配置API接口地址varroot=' https://cnodejs.org/API/v1'//reference axio svar axios=require(' axios ')//自定义判断元素类型js函数为type(obj){ return({ }). tostring . call(obj)。匹配(/\ S ([a-za-z])/) [1]。to lower case()}//参数筛选器函数filter null(o){ for(var key in o){ if(o[key]==null){ delete o[key]} if(to type(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 }/*接口处理程序。该功能的每个项目都不同。我正在调整适合https://cnodejs.org/api/v1的界面。如果是其他接口，需要根据接口的参数进行调整。参考文档地址：https://cnodejs.org/topic/5378720ed6e2d16149fa16bd.主要原因是不同界面的成功标记和失败提示不一致。另外，不同项目的处理方法也不一致，这里的错误只是alert */function apiaxios(方法、URL、参数、成功、失败){ if(params){ params=filterNull(params)} axios({ method : method，url: url，data : method==' POST ' | | method==' PUT '？params : null，params :方法==='GET' ||方法==='DELETE '？params : null，baseURL: root，withCredentials: false })。然后(函数(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=err . response if(err){ window . alert(' API error，httpcode : ' RES . status)}//返回调用接口export default { GET 3360 function(url，params，成功，失败){ return apiAxios('GET '，URL，params，成功，失败)}，post: function (url，params，成功，失败){ return apiAxios('POST，URL，params，成功，失败)}，put:

配置Axios工具

在使用它之前，我们需要在src/main.js中做一个简单的配置让我们先来看看原来的main.js文件。

//要用“导入”命令加载的某视频剪辑软件构建版本//(仅运行时或独立)已在webpack.base.conf中用别名进行了设置。从“Vue”导入Vue "从应用导入"。/App "从导入路由器"。/router ' Vue。配置。生产提示=false/* eslint-禁用no-new */new Vue({ El : ' # App '，路由器，模板： 'App/'，组件： { App } })修改为：

//要用“导入”命令加载的某视频剪辑软件构建版本//(仅运行时或独立)已在webpack.base.conf中用别名进行了设置。从“Vue”导入Vue "从应用导入"。/App "从导入路由器"。/路由器'//引用应用程序接口文件从""导入api ./api/index.js'//将应用程序接口方法绑定到全局Vue。原型。$ API=APIvue。配置。生产提示=假/* eslint-禁用无新*/新Vue({ El : ' # App '，路由器，模板： 'App/'，组件： { App }})通过以上的配置，我们就可以在项目中使用axios工具了，接下来我们来测试一下这个工具。

使用Axios工具

我们来修改一下页面/索引文件，将代码调整为以下代码：

模板divindex页面/div/templatescript导出默认值{ created(){ this .$api.get('topics '，null，r={ console.log(r) }) }}/script我们在Index.vue中向浏览器的控制台输入一些接口请求到的数据，如果你和我也一样，那说明我们的接口配置完成正确。如下图：

如果你是按我的操作一步一步来，那最终结果应该和我一样。如果出错请仔细检查代码。