vue封装请求方法
1:在static/js/新建http.js,interface.js,request.js;2:http.js:封装请求方法(get/post)// 在http.js中引入axiosimport axios from "axios";import QS from "qs";// 设置超时时间axios.defaults.timeout = 10000;// 设置默认post的请求头axios.d
·
1:在static/js/新建http.js,interface.js,request.js;
2:http.js:封装请求方法(get/post)
// 在http.js中引入axios
import axios from "axios";
import QS from "qs";
// 设置超时时间
axios.defaults.timeout = 10000;
// 设置默认post的请求头
axios.defaults.headers.post["Content-Type"] = "application/json;charset=UTF-8";
// 添加token 在登录成功后进行设置
export function setToken(token) {
axios.defaults.headers.common["Authorization"] = "Bearer " + token;
}
export default {
/**
* get方法,对应get请求
* @param {String} url [请求的url地址]
* @param {Object} params [请求时携带的参数]
*/
get(url, params) {
return new Promise((resolve, reject) => {
axios
.get(url, {
params: params,
}, {
async: false,
})
.then(res => {
resolve(res);
})
.catch(err => {
reject(err);
});
});
},
/**
* post方法,对应post请求
* @param {String} url [请求的url地址]
* @param {Object} data [请求时携带的参数]
*/
post(url, data, contentType) {
data = QS.stringify(data) //post需要序列化
return new Promise((resolve, reject) => {
axios
.post(url, data, {
// headers: {
// "Content-Type": contentType ? contentType : "application/json",
// },
headers: { //请求头
"Accept": "*/*",
"Content-Type": contentType ? contentType : "application/json",
"JWT-token": "" //这是获取的token
},
async: false
})
.then(res => {
if (res.data.code == 200) {
resolve(res.data);
} else {
console.log(res);
}
})
.catch(err => {
reject(err);
});
});
}
}
3:interface.js:统一管理api的请求地址
const baseUrl = 'http://000.000.000.00:0000'; //和代理相对应的请求地址
/* *api接口的统一管理* */
export default {
yearUrl: baseUrl + '/api/apiOne',
nameUrl: baseUrl + '/api/apiTwo'
}
4:request.js:统一的请求
import intefUrl from "./interface"
import $ from './http'
/* *接口数据的统一调用* */
export default {
/*** 获取通用内容 ***/
// 获取国家/氏族
getState() {
},
// 获取行政区域
getRegion(params) {
return $.post(intefUrl.yearUrl, params);
},
// 获取文化分区
getCulture(params) {
return $.get(intefUrl.nameUrl, params);
},
/* 获取省市区三级联动 */
getProvice() {
},
// 获取城市列表
getCity() {
},
// 获取年代
getEra() {
},
// 获取年度
getYear() {
},
/** 列表页面 **/
// 获取数据列表
getDataList() {
},
/** 列表详情 **/
getDataDetail() {
}
}
5:main.js
// 全局引入请求方法
import request from './static/js/request'
Vue.prototype.$ = request
6:页面调用
init() {
let t = this;
$.getRegion(t.obj).then((r) => {
console.log(r);
});
$.getCulture().then((r) => {
t.msg = r.data.data;
});
},
更多推荐
已为社区贡献1条内容
所有评论(0)