axios 二次封装，适用于Vue React

约定不等于承诺〃 2022-05-20 10:26 202阅读 0赞

**目录**

创建一个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 发送请求