前端的路由封装

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

1// 封装axios
2import axios from "axios";
3import qs from "qs";
4
5// 初始化axios,设置默认的baseURL
6const http = axios.create({
7    baseURL: "http://localhost:3000",
8    timeout: 1000 * 180,
9});
10
11// 添加请求拦截器
12http.interceptors.request.use(
13    (config) => {
14        // 再发送请求之前做些什么
15        try {
16            // token验证
17            // 每次发送请求都需要尝试携带token.
18            // 在登录前无法获取到token,需要使用try catch
19            config.headers["authorization"] = JSON.parse(
20                sessionStorage.getItem("user")
21            ).token;
22        } catch (error) {
23            console.log(error);
24        }
25        return config;
26    },
27    (error) => {
28        // 对错误请求做些什么
29        return Promise.reject(error);
30    }
31);
32
33// 添加响应拦截器(处理响应数据)
34http.interceptors.response.use(
35    (response) => {
36        // 对响应数据做些什么
37        if (response.status == 200) {
38            return response.data;
39        } else {
40            return { code: 201, msg: "请求失败!" };
41        }
42    },
43    (error) => {
44        // 对错误响应做些什么
45        return Promise.reject(error);
46    }
47);
48const get = function (api, object) {
49    if (object === null) object = {};
50    return (promise = http.get(api, {
51        params: object,
52    }));
53};
54const post = function (api, object) {
55    if (object === null) object = {};
56    return (promise = http.post(api, qs.stringify(object)));
57};
58const uploadFile = function (api,object){
59    if(object === null) object = {}
60    let param = new FormData()
61    for (let key in object){
62        param.append(key,object[key])
63    }
64    let config = {
65        headers:{
66            "Content-Type":"multipart/form-data"
67        }
68    }
69    return promise = http.post(api,param,config)
70}
71export {get,post,uploadFile}
72
73/************api.js**************/
74import {get,post} from "./axios.js"
75const login = (obj) => post("/login",obj)
76const homepage = (obj) => get("/home",obj)
77export api = {
78    reqLogin : login,
79    reqHome : homepage
80}
81// 只需要把api挂载到Vue的原型链上或者React的原型链上就可以使用了
82/************Vue**************/
83import api from "./net/api.js"
84Vue.prototype.$http = api
85/************React**************/
86import api from "./net/api.js"
87React.Component.prototype.$http = api
88

关于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 需要在表单中进行文件上传时,就需要使用该格式好买网 IT技术交易平台本文作者：Yune_Neko

本文链接：https://www.cnblogs.com/UmaruChan/archive/2021/10/23/15448666.html

前端的路由封装

评论区

相关推荐