vue axios 请求封装

将axios 请求封装成公共方法，方面在项目中使用
1.首先在项目引入axios

npm i --save axios
cnpm i axios --save

2.在公共文件夹内创建request.js文件
第一种请求方式

import axios from "axios";
let baseURL = 'http://www.你的api地址‘

/**
 * 封装ajax请求
 * 1.reqUrl、reqMethod为必填选项
 * 2.type存在时导出数据
 * @param {String}   reqUrl                   请求地址
 * @param {String}   reqMethod                请求方式
 * @param {JSON}     reqData                  请求数据
 * @param {Function} callback                 回调函数
 * @param {Function} dir                      直接返回响应数据
 */

const myAjax = (reqUrl, reqMethod, reqData, callback, dir) => {
    let header = {
        'Content-Type': 'application/json',
    }
    // 创建请求体
    let body = {
      url: baseURL + reqUrl,
      headers: header,
      method: reqMethod,
      data: reqData
    }
    // 根据请求方式传参
    if(reqMethod == 'get'){
      body.params = reqData
    }else{
      body.data = reqData
    }
    axios(body)
        .then(data => {
            console.log(data)
            data = data.data
            if (dir) {
                callback(data);
            } else if (data && data.code == 10001) {
                callback(data.data);
            } else {
                Toast(data.msg);
            }
        })
        .catch(({ data }) => {
            callback("error");
        });

};

export default {
    myAjax
};

第二种请求方式

import axios from "axios";
import { Toast } from "vant";
import baseURL from "../api/env.js";

const http = axios.create({
  timeout: 2000 * 500,
  headers: {
    "Content-Type": "application/json; charset=utf-8"
  }
});

http.__proto__ = axios;
/**
 * 请求拦截
 */
http.interceptors.request.use(
  config => {
    config.headers.sn = new Date().getTime();
    config.headers.token = sessionStorage.getItem("unionId");
    // config.headers.unionId = "o86GNwfImF03Tbs_uWsYCM54xnD4";

    return config;
  },
  error => {
    return Promise.reject(error);
  }
);

/**
 * 响应拦截
 */
http.interceptors.response.use(
  response => {
    if (response.data.code && response.data.code !== 200) {
      let msg = response.data.msg;
      Toast(msg);
    }
    return response;
  },
  error => {
    return Promise.reject(error);
  }
);

/**
 * 请求地址处理
 */
http.adornUrl = actionName => {
  return baseURL.apiURL + actionName;
};

/**
 * 封装ajax请求
 * 1.reqUrl、reqMethod为必填选项
 * 2.type存在时导出数据
 * @param {String}   reqUrl                   请求地址
 * @param {String}   reqMethod                请求方式
 * @param {JSON}     reqData                  请求数据
 * @param {Function} callback                 回调函数
 * @param {Function} dir                      直接返回响应数据
 */

const myAjax = (reqUrl, reqMethod, reqData, callback, dir) => {
  let ajaxItem = {
    url: http.adornUrl(reqUrl),
    method: reqMethod,
  }
  // 跟据请求方式传参
  if(reqMethod == 'get'){
    ajaxItem.params = reqData
  }else{
    ajaxItem.data = reqData
  }
  http(ajaxItem)
    .then(({ data }) => {
      if (dir) {
        callback(data);
      } else if (data && data.code == 200) {
        callback(data.data);
      } else {
        Toast(data.msg);
      }
    })
    .catch(({ data }) => {});
};

export default {
  myAjax,
  myAjax2,
  myRequest
};

3.在main.js中引入request.js文件,将请求方式绑定在vue原型上

import httpRequest from "./request";
Vue.prototype.$myAjax = httpRequest.myAjax; // ajax请求方法

4.调用方式

let api = '/api'
let reqMethod = 'post' //请求方式
let data ={} // 去哦敏感期数据

//拿到解析后的data数据
this.$myAjax(api, reqMethod, data, (res) => {
    /**
       * 返回示例 ，有疑问请看axios请求callback的回调
       * res = {
       *  {} // 后台返回的data ，
       *  
       * }
   */
    console.log(res)
});

//后台返回什么数据拿到什么数据
this.$myAjax(api, reqMethod, data, (res) => {
    /**
       * 返回示例 ，有疑问请看axios请求callback的回调
       * res = {
       *  data:{},
       *  code:200,
       *  .....
       * }
   */
    console.log(res)
},'req');