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的上傳連接 等等等，這些均可以在此處全局配置，耦合性會好不少