vue3.x&vue-cli3+&vue-cli4.5+项目中使用axios封装http请求

港控/mmm° 2022-09-03 04:28 130阅读 0赞

定义接口环境文件，项目打包后会部署的不同的环境，

**1、环境配置文件：variable.js**

**2、接口统一拦截：http.js**

import axios from "axios"; // 引用axios
    import Store from "../store/index";
    import Qs from "qs";
    import { Message } from "element-ui";
    import router from '../router'
    import Cookies from "js-cookie";
    import moment from "moment";
    import { httpBaseUrl } from "./variable"
    
    
    // 创建axios实例
    const $http = axios.create({
        baseURL: httpBaseUrl,
        // params: {},
        timeout: 50000,
        headers: {
            'Content-Type': 'application/json;charset=UTF-8;',
        }
    })
    
    // 添加请求拦截器
    $http.interceptors.request.use(config => {
        // 在发送请求之前做些什么
        // 统一加密认证参数
        config.params.accessId = "xxxxx";
        config.params.accessSecret = "xxxxx";
        config.params.appId = "xxxxx";
        config.params.timestamp = moment().format("YYYYMMDDHHmmss");
        config.params.signType = "SHA256";
        config.params.signVersion = "1.0";
        config.params.nonce = "xxxxx";
        config.params.signature = "xxxxxxxxxxxxxxxxxxxxxxxxx";
    
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        const token = Cookies.get('token');
        token && (config.headers["Authorization"] = `Bearer ` + token)
        //若请求方式为post，则将data参数转为JSON字符串
        // if (config.method === 'patch') {
        //     // config.data = JSON.stringify(config.data);
        // config.data = Qs.stringify(config.data);
        // }
        return config;
    }, error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    });
    
    // 添加响应拦截器
    $http.interceptors.response.use(response => {
        // 对响应数据做点什么
        if (response.status === 200) {
            // 成功
            let returnInfo = response.data;
            let message = returnInfo.message || returnInfo.data;
            if (message && message.includes && message.includes("available server")) {
                Message.error("重启服务中，请稍后访问");
                console.log("请求失败:-->", returnInfo);
            }
    
            if (!response.config.url.includes('index/login')) {
                if (returnInfo.code == 3) {
                    Message.error("当前账号登录失效，请重新登录");
                    setTimeout(() => {
                        Cookies.remove("token");
                        Store.commit('logout')
                        router.push("/login")
                    }, 3000)
                }
            }
        }
        return response.data;
    }, error => {
        /***** 接收到异常响应的处理开始 *****/
        if (error && error.response) {
            // 1.公共错误处理
            // 2.根据响应码具体处理
            switch (error.response.status) {
                case 400:
                    error.message = "错误请求";
                    break;
                case 401:
                    error.message = "未授权，请重新登录";
                    Cookies.remove("token");
                    Store.commit('logout')
                    router.push("/login")
                    break;
                case 403:
                    error.message = error.response.data.message;
                    break;
                case 404:
                    error.message = "请求错误,未找到该资源";
                    break;
                case 405:
                    error.message = "请求方法未允许";
                    break;
                case 408:
                    error.message = "请求超时";
                    break;
                case 500:
                    error.message = "服务器端出错";
                    break;
                case 501:
                    error.message = "网络未实现";
                    break;
                case 502:
                    error.message = "连接服务器失败";
                    break;
                case 503:
                    error.message = "重启服务中，请稍后访问";
                    break;
                case 504:
                    error.message = "网络超时";
                    break;
                case 505:
                    error.message = "http版本不支持该请求";
                    break;
                default:
                    error.message = `连接错误${error.response.status}`;
            }
        }
        // else {
        //   // 超时处理
        //   console.log(error)
        //   // if (JSON.stringify(error).includes("timeout")) {
        //   //   ElMessage.error("服务器响应超时，请刷新当前页");
        //   // }
        //   ElMessage.error("连接服务器失败");
        // }
        Message.error(error.message);
    
        return Promise.reject(error);
    });
    
    export default $http

** 3、请求方式统一封装：request.js**

