axios及简封装

1.创建入口调用的request.js

/**
 * request.get(url,options)
 * @param url
 * @param options ==> {body,query,params}
 */
import axios from 'axios';
import pathToRegexp from 'path-to-regexp';
import { beforeFetch, errorFetch, afterFetch } from './app';
import { API_URL } from '../config';

const instance = axios.create({
  baseURL: API_URL,
  timeout: 5000,
});
// 添加请求拦截器
instance.interceptors.request.use(beforeFetch, errorFetch);
instance.interceptors.response.use(afterFetch, errorFetch);

const methods = ['get', 'post', 'put', 'patch', 'delete'];
const request = {};

methods.forEach(method => {
  request[method] = (path, { params, body, query } = {}, config = {}) => {
    const mergeUrlParams = pathToRegexp.compile(path);
    const urlMergedParams = mergeUrlParams(params);
    return instance({ method, url: urlMergedParams, data: body, params: query, ...config });
  };
});

export default request;
复制代码

2.创建依赖项的配置config.js文件 这里就写在一块儿了

// 配置文件
config index.js
const devConfig = require('./dev.config');
const proConfig = require('./pro.config');
const commonConfig = require('./common.config'); 随机配置其余选项 不影响结果

module.exports = Object.assign({}, commonConfig, global.__DEV__ ? devConfig : proConfig);

config dev.config  测试环境配置
module.exports = {  API_URL: 'https:/xxxxxxxxxx/api',
  CDN_URL: 'https://xxxxxxxxxx/api',
  H5_PREFIX: 'https://xxxxxxxxxxx.com',
  OSS_PREFIX: 'https://xxxx-pub.oss-cn-shenzhen.aliyuncs.com/xxxxx',
  ENV: 'development',
};
config pro.config   生产环境配置
module.exports = {
  API_URL: 'https:/xxxxxxxxxx/api',
  CDN_URL: 'https://xxxxxxxxxx/api',
  H5_PREFIX: 'https://xxxxxxxxxxx.com',
  OSS_PREFIX: 'https://xxxx-pub.oss-cn-shenzhen.aliyuncs.com/xxxxx',
  ENV: 'production',
};
复制代码

3.主配置，也为拦截配置文件app.js

// app token和登陆拦截
import Toast from '@/components/Toast'; // 采用的使用Toast的提示框
import * as Sentry from '@sentry/react-native';    //采用的是RN的错误提示
import ErrorMap from './error.json'; //此处可填写错误的提示语句 可写对象方式

export function beforeFetch(options) {
  const auth = global.Token;
  if (!auth) {
    return options;
  }
  if (!options.headers) options.headers = {};
  options.headers['Authorization'] = 'Bearer ' + auth.token;
  return options;
}
export function errorFetch(error) {
  let message = '网络请求错误';
  if (error.response && error.response.data && error.response.data.message) {
    const { message: resMsg, code: resCode } = error.response.data;
    message = ErrorMap[resCode] || resMsg;
  } else if (error.message) {
    message = error.message;
  }
  Toast.showError(message);
  Sentry.configureScope(scope => {
    if (error.config && error.config.data) {
      scope.setExtra('data', error.config.data);
    }
    scope.setExtra('message', message);
    Sentry.captureException(error);
  });
  return Promise.reject(error);
}
export function afterFetch(res) {
  return res.data;
}复制代码

别问，问就是新手

补充说明一下：config中的配置 为项目中须要用到的配置，好比H5的连接，OSS的上传连接 等等等，这些均可以在此处全局配置，耦合性会好不少