前端的路由封裝

在一個項目當中,我們常常需要調用很多接口,我們不可能每次調用接口都完整地寫一遍調用,因此我們需要對其進行封裝

/************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 需要在表單中進行文件上傳時,就需要使用該格式