关于前端:前端的路由封装

好买网 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 <form encType=””> 中默认的 encType,form 表单数据被编码为 key/value 格局发送到服务器(表单默认的提交数据的格局)
另外一种常见的媒体格式是上传文件时应用的
multipart/form-data 须要在表单中进行文件上传时, 就须要应用该格局
本文作者：Yune_Neko

本文链接：https://www.cnblogs.com/Umaru…