vue使用axios封装请求

vue使用axios封装request请求

迟来更新…，祝大家元旦快乐~

安装注册

npm i axios -S

• main.js 引入

  根据个人所需，这里urlApi：存放请求接口地址的方法

import axios from "@/api/urlApi";
Vue.prototype.axios = axios;

axios配置

这里新建instance.js文件，有些内容根据实际情况调整，复制可用。

import axios from "axios";
import qs from "qs";
import store from "../store";
import { getToken, TOKEN_KEY } from './utils'
import Vue from 'vue'
// md5 加密
import md5 from 'js-md5';


// 获取公共配置域名
const commUrl = process.env.BASE_API;

// 根据所需拼接公共名称
const baseURL = `${commUrl}/api/v2`; //接口
const imgURL = `${commUrl}/uploads/`; //图片

// 创建axios实例配置，根据个人所需配置
const axiosInstance = axios.create({
    baseURL: baseURL, // base url
    imgURL: imgURL,
    timeout: 30000, // 超时
    withCredentials: true, // 是否跨域
    commURL: commUrl
});


// http request
axiosInstance.interceptors.request.use(
    config => {
      	// 获取token
        let token = getToken();
        if (token) {
            config.headers.common[TOKEN_KEY] = `${token}`;
        }
      
        var e = window.localStorage.getItem("X-CSRF-Token");
        if (e) {
            config.headers.common["X-CSRF-Token"] = e;
        }
      
      	// 根据个人所需配置，在请求头新增参数信息
        config.headers["Cache-control"] = "no-cache"; // 指示请求或响应消息不缓存
        config.headers["Cache-control"] = "no-store";
        config.headers["storeId"] = 123;
        config.headers["SerialNO"] = parseInt(Math.random() * 1000000); // 随机数
        
		// 根据需求配置，【例：get使用表单，post使用json等】
        if (config.method == 'get') {
          
            config.headers["Content-Type"] = 'application/x-www-form-urlencoded'
            // 序列化
            config.data = qs.stringify(config.data);
          
        } else {
          	// 不加密
            // config.headers["Content-Type"] = "application/json";
            // config.data = config.data;
          
          
          	// ----------- 使用md5加密 --------------
          	// 具体处理数据，根据个人需求调整
          	config.headers.post["Content-Type"]="application/json";

            let  appkey="VerificationSign2021"
			// 处理数据
            let listArr = config.data;
            let newkey = Object.keys(listArr).sort();

            let newObj = {};
            for (var i = 0; i < newkey.length; i++) {
              newObj[newkey[i]] = listArr[newkey[i]];
            }
			// 拼接
            let connects = '';
            for(let item in newObj){
              connects += newObj[item];
            }
            // 拼接格式： 15899999999123456VerificationSign2021  进行加密
            connects += appkey;
            config.data.sign = md5(connects);
        }
        
        return config;
    },
    err => {
        return Promise.reject(err);
    }
);


// http response
axiosInstance.interceptors.response.use(
    response => {
        let datas = response.data;
      	// 根据相应code判断
        if(datas.code == 200001) {
            return response.data
		
        } else if (response.status == 401 || (datas.code == 401001 || datas.code == 401004)) {
            // 清空退出登录信息
            store.commit("LOGOUT");
            
          	// 跳转登录，
          	router.replace({
                path: "/Login",
                query: { redirect: router.currentRoute.fullPath }
            });

            return false;
        } else {
            Vue.prototype.$toast(datas.msg ? datas.msg : '未知错误');
            return false;
        }
    },
    error => {
        return Promise.reject(error);
    }
);

// 导出方法
export default {
    post(url, data) {
        return axiosInstance({
            method: "post",
            url: url,
            data: data
        });
    },

    get(url, params) {
        return axiosInstance({
            method: "get",
            url: url,
            params
        });
    },
    baseURL() {
        return baseURL;
    },
    imgURL() {
        return imgURL;
    },
    commURL() {
        return comurl;
    }
};

api文件

创建urlApi.js文件，存放相关api

import instance  from './instance'

export default {
    getBaseUrl () {
        return instance.commURL();
    },
    getImgURL() {
        return instance.imgURL();
    },
  
  	// get请求
  	tripSubjectList(params) {
        return instance.get("/tripLine/getTripSubjectList", params);
    },
  
  	// post请求
  	tripLineSpotList(params) {
        return instance.post ("/tripLine/getTripLineSpotList", params);
    },
}

使用

通过this.axios.api接口方法调用，有参数就传，根据实际情况使用。get、post使用方式是一样的。

getTripSubjectList() {
    let params = {
      	from: `${this.latitude},${this.longitude}`
    }
   
    this.axios.tripSubjectList(params).then((res) => {
      	// 异常提示
      	if (!this.requestErrorTip(res)) return false;
      	
      	// 返回信息，根据实际情况获取
        let datas = res.data;
    })
},