vue 统一封装http请求
// http.js统一封装接口/** @Author* @Date*/import axios from 'axios'import { Message } from 'element-ui'const token ='你自己的token'// create an axios instanceconst http = axios.create({baseURL: '/api',timeout:
·
// http.js统一封装接口
/*
* @Author
* @Date
*/
import axios from 'axios'
const token ='你的token'
// create an axios instance
const http = axios.create({
baseURL: '/api',
timeout: 80000 // request timeout
})
// request interceptor
service.interceptors.request.use(
config => {
// Do something before request is sent
if (token) {
// 让每个请求携带token-- ['X-Token']为自定义key
config.headers.Authorization = token
}
return config
},
error => {
// Do something with request error
// console.log("出错啦",error)
Promise.reject(error)
}
)
// response interceptor
service.interceptors.response.use(
response => response,
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default service
// 2.分模块书写api接口
// 比如在首页,则命名homeHttp.js
// 在homtHttp.js中写上首页中所有要调用的api
import http from '@/utils/http'
// 获取你要的数据
export default {
getLoginStatus(params) {
return http({
url: '/test/testdata/',//自己的接口地址
method: 'post', //请求方法
type: 'json'
}, params) //需要携带的参数
}
// 具体组件中调用api
import homtHttp from "@/api";
// 获取数据
getDataTest(data) {
homtHttp.getLoginStatus(params)
.then(response => {
console.log(response.data;)
})
.catch(error => {
this.$message.error("获取失败!");
});
},
请先配置了代理转发,具体请移步axios官网
http://www.axios-js.com/zh-cn/docs/
更多推荐
已为社区贡献20条内容
所有评论(0)