介绍为什么要使用vue cd src #切换到src目录
mkdir apis #新建api文件 <李> cd apis #切换到api目录
touch info.js member.js user_info.js #新建js文件 src
,api
,,info.js
,,member.js
,,user_info.js
main.js才能 touch http.js //新建http。js文件 import axios 得到& # 39;axios& # 39;//创建axios的一个实例,
var instance =, axios.create ({
baseURL: xxx,才能
超时才能:6000
})//- - - - - - - - - - - - - - - - - -女人;一,请求拦截器,忽略
instance.interceptors.request.use (function (配置),{
return 才能;配置;
},,function (错误),{//,才能对请求错误做些什么
,,
return 才能Promise.reject(错误);
});//- - - - - - - - - - - - - - - - -作用;二、响应拦截器,忽略
instance.interceptors.response.use (function (响应),{
,,
return 才能;response.data;
},,function (错误),{//,才能对响应错误做点什么
return 才能Promise.reject(错误);
});
export default function (url,方法,还以为;data =, null), {
时间=method 才能;method.toLowerCase ();
if 才能;(method ==, & # 39;文章# 39;),{
,,,return instance.post (url,数据)
},才能else if (method ==, & # 39;得到# 39;),{
,,,return instance.get (url,,{,参数:data })
},才能else if (method ==, & # 39;删除# 39;),{
,,,return instance.delete (url,,{,参数:data })
}才能else 如果(method ==, & # 39;把# 39;){
,,,return instance.put (url,数据)
}{其他才能
,,,console.error(& # 39;未知的方法# 39;+方法)
,,,return 错误的
,,}
} <李> /* *
,*使用es6的export 默认导出了一个函数,导出的函数代替axios去帮我们请求数据,
,*函数的参数及返回值如下:
,* @param {字符串},method 请求的方法:get、post、删除
,* @param {字符串},url ,,请求的网址:
,* @param {对象},data ,请求的参数
,* @returns {承诺},,,返回一个承诺对象,其实就相当于axios请求数据的返回值
,*/export default function (url,方法,还以为;data =, null), {
时间=method 才能;method.toLowerCase ();
if 才能;(method ==, & # 39;文章# 39;),{
,,,return instance.post (url,数据)
},才能else if (method ==, & # 39;得到# 39;),{
,,,return instance.get (url,,{,参数:data })
},才能else if (method ==, & # 39;删除# 39;),{
,,,return instance.delete (url,,{,参数:data })
}才能else 如果(method ==, & # 39;把# 39;){
,,,return instance.put (url,数据)
}{其他才能
,,,console.error(& # 39;未知的方法# 39;+方法)
,,,return 错误的
,,}
}
怎么在vue项目中实现一个接口管理功能吗?很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。
vue是一款友好的,多用途且高性能的JavaScript框架,使用vue可以创建可维护性和可测试性更强的代码库,vue允许可以将一个网页分割成可复用的组件,每个组件都包含属于自己的HTML, CSS, JavaScript,以用来渲染网页中相应的地方,所以越来越多的前端开发者使用vue。
1。首先,在src目录下新建一个文件夹,我这里叫api,后台提供的所有接口都在这里定义
2。第二步,按照后台文档划分的模块新建js文件,这里简单举个例子
资讯模块:信息。李js
<李>登录注册模块:成员。李js
<李>个人信息模块user_info.js
<李>....
现在的目录大概是这个样子
3。第三步,需要引入axios做相应的配置
在api下新建一个文件夹,叫http。js,在里面做axios相应的配置
配置如下:
配置简要说明一下:
引入axios,新建了个axios的实例(axios的实例的axios的功能一样)
<李>请求拦截器响应拦截器不是本文重点,略过
<李>第30行代码及以后是重点,拉出来重点看一下
