nodejs+axios调用第三方接口返回数据给前端

nodejs axios调用第三方接口返回数据给前端

后端 koalas

前端 vue

0. 内容和前后端框架

本项目为前端执行时间段和航班，后端利用指定信息查询第三方航班信息接口并返回给前端。

1. koajs+axios

app.js文件中引入koa、添加初始化中间件并启动项目。

1.1 引入koa并添加初始化bodyParser中间件

bodyParser的作用是让项目可以在后续controller中通过ctx.request.body拿到request body中的内容。

const Koa = require('koa');
const BodyParser = require('koa-bodyparser');

const app = new Koa();
const bodyParser = new BodyParser();
app.use(bodyParser);

1.2 添加cors配置

cors是什么

在注册router之前添加配置，后续可以自定义配置，目前是让所有来源的请求都能调通。

app.use(async (ctx, next)=> {
  ctx.set('Access-Control-Allow-Origin', '*');
  ctx.set('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
  ctx.set('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');
  if (ctx.method == 'OPTIONS') {
    ctx.body = 200; 
  } else {
    await next();
  }
});

1.3 注册router

以下代码指定了路径/test/flight POST的请求会使用FlightController.getFlightcontroller方法来处理。

// router.js
const KoaRouter = require('koa-router');
const Router = KoaRouter();

Router.post('/test/flight', FlightController.getFlight);
app.use(Router.routes()).use(Router.allowedMethods());

// controller-filght.js
const getFlight = async function (ctx, next){
  // const id = ctx.params.id
  const { beginDate, endDate } = ctx?.request?.body || {};

  console.log('-----controller getFlight-----');
  console.log(beginDate, endDate);
  console.log('----getFlight----');
  const result = await getFlightList(beginDate, endDate);
  ctx.response.body = result;
};

controller内容：使用axios调用第三方航班查询

第三方航班查询接口信息：

/POST /queryFlightDynamicInfo

// body
{
  "channelNo": "B2C",
  "data": {
      "depCityCode": "",
      "arrCityCode": "",
      flightDate,
      "queryType": "flightNo",
      flightNo,
      "bizSeq": 1706864403371
  }
}

// header
{
  "ChannelNo": "B2C",
}

axios请求代码（使用js的Date库进行日期遍历）：

const getFlight = async (flightNo, flightDate) => {
  return await axios.post('/queryFlightDynamicInfo', {
    "channelNo": "B2C",
    "data": {
        "depCityCode": "",
        "arrCityCode": "",
        flightDate,
        "queryType": "flightNo",
        flightNo,
        "bizSeq": 1706864403371
    }
  }, {
  headers: {
    "ChannelNo": "B2C",
  }});
};

由于第三方接口仅支持指定日期的航班查询，不支持某一时间段，因此这里要稍微做一下接口改造。

前端传开始日期beginDate和结束日志endDate，后端从开始到结束遍历每一天进行查询。这就意味着我们要调用（endDate-beginDate）次第三方接口，次数是没办法改变的，但是可以让它变成并行查询来节省时间提高效率。

并行可以想到Promise.all，具体实现在以下代码：

const oneDay = 24 * 60 * 60 * 1000;
const getFlightList = async (beginDate, endDate) => {
  // beginDate&endDate格式 yyyy-mm-dd
  const flightList = [];
  const promiseList = [];
  const beginDateTime = (new Date(beginDate)).getTime();
  const endDateTime = (new Date(endDate)).getTime();

  for(let i=endDateTime;i>=beginDateTime;i-=oneDay) {
    const dateStr = formatDate(i);
    promiseList.push(getFlight('HO1085', dateStr));
  }
  const list = await Promise.all(promiseList);
  list.forEach(item => {
    const { data } = item?.data || {};
    flightList.push(formatFlightData(data?.[0]));
  });
  return flightList;
};

1.4 启动koa项目

app.listen(3000, () => {
  console.log('server is running at http://localhost:3000')
});

2. vue+axios

由于第三方数据查询+格式化都在后端进行处理了，前端需要进行的操作只有调用后端接口拿到数据，并进行展示。

调用后端接口：

export const getFlight = async () => {
  return await axios.post('http://127.0.0.1:3000/test/flight', {
    beginDate: '2024-01-20',
    endDate: '2024-02-12',
  });
};