react 封装axios，解决跨域

1. 安装axios依赖

npm install axios

2. util目录下新建https.js

/**
 * 网络请求配置
 */
import axios from "axios";

axios.defaults.timeout = 100000;

let isDev = process.env.NODE_ENV;
if(isDev === 'development') {
    axios.default.baseURL = '/api'
}

/**
 * http request 拦截器
 */
axios.interceptors.request.use(
  (config) => {
    config.data = JSON.stringify(config.data);
    config.headers = {
      "Content-Type": "application/json",
    };
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

/**
 * http response 拦截器
 */
axios.interceptors.response.use(
  (response) => {
    if (response.data.errCode === 2) {
      console.log("过期");
    }
    return response;
  },
  (error) => {
    console.log("请求出错：", error);
  }
);

/**
 * 封装get方法
 * @param url  请求url
 * @param params  请求参数
 * @returns {Promise}
 */
export function get(url, params = {}) {
  return new Promise((resolve, reject) => {
    axios.get(url, {
        params: params,
      }).then((response) => {
        landing(url, params, response.data);
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      });
  });
}

/**
 * 封装post请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function post(url, data) {
  return new Promise((resolve, reject) => {
    axios.post(url, data).then(
      (response) => {
        //关闭进度条
        resolve(response.data);
      },
      (err) => {
        reject(err);
      }
    );
  });
}

/**
 * 封装patch请求
 * @param url
 * @param data
 * @returns {Promise}
 */
export function patch(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.patch(url, data).then(
      (response) => {
        resolve(response.data);
      },
      (err) => {
        msag(err);
        reject(err);
      }
    );
  });
}

/**
 * 封装put请求
 * @param url
 * @param data
 * @returns {Promise}
 */

export function put(url, data = {}) {
  return new Promise((resolve, reject) => {
    axios.put(url, data).then(
      (response) => {
        resolve(response.data);
      },
      (err) => {
        msag(err);
        reject(err);
      }
    );
  });
}

//统一接口处理，返回数据
export default function (fecth, url, param) {
  let _data = "";
  return new Promise((resolve, reject) => {
    switch (fecth) {
      case "get":
        console.log("begin a get request,and url:", url);
        get(url, param)
          .then(function (response) {
            resolve(response);
          })
          .catch(function (error) {
            console.log("get request GET failed.", error);
            reject(error);
          });
        break;
      case "post":
        post(url, param)
          .then(function (response) {
            resolve(response);
          })
          .catch(function (error) {
            console.log("get request POST failed.", error);
            reject(error);
          });
        break;
      default:
        break;
    }
  });
}

//失败提示
function msag(err) {
  if (err && err.response) {
    switch (err.response.status) {
      case 400:
        alert(err.response.data.error.details);
        break;
      case 401:
        alert("未授权，请登录");
        break;

      case 403:
        alert("拒绝访问");
        break;

      case 404:
        alert("请求地址出错");
        break;

      case 408:
        alert("请求超时");
        break;

      case 500:
        alert("服务器内部错误");
        break;

      case 501:
        alert("服务未实现");
        break;

      case 502:
        alert("网关错误");
        break;

      case 503:
        alert("服务不可用");
        break;

      case 504:
        alert("网关超时");
        break;

      case 505:
        alert("HTTP版本不受支持");
        break;
      default:
    }
  }
}

/**
 * 查看返回的数据
 * @param url
 * @param params
 * @param data
 */
function landing(url, params, data) {
  if (data.code === -1) {
  }
}

3. util目录下新建request.js文件

公共axios函数
这里对接收的三个参数做了柯里化
methods和url一般不会改变，多以将这两个参数封装到一起
data是请求的参数，经常会有改变，单独接收

import http from './http';

 /**
  * 公共axios函数
  * 这里对接收的三个参数做了柯里化
  * methods和url一般不会改变，多以将这两个参数封装到一起
  * data是请求的参数，经常会有改变，单独接收
  * @param {String} methods 请求方式
  * @param {String} url 请求路径
  * @param {Object} data 接口入参
  */
function localAxios(methods, url){
  return function (data) {
    return new Promise((resolve, reject) => {
      http(methods,url, data).then(res => {
        resolve (res);
      },error => {
        console.log("网络异常~",error);
        reject(error)
      })
    }) 
  }
  
}

export {
  localAxios
}

 

4. util目录下创建apis目录，用于存放定义的接口，apis目录下任意js内代码

这里只传递了methods和url两个参数，data参数放在具体逻辑代码中传递

这里要注意，url前有个“/api”，这个是多加上的，这个前缀要和第六步中的正则匹配一致

import { localAxios } from '../request'

export let birthEight = localAxios('get', '/birthEight/query')

 

5. 逻辑代码调用

import { birthEight } from '../util/apis/test'

let params = {
  year: '',
  month: '',
  day: '',
  hour: '',
  key: ''
}

birthEight(params)
.then(res => {
  console.log(res);
})

 

6. 跨域解决

mode_modules目录下找到webpackDevServer.config.js文件

在return 后的对象内添加下面代码

proxy: {
  //axios跨域改造
  '/api': {
    target:'http://apis.juhe.cn', // 你请求的第三方接口
    changeOrigin:true, // 在本地会创建一个虚拟服务端，然后发送请求的数据，并同时接收请求的数据，这样服务端和服务端进行数据的交互就不会有跨域问题
    pathRewrite:{  // 路径重写，
      '^/api': ''  // 替换target中的请求地址，也就是说/api=/target，请求target这个地址的时候直接写成/api即可。
    }
  }
},

7. 最后，我的项目目录