axios妙用技巧

前言

應用開發中，各服務的呼叫使用最多的就是HTTP的形式，使用的HTTP client也從request --> superagent --> axios。axios中的各類函式都是基於promise的形式，雖然我也鍾情於superagent的鏈式呼叫，但axios的各類promise：transform，interceptor等特性，只能擁抱無法拒絕~

create

建立一個新的例項，此例項的公共配置獨立與其它例項。一般在後端開發會經常需要對接各類不同的服務，而各服務使用單獨的例項是較合理的方法，如下面例子初始化一個用於呼叫百度服務的例項：

const axios = require('axios');

const baiduService = axios.create({
  // 設定介面路徑（相對路徑將拼接此路徑）
  baseURL: 'https://www.baidu.com/',
  // 根據不同的應用設定預設的超時
  timeout: 3 * 1000,
});

async function main() {
  try {
    const res = await baiduService.get('/');
    console.info(res.status);
  } catch (err) {
    console.error(err);
  }
}
main();
 

transformRequest

在傳送請求前，可以對傳送的資料做轉換處理，預設的transformRequest中會將提交的資料轉換為對應的字串（json或者querystring），具體程式碼可檢視transformRequest。

我的應用中有一個統計服務，使用的是批量傳送統計指標（設定為每次傳送200個指標），對頻寬的佔用較大，因此希望傳送指標時做資料壓縮，下面看看怎麼針對需求實現自定義的transform。

const axios = require('axios');
const zlib = require('zlib');

const localService = axios.create({
  baseURL: 'http://127.0.0.1:3000/',
  timeout: 3 * 1000,
  transformRequest: [
    // 複用原有的轉換，實現json --> json string
    axios.defaults.transformRequest[0],
    (data, header) => {
      // 如果已處理過資料，則跳過
      if (!header['Content-Encoding']) {
        return data;
      }
      // 如果資料長度1KB（如字元資料並不一定小於1KB），不壓縮
      if (data.length < 1024) {
        return data;
      }
      // 將資料壓縮（可根據需要，只壓縮長度大於多少的資料）
      // 設定資料型別
      header['Content-Encoding'] = 'gzip';
      const w  = zlib.createGzip();
      w.end(Buffer.from(data));
      return w;
    },
  ],
});

async function main() {
  try {
    const arr = [];
    for (let index = 0; index < 100; index++) {
      // 模擬生成統計資料
      arr.push({
        category: 'login',
        account: 'vicanso',
        value: Math.round(Math.random() * 100),
        ip: '127.0.0.1',
      });
    }
    const res = await localService.post('/', {
      data: arr,
    });
    console.info(res.status);
  } catch (err) {
    console.error(err);
  }
}
main();
 

服務端程式碼：

const Koa = require('koa');
const Router = require('koa-router');
const bodyParser = require('koa-bodyparser');

const app = new Koa();
const router = new Router();


// body parser中可以解壓資料
// 如果希望支援再多型別的壓縮資料，可參考https://github.com/stream-utils/inflation調整
app.use(bodyParser());

