axios 二次封装，适用于Vue React

目录

创建一个httpjs

vue-cli引入：

React 引入：

---

创建一个httpjs

根目录下创建一个httpjs，代码如下

import axios from "axios";
import qs from "qs";
// react 中使用antd  此处自定义
// import { message } from "antd";
// vue中使用element-ui 此处自定义
// import { Loading} from "element-ui";

// 创建axios默认请求
axios.defaults.baseURL = "http://xxxxxx.com";
// 配置超时时间
axios.defaults.timeout = 100000;
// 配置请求拦截
axios.interceptors.request.use(config => {
  // config.setHeaders([
  //   // 在这里设置请求头与携带token信息
  // ]);
  return config;
});
// 添加响应拦截器
axios.interceptors.response.use(
  function(response) {
    console.log(response);
    return response;
  },
  function(error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);
/**
 * get请求
 * @method get
 * @param {url, params, loading} 请求地址，请求参数，是否需要加载层
 */
var get = function(url, params, loading) {
  return new Promise((resolve, reject) => {
    // {
    //   params: params
    // }
    axios
      .get(url, params)
      .then(res => {
        resolve(res);
      })
      .catch(err => {
        reject(err);
      });
  });
};
/**
 * post请求
 * @method post
 * @param {url, params} 请求地址，请求参数，是否需要加载层
 */
var post = function(url, data) {
  return new Promise((resolve, reject) => {
    // qs.stringify(data)
    axios
      .post(url, data)
      .then(res => {
        console.log(res);
        resolve(res);
      })
      .catch(err => {
        reject(err);
      });
  });
};
export default { get, post };

vue-cli引入：

在mainjs中直接引入：

import axios from './http'
Vue.prototype.$http = axios;

 对应的页面直接使用 this.$http.get/post  发送请求

React 引入：

React 中，启动框架的方式是通过执行 ReactDOM.render() 这样一种方式来进行的，没有一个全局的对象，因而无法通过类似React.prototype.xxx = xxx的方式来进行设置。

因此可以在对应的页面引入httpjs，然后通过例如：import axios from "../../axios/http";然后通过axios.get/post 发送请求