[JavaScript知识库]vue3.x&vue-cli3+&vue-cli4.5+项目中使用axios封装http请求

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

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

const cookieExpires = 30; //cookie存储时间 单位：天

//接口请求环境配置
let httpUrl = window.location.host;
let httpBaseUrl = "http://www.baidu.com:60000";

if (httpUrl.includes("cccxxxx.com")) {
    // 测试生产环境
    httpBaseUrl = "https://sssxxx.com:65512/api";
} else if (httpUrl.includes("xxxsss:65502")) {
    // 正式生产环境
    httpBaseUrl = "xxxyyysss:650000";
} else {
    // 其他环境
    httpBaseUrl = window.location.origin;
}

export {cookieExpires,httpBaseUrl};

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>