前端的路由封装
好买网 IT技术交易平台
在一个项目当中,我们常常需要调用很多接口,我们不可能每次调用接口都完整地写一遍调用,因此我们需要对其进行封装
/************axios.js**************/
// 封装axios
import axios from "axios";
import qs from "qs";
// 初始化axios,设置默认的baseURL
const http = axios.create({
baseURL: "http://localhost:3000",
timeout: 1000 * 180,
});
// 添加请求拦截器
http.interceptors.request.use(
(config) => {
// 再发送请求之前做些什么
try {
// token验证
// 每次发送请求都需要尝试携带token.
// 在登录前无法获取到token,需要使用try catch
config.headers["authorization"] = JSON.parse(
sessionStorage.getItem("user")
).token;
} catch (error) {
console.log(error);
}
return config;
},
(error) => {
// 对错误请求做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器(处理响应数据)
http.interceptors.response.use(
(response) => {
// 对响应数据做些什么
if (response.status == 200) {
return response.data;
} else {
return { code: 201, msg: "请求失败!" };
}
},
(error) => {
// 对错误响应做些什么
return Promise.reject(error);
}
);
const get = function (api, object) {
if (object === null) object = {};
return (promise = http.get(api, {
params: object,
}));
};
const post = function (api, object) {
if (object === null) object = {};
return (promise = http.post(api, qs.stringify(object)));
};
const uploadFile = function (api,object){
if(object === null) object = {}
let param = new FormData()
for (let key in object){
param.append(key,object[key])
}
let config = {
headers:{
"Content-Type":"multipart/form-data"
}
}
return promise = http.post(api,param,config)
}
export {get,post,uploadFile}/************api.js**************/
import {get,post} from "./axios.js"
const login = (obj) => post("/login",obj)
const homepage = (obj) => get("/home",obj)
export api = {
reqLogin : login,
reqHome : homepage
}
// 只需要把api挂载到Vue的原型链上或者React的原型链上就可以使用了
/************Vue**************/
import api from "./net/api.js"
Vue.prototype.$http = api
/************React**************/
import api from "./net/api.js"
React.Component.prototype.$http = api
关于Content-Type:
常见的媒体格式类型如下:
text/html HTMl格式
text/plain 纯为本格式
text/xml XML格式
image/gif gif图片格式
image/jpeg jpg图片格式
image/png png图片格式
以application开头的媒体格式类型
application/xhtml+xml XHTML格式
application/xml XML数据格式
application/atom+xml Atom XML聚合格式
application/json JSON数据格式
application/pdf pdf格式
application/msword Word文档格式
application/octet-stream 二进制流数据(如常见的文件下载)
application/x-www-form-urlencoded