最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to export Axios.create in Typescript - Stack Overflow

programmeradmin1浏览0评论

I have this working:

export default axios.create({
  baseURL: 'sample',
  headers: {
    'Content-Type': 'application/json',
  },
  transformRequest: [
    (data) => {
      return JSON.stringify(data);
    },
  ],
});

but the problem is once I edited to be like this:

const API = () => {
 const token = 'sample'

  const api: AxiosInstance = axios.create({
    baseURL: 'http://localhost:5000',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    transformRequest: [
      (data) => {
        return JSON.stringify(data);
      },
    ],
    transformResponse: [
      (data) => {
        return JSON.parse(data);
      },
    ],
  });

  return api;
};

export default API;

I want it to be an arrow function so I can access the token inside the function.

The problem is once I start to import the arrow function it will create an error not reading POST method

import API from 'apis';

API.post 

Is there a way to implement it like an arrow function but will not lose the type definitions or create an error?

I have this working:

export default axios.create({
  baseURL: 'sample',
  headers: {
    'Content-Type': 'application/json',
  },
  transformRequest: [
    (data) => {
      return JSON.stringify(data);
    },
  ],
});

but the problem is once I edited to be like this:

const API = () => {
 const token = 'sample'

  const api: AxiosInstance = axios.create({
    baseURL: 'http://localhost:5000',
    headers: {
      'Content-Type': 'application/json',
      Authorization: `Bearer ${token}`,
    },
    transformRequest: [
      (data) => {
        return JSON.stringify(data);
      },
    ],
    transformResponse: [
      (data) => {
        return JSON.parse(data);
      },
    ],
  });

  return api;
};

export default API;

I want it to be an arrow function so I can access the token inside the function.

The problem is once I start to import the arrow function it will create an error not reading POST method

import API from 'apis';

API.post 

Is there a way to implement it like an arrow function but will not lose the type definitions or create an error?

Share Improve this question asked Aug 17, 2020 at 15:00 ajbeeajbee 3,6415 gold badges31 silver badges57 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

You don't loose any type definitions, but you're not using your import as a function.

If you write API().post it will work.

I would suggest doing the following:

import axios from 'axios';

const api = axios.create({
  baseURL: 'http://localhost:5000',
  headers: {
    'Content-Type': 'application/json',
  },
  transformRequest: [
    (data) => {
      return JSON.stringify(data);
    },
  ],
  transformResponse: [
    (data) => {
      return JSON.parse(data);
    },
  ],
});

import store from '../store'

const listener = () => {
  const token = store.getState().token
  api.defaults.headers.mon['Authorization'] = token;
}

store.subscribe(listener)

export default api;

You can access the token here as well.

Just because this is the question you find when you look for my problem, if you use require to import axios, to use the correct type definition you'll have to import it like that:

const axios = require('axios').default
axios.create(...) // No error

This would give an error:

const axios = require('axios')
axios.create(...) // Error
发布评论

评论列表(0)

  1. 暂无评论