import $http from "./http"
    
    /**
     * @param {String} method  请求的方法：get、post、delete、put
     * @param {String} url     请求的url:
     * @param {Object} data    请求的参数
     * @param {Object} params    请求的参数
     * @param {Object} config  请求的配置
     * @returns {Promise}     返回一个promise对象，其实就相当于axios请求数据的返回值
     */
    
    const request = ({
        method,
        url,
        data,
        params,
        config
    }) => {
        method = method.toLowerCase();
        // console.log("接口请求封装",url,method,data,params,config)
        if (method == 'post') {
            return $http.post(url, data,  {
                params:params||{},
                ...config
            })
        } else if (method == 'get') {
            return $http.get(url, {
                params: data||{},
                ...config
            })
        } else if (method == 'delete') {
            return $http.delete(url, {
                data: data,
                params:params||{},
                ...config
            })
        } else if (method == 'put') {
            return $http.put(url, data, {
                params:params||{},
                ...config
            })
        } else if (method == 'patch') {
            return $http.patch(url, data, {
                params:params||{},
                ...config
            })
        } else {
            console.error('未知的method' + method)
            return false
        }
    }
    
    /**
     * 将Object转换成&key=value&key1=value1
     */
    let toQueryPair = function (key, value) {
        if (typeof value == 'undefined') {
            return `&${key}=`;
        }
        return `&${key}=${value}`;
    }
    let parseParam = function (param) {
        if (Object.prototype.toString.call(param) !== '[object Object]') {
            return '';
        }
        let queryParam = '';
        for (let key in param) {
            if (param.hasOwnProperty(key)) {
                let value = param[key];
                queryParam += toQueryPair(key, value);
            }
        }
        // output key=value&key1=value1
        return queryParam.substr(1);
    }
    export {request,parseParam}

**4、请求示例：**

import { request, parseParam } from "@/utils/request"
    
    //get
    export const Apige = data => {
        return new Promise((resolve, reject) => {
            request({
                url: `/api/name`,
                method: "get",
                data,
            }).then(res => {
                resolve(res);
            })
                .catch(err => {
                    reject(err);
                });
        });
    }
    
    //post
    //解构方式 data => data:data
    export const ApiaddPost = data => {
        return new Promise((resolve, reject) => {
            request({
                url: `/api/postname`,
                method: "post",
                data,
            }).then(res => {
                resolve(res);
            })
                .catch(err => {
                    reject(err);
                });
        });
    }
    //params 数据放到请求 params中
    export const ApiLoginIn = params => {
      return new Promise((resolve, reject) => {
        request({
          url: `/xxxx/xxxx/login/token`,
          method: "post",
          params,
          config: {
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
            },
          }
        }).then(res => {
          resolve(res);
          // if (res.code == 0) {
          //   resolve(res.data);
          // }
        })
          .catch(err => {
            reject(err);
          });
      });
    }
    
    
    
    
    
    //patch 
    // formdata 参数方式 通过 parseParam(data) 将对象转为 &key=val&key2=val2
    export const ApireviseUserMes = data => {
        return new Promise((resolve, reject) => {
            request({
                url: `/xxxxx/users/${data.id}`,
                method: "patch",
                data: parseParam(data),
                config: {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8',
                    },
                }
            }).then(res => {
                resolve(res);
            })
                .catch(err => {
                    reject(err);
                });
        });
    }
    
    //delete
    
    export const ApideleteUserMes = data => {
        return new Promise((resolve, reject) => {
            request({
                url: `/xxxxxx/users/delete`,
                method: "delete",
                data,
            }).then(res => {
                resolve(res);
            })
                .catch(err => {
                    reject(err);
                });
        });
    }
    
    
    
    //put
    export const ApiresetPassword = data => {
        return new Promise((resolve, reject) => {
            request({
                url: `/xxxxxx/resetPassword/${data.id}`,
                method: "put",
                data,
            }).then(res => {
                resolve(res);
            })
                .catch(err => {
                    reject(err);
                });
        });
    }

**5、vue组件中使用**

<template>
      <div></div>
    </template>
    
    <script>
    import { ApiLoginIn } from "../../api/login";
    export default {
      components: {},
      props: {},
      methods: {
        
        // 登录api
        async loginIn() {
          let data = {
            grantType: "password",
            loginType: "password",
            username: this.username,
            password: this.password
          }
          await ApiLoginIn(data).then(res => {
            console.log("登录成功", res)
          }).catch(err => {
            this.loginLoading = false
          });
    
        }
      },
    };
    </script>
    
    <style lang="scss" scoped>
    
    </style>