前端的路由封装

在一个项目当中,我们常常需要调用很多接口,我们不可能每次调用接口都完整地写一遍调用,因此我们需要对其进行封装

/************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 需要在表单中进行文件上传时,就需要使用该格式