Skip to main content

HTTP 请求(Axios)

midway 包裹了 axios 包,使得在代码中可以简单的使用 axios 接口。 ​

和 axios 的一些关系如下: ​

  • 接口完全一致
  • 适配依赖注入写法,完整的类型定义
  • 方便框架串联依赖链路,排查问题

安装依赖#

$ npm i @midwayjs/axios --save

引入组件#

首先,引入 组件,在 configuration.ts  中导入:

import { Configuration } from '@midwayjs/decorator';import * as axios from '@midwayjs/axios';import { join } from 'path';
@Configuration({  imports: [    axios, // 导入 axios 组件  ],  importConfigs: [join(__dirname, 'config')],})export class ContainerLifeCycle {}

然后在业务代码中即可注入使用。 ​

使用服务#

接口和 axios 一致。

axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])

使用示例:

import { HttpService } from '@midwayjs/axios';
@Provide()export class UserService {  @Inject()  httpService: HttpService;
  async invoke() {    const url = 'https://api.github.com/users/octocat/orgs';    const result = await this.httpService.get(url);    // TODO resut  }}

配置 Axios#

HttpService 实例等价于 axios.create ,所以可以有一些配置参数,我们可以在 src/config.default.ts 中配置它,配置完之后,全局的 axios 都会生效。 ​

比如:

export const axios = {  baseURL: 'https://api.example.com',  // `headers` are custom headers to be sent  headers: {    'X-Requested-With': 'XMLHttpRequest',  },  timeout: 1000, // default is `0` (no timeout)
  // `withCredentials` indicates whether or not cross-site Access-Control requests  // should be made using credentials  withCredentials: false, // default};

具体的参数可以参考 axios global config。 ​

配置全局拦截器#

import { Configuration } from '@midwayjs/decorator';import * as axios from '@midwayjs/axios';import { join } from 'path';import { IMidwayContainer } from '@midwayjs/core';
@Configuration({  imports: [    axios, // 导入 axios 组件  ],  importConfigs: [join(__dirname, 'config')],})export class ContainerLifeCycle {  async onReady(container: IMidwayContainer) {    const httpService = await container.getAsync(axios.HttpService);    httpService.interceptors.request.use(      (config) => {        // Do something before request is sent        return config;      },      (error) => {        // Do something with request error        return Promise.reject(error);      }    );  }}