router.post('/', async (ctx) => {
  console.dir(ctx.request.body);
  ctx.body = 'OK';
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(3000);
 

通過上面的自定義gzip的transform，頻寬的佔用節約了70%左右，當然這裡會增加了CPU的損耗，根據各自的應用場景選擇不壓縮或者使用snappy等壓縮速度優先的演算法。

transformResponse

在接收到響應資料時，可以對響應資料做轉換處理，預設的transform是呼叫JSON.parse轉換為對應的Object。其的使用方法與transformRequest類似，不再舉例細說。

adapter

可實現自定義的請求處理，axios實現了基於瀏覽器的xhr以及nodejs的兩種處理，使其適應於兩種執行環境。一般我們不需要自己去實現adapter，主要的使用場景是在測試中mock資料，如下：

const axios = require('axios');

const baiduService = axios.create({
  // 設定介面路徑（相對路徑將拼接此路徑）
  baseURL: 'https://www.baidu.com/',
  // 根據不同的應用設定預設的超時
  timeout: 3 * 1000,
});


function mockAdapter(ins, fn) {
  const {
    adapter,
  } = ins.defaults;
  ins.defaults.adapter = fn;
  return () => {
    ins.defaults.adapter = adapter;
  };
}

async function main() {
  const done = mockAdapter(baiduService, (config) => {
    // mock response，只返回狀態碼與data
    return Promise.resolve({
      status: 200,
      data: 'OK',
    });
  });
  try {
    const res = await baiduService.get('/');
    // 恢復adapter
    console.info(res.status);
  } catch (err) {
    console.error(err);
  } finally {
    done();
  }
}
main();

http(s)Agent

指定在nodejs環境中的http(s)的agent，如maxSockets，timeout等。下面例子中啟用keepAlive，複用TCP連線，提升效能（預設是未啟用）。

const axios = require('axios');
const http = require('http');
const https = require('https')

const localService = axios.create({
  baseURL: 'http://127.0.0.1:3000/',
  timeout: 3 * 1000,
  httpAgent: new http.Agent({
    keepAlive: true,
  }),
  httpsAgent: new https.Agent({
    keepAlive: true
  }),
});

async function main() {
  try {
    // 兩次順序呼叫，複用同樣的tcp連線
    let res = await localService.get('/');
    console.info(res.status);
    res = await localService.get('/');
    console.info(res.status);
  } catch (err) {
    console.error(err);
  }
}
main();

服務端的程式碼，展示是否使用同一TCP連線：

const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();


router.get('/', async (ctx) => {
  // 生成socke id，用於標記TCP連線
  if (!ctx.socket._id) {
    ctx.socket._id = Math.floor(Math.random() * 1000);
  }
  console.info(ctx.socket._id);
  ctx.body = 'OK';
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(3000);

Interceptors

Interceptors是axios的一大特色，使用攔截器可以對傳送請求、接收資料做各類的操作（非同步的也支援）。如請求重試，前置認證等等。

request interceptor

後端服務部署，為了高可用，避免單點故障，一般而言都會部署多節點。各服務之間的呼叫，簡單的方式則是使用nginx或haproxy之類做反向代理，應用程式只接入反向代理的節點，這樣簡單方便，實際上反向代理則成為單點，達不到高可用的目標（實際情況對於大部分公司，訪問量不大，反向代理穩定，基本也不出狀況）。下面我們來討論如果在客戶端實現高可用的接入方式（如有完善的微服務體系，接入sidecar更簡單便捷，無程式碼入侵性）：

const axios = require('axios');

class Backends {
  constructor(backends) {
    this.backends = backends.map((url) => {
      return {
        url,
        healthy: false,
      };
    });
  }
  // 選擇其中可用的backend
  get(policy) {
    let backend = null;
    switch (policy) {
      case 'first':
        this.backends.forEach((item) => {
          if (!backend && item.healthy) {
            backend = item;
          }
        });
        break;
      // 可實現更多的選擇策略，如round robin等
      default:
        break;
    } 
    return backend;
  }
  doHealthCheck() {
    // 可以根據需要調整為更完善的檢測方法，
    // 如檢測5次，3次通過則認為healthy
    this.backends.forEach((backend) => {
      axios.get(`${backend.url}/ping`).then((res) => {
        const {
          status,
        } = res;
        if (status === 200) {
          backend.healthy = true;
        } else {
          backend.healthy = false;
        }
      }).catch(() => {
        backend.healthy = false;
      })
    });
  }
  startHealthCheck() {
    setInterval(() => {
      this.doHealthCheck();
    }, 5000).unref();
    this.doHealthCheck();
  }
}

const localServiceBackends = new Backends([
  'http://127.0.0.1:3000',
  'http://127.0.0.1:3001',
]);
localServiceBackends.startHealthCheck();

const localService = axios.create({
  timeout: 3 * 1000,
});

localService.interceptors.request.use((config) => {
  const backend = localServiceBackends.get('first');
  if (!backend) {
    return Promise.reject(new Error('無可用的服務'))
  }
  config.baseURL = backend.url;
  return config;
})

async function main() {
  try {
    const res = await localService.get('/');
    console.info(res.status);
  } catch (err) {
    console.error(err);
  }
}

// 延時執行，等待首次health check
setTimeout(main, 1000);

服務端程式碼：

const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();


router.get('/', async (ctx) => {
  ctx.body = 'OK';
});

router.get('/ping', (ctx) => {
  ctx.body = 'pong';
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(3000);

response interceptor

函式調用出錯統一基於Error物件擴充套件，後端各服務都限定了標準的出錯返回，以JSON的形式返回出錯資料{"message": "出錯資訊", ...}，其中message則是出錯資訊，因此需要調整axios以相容介面的出錯響應（預設返回的Error.message為http狀態碼的描述）。

const axios = require('axios');

const localService = axios.create({
  baseURL: 'http://127.0.0.1:3000/',
  timeout: 3 * 1000,
});

localService.interceptors.response.use(null, (err) => {
  if (err.response && err.response.data) {
    const {
      data,
    } = err.response;
    if (data.message) {
      // 可以根據後端出錯資料的標準，往error中新增再多的屬性
      err.message = data.message;
    }
  }
  return Promise.reject(err);
});

async function main() {
  try {
    await localService.get('/');
  } catch (err) {
    console.error(err.message);
  }
}
main();

服務端程式碼：

const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();

// 公共的出錯處理
app.use(async (ctx, next) => {
  try {
    await next();
  } catch (err) {
    ctx.status = err.status || 500;
    ctx.body = {
      message: err.message,
    };
  }
});

router.get('/', async (ctx) => {
  ctx.throw(400, '出錯了')
});

router.get('/ping', (ctx) => {
  ctx.body = 'pong';
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(3000);

介面分析

組合使用request與response的interceptors，可以無入侵式的增加介面分析，如效能、介面響應、資料等統計分析。

const axios = require('axios');

const localService = axios.create({
  baseURL: 'http://127.0.0.1:3000/',
  timeout: 3 * 1000,
});


const stats = (response) => {
  // 未考慮各類異常場景
  const {
    config,
  } = response;
  const {
    method,
    url,
    _start,
  } = config;
  // 可輸出更多的引數，如post資料，響應資料等
  console.info(`${method} ${url} ${Date.now() - _start}ms status:${response.status}`);
};

localService.interceptors.request.use((config) => {
  config._start = Date.now();
  return config;
});

localService.interceptors.response.use((response) => {
  stats(response);
}, (err) => {
  stats(err.response);
  return Promise.reject(err);
});

async function main() {
  try {
    await localService.post('/');
    await localService.post('/error');
  } catch (err) {
    console.error(err.message);
  }
}
main();

服務端程式碼：

const Koa = require('koa');
const Router = require('koa-router');

const app = new Koa();
const router = new Router();

// 公共的出錯處理
app.use(async (ctx, next) => {
  try {
    await next();
  } catch (err) {
    ctx.status = err.status || 500;
    ctx.body = {
      message: err.message,
    };
  }
});

router.post('/', async (ctx) => {
  ctx.body = {
    foo: 'bar',
  };
});
router.post('/error', async (ctx) => {
  ctx.throw(400, '出錯啦');
});

router.get('/ping', (ctx) => {
  ctx.body = 'pong';
});

app
  .use(router.routes())
  .use(router.allowedMethods());

app.listen(3000);

小結

在認真瞭解axios之前，我一直不解為什麼其star的數量這麼高，比superagent高了那麼多，當時自己沒去研究，理所當然認為因為vue推薦使用它，所以才那麼火，深入瞭解之後，發現它的確有著過人之處。不要讓自己的見識誤解世界，要以實踐瞭解世界。

相關推薦