axios妙用技巧

最新推荐文章于 2024-09-26 12:37:07 发布
最新推荐文章于 2024-09-26 12:37:07 发布
阅读量675 收藏
点赞数
文章标签： 后端 网络 json
原文链接：https://my.oschina.net/vicanso/blog/3057267
版权

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

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推荐使用它，所以才那么火，深入了解之后，发现它的确有着过人之处。不要让自己的见识误解世界，要以实践了解世界。

更多文章

转载于:https://my.oschina.net/vicanso/blog/3057267

weixin_34321977
关注
js实现链式操作
weixin_30839881的博客
05-24 283
前言：前不久阿里远程面试时问了我一个问题，如下： function Person(){}; var person = new Person(); //实现person.set(10).get()返回20 当时正在问我原型链的问题，所以面试官直接用我写的person问的，我当时是这么实现的： function Person(){}; var person = n...
axios在vue中的封装，可直接复用
chenlim87的博客
08-12 428
/** axios封装 * 请求拦截、响应拦截、错误统一处理 */ import axios from 'axios' import QS from 'qs' import {Toast} from 'vant' import {clearUserToken} from '../utils/cache' // 请求拦截器 axios.interceptors.request.use( config => { // 此请求头以普通表单的形式（键值对）发送数据，不适用于上传文件 ...
axios proxy 和 httpsAgent 的使用差异案例详解
最新发布
王森的博客
09-26 672
因为 wadesk 开发了本地 http 服务，http 本地服务是运行在 electron-main 的纯 node 环境中的，这个之前探讨了 node 下怎么使用 fetch 时就提到了一个 https-proxy-agent 库，这次使用 axios，发现 axios 自带 proxy 配置项，就没有多想，造成了 4 个小时的时间浪费，此次排查应该作为一个反思例子对待。
axios 基本使用与学习
weixin_53657413的博客
07-31 1027
axios
学习axios必知必会（1）~axios基本介绍、axios配置、json-server接口模拟工具
伟庭的博客
01-23 6103
学习axios必知必会（1）~axios基本介绍、axios配置、json-server接口模拟工具
在React中使用axios发送请求
piaocanY的博客
10-22 2263
其实React和vue 中 发送请求的方式 差不多。 VUE中： import Vue from ‘vue’ Vue.prototype.$http = axios 挂载到原型上供其他页面方便使用 React中： 将axios 挂载到React 上的步骤： cnpm i axios -S import axios from ‘axios’ 挂载axios之前，配置transformRequest 在挂载axios之前， 全局配置一下 transformRequest 参数。 （这个是为了让我们在使用a
关于使用axios的一些心得技巧分享
08-30
关于使用axios进行网络请求，以下是一些实用的心得技巧： 1. **带Cookie请求**：在使用axios时，默认情况下，跨域请求不会携带Cookie。若需要在请求中包含Cookie，你需要在配置对象中设置`withCredentials`为`true`...
【鸿蒙版axios请求封装包】
06-03
因此，"鸿蒙版axios请求封装包"是为了满足开发者在HarmonyOS环境下使用类似`axios`的API进行网络请求的需求而创建的。 这个封装包的目标是将`axios`的功能与HarmonyOS的特性相结合，提供一套简洁、高效且易于使用的...
若依之中对于axios的封装
06-09
若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依axios的封装若依...
详解vue axios用post提交的数据格式
10-18
本文将深入探讨如何在Vue.js项目中使用Axios来发送POST请求，并重点讨论提交数据的格式。 在使用Axios发送POST请求时，要特别注意请求体（body）中数据的编码方式，这是因为不同的编码方式将直接影响服务器端如何...
axios.defaults
wmsocool的博客
12-03 2003
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; axios.defaults.transformRequest = function(params) { return qs.stringify({param:JSON.stringify(params)}) } var comm...
axios中的transformRequest和transformResponse使用
qq_49017797的博客
05-11 724
允许你的请求数据在发送到服务器之前进行修改，只适合put、post、patch请求方法，后面数组中的函数必须返回一个字符串或ArrayBuffer或Stream。transformRequest: [function (data, headers) { // 对 data 进行任意转换处理 return data;当值为数组的时候，数组的每一个函数都是一个转换函数，数组中的函数就像管道一样依次执行，前者的输出作为后者的输入。案例：如果查询接口时，发现请求成功，但是没有返回值的情况下，可以通过如下方法解决。
axios-使用
神zhi殇的博客
01-04 480
文章目录
Node.js环境中优化axios请求速度设置
m0_67790636的博客
09-05 419
这段代码通常用于配置Node.js应用程序中的HTTPS请求，以便通过自定义的代理服务器发送请求，并且支持HTTP/2协议。在实际使用中，你可能还需要将这个自定义的。：设置代理agent可以同时打开的最大套接字数。：启用长连接，这样在多个请求之间可以重用TCP连接，减少了建立新连接的开销。类用于创建自定义的代理agent，可以配置代理的行为。方法，以便在进行HTTPS请求时使用这个代理配置。：设置代理agent使用的CA证书，这里使用了。模块，该模块提供了用于HTTPS请求的功能。这行代码创建了一个新的。
axios
weixin_38930658的博客
03-12 215
1.简介 Axios 是一个基于promise的HTTP库，可以用在浏览器和node.js中。 官方网站 http://www.axios-js.com/zh-cn/docs/ 2.特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 3.安装 $ npm install axios 4.代码封装 1.创建axios实例 co
axios的使用与封装
sunddy_x的博客
08-30 2751
什么是axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 特性 从浏览器中创建 XMLHttpRequests 从 node.js 创建 http 请求 支持 Promise API 拦截请求和响应 转换请求数据和响应数据 取消请求 自动转换 JSON 数据 客户端支持防御 XSRF 浏览器支持 绝大部分现代浏览器以及ie8+ 安装 使用npm npm install axios 使用cdn <script src=“https://
axios 封装请求方法
saienenen的博客
03-20 5034
一，前言 Axios 不必多介绍了。 在项目中，我们并不会直接使用 Axios，而是会对它进行一层封装。 这里提供两种不同的风格，有简单的，也有相对复杂的 二，正文 一，第一种 request.js import axios from 'axios' // 创建axios实例。统一配置 const service = axios.create({ baseURL: process.env.BASE_API, // api的base_url timeout: 15000 // 请求超时时间
axios 的学习
学习记录和总结
10-11 713
前端最流行的 ajax 请求库 axios的使用和介绍
axios is not defined的解决方法/axios的安装与使用
weixin_44669966的博客
02-14 1445
安装axios npm install axios --save 声明axios变量 const axios = require('axios'); 使用axios axios({ method: 'get', url: `http://localhost:8080/data/`, data: { id: 1, name: 'gugu' } }).then(res => { .
axios需要用jquery吗
07-15
不，Axios和jQuery是两个独立的库，它们之间没有依赖关系。你可以单独使用Axios而无需引入jQuery。 Axios是一个基于Promise的现代HTTP客户端，用于在浏览器和Node.js中进行HTTP请求。它提供了更简洁、易用和功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值