axios接口文档,axios菜鸟教程
从零开始的vue后台管理-连接数据库
首先现在vue项目里面找到config这个文件，配置里面的index.js
然后再配置生产环境的参数，也就是dev.env.js
最后在prod.env.js里面配置
给config/index.js里面的内容做个注释
我在src里面创建了一个文件夹axios，api.js是我封装axios方法的文件，globalData.js是存放后台接口的文件。
在vue项目中，和后台交互获取数据这块，我们通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。所以vue官方也是果断放弃了对其官方库vue-resource的维护，直接推荐我们使用axios库。
globalData.js
然后是最重要的引用（important）
import api from '@/axios/api.js'
import gd from '@/axios/globalData.js'
config/index里面host: 'localhost', 需要注意，否则运行会underfind
vue-cli跨域 vue使用axios请求接口怎么操作？
全局使用Axios
首先，在自己建的公用方法的文件中new一个新的HttpUtil.js文件。以下为HttpUtil.js的内容：
var axios = require('axios')// 配置项目根如路径var root = ''// axios请求function httpApi (method, url, params) { return new Promise((resolve, reject) = { axios({ method: method, url: url, data: method === 'POST' || method === 'PUT' ? params : null, params: method === 'GET' || method === 'DELETE' ? params : null, baseURL: root, withCredentials: false }).then(
(response) = {
resolve(response)
}
).catch(
(error) = {
reject(error)
}
)
})
}// 返回在vue模板中的调用接口export default { get: function (url, params) { return httpApi('GET', url, params)
}, post: function (url, params) { return httpApi('POST', url, params)
}, put: function (url, params) { return httpApi('PUT', url, params)
}, delete: function (url, params) { return httpApi('DELETE', url, params)
}
}
vue项目中axios请求统一配置了超时时间，单独接口请求时重设超时时间
场景：通过axios.create 对axios做拦截器处置，统一设置了超时时间，文件上传或者文件合成需要单独处理
根据官网推荐： axios配置官网
具体实现：
默认请求时间接口请求：
重设超时时间的接口请求：
vue封装接口
封装接口
首先创建一个idnex.js文件
import axios from 'axios'
/* 创建一个axios实例化对象instance */
var instance = axios.create({
/* 基础路径 /
baseURL: 'url‘,
/设置超时时间 */timeout: 5000});
instance.interceptors.request.use(
config = {
localStorage.token (config.headers.Authorization = localStorage.token)
return config
},
error = {
return Promise.error(error)
}
)
axios.interceptors.response.use(response = {
return response
},
error = {
return error
})
/* 参数methods默认值是get，path表示具体路径，post需要给data传参默认值是空对象 get请求需要给params传参默认值是空对象 */
export const httpServe = (path,params={},method="get",data={})={
return new Promise((resolve,reject)={
instance({
method,
url:path,
params,/* get方法 */
data/* post方法 */
})
.then(res={
resolve(res)
})
.catch(err={
reject(err)
})
})
}
然后创建request.js文件写方法
import {httpServe} from '@/http/index.js'
/* 登录 */
export const loginPost = (path,data)=httpServe(path,{},'post',data)
/* 用户列表 */
export const usersGet = (path,params)=httpServe(path,params)
/* 获取左侧菜单列表 */
export const menusGet = (path,params)=httpServe(path,params)
/* 添加用户 */
export const addusersPost = (path,data)=httpServe(path,{},'post',data)
使用axios获取数据并渲染到HTML页面
第一种：
? ?比较常见的就是直接把字符串拼接，然后插入到元素中。
?
var?html=''?+?data.num?+?''?+?data.floor?+?''?+?data.name?+?''?+?data.money?+?'';
elem[removed]=html；
? ?第二种：
? ?与第一种大致，先创建对象，然后添加到外层对象中
node=document.createElement("LI"?textnode=document.createTextNode("Water""myList").appendChild(node);
? 第三种：
? 可以用网上mvvm框架，数据绑定比如：angular ,vue等 这里不举例子了 哈哈
? 第四种：
? 模板的比如 (template.js)
[removed]????????????var?viewCommand?=?function()?{????????????????var?tpl?=?{
product:?["",????????????????????????"",????????????????????????"{#",????????????????????????""
].",????????????????????????"",????????????????????????#{##{##",????????????????????????"",
].
为什么axios请求接口会发起两次请求
如果只是普通的 ajax 请求，也不会发起这个请求，只有当 ajax 请求绑定了 upload 的事件并且跨域的时候，就会自动发起这个请求。
这样就明了了，就是我们有upload事件绑定（一般都是本地调试，所以会有跨域），我仔细看了下axios文档，发现config配置文件中有两个参数
// onUploadProgress: function(progressEvent) {
// // Do whatever you want with the native progress event
// },
// onDownloadProgress: function(progressEvent) {
// // Do whatever you want with the native progress event
// },
分别处理上传和下载事件，也就是这里绑定了upload事件，所以每次请求都会有个option请求。
解决方案很简单，直接注释掉就好了，当然如果开发的工程上线使用跟请求的接口是同一个域名下自然不会两次请求。