Axios: Cara menggunakan Axios dengan TypeScript saat menggunakan pencegat respons (masalah AxiosResponse)

Gunakan definisi gaya axios.request<T>(...args) .
Response-interceptor terakhir dalam array secara implisit mematuhi antarmuka seperti (currentResponse: any) => T

Jadi jika Anda memiliki data menjadi sesuatu seperti:

interface ServerResponse {
  data: ServerData
}

interface ServerData {
  foo: string
  bar: number
}

Kemudian Anda dapat mengatakan:

axios.request<ServerData>({
  url: 'https://example.com/path/to/data',
  transformResponse: (r: ServerResponse) => r.data
}).then((response) => {
  // `response` is of type `AxiosResponse<ServerData>`
  const { data } = response
  // `data` is of type ServerData, correctly inferred
})

@zcei ooh sebenarnya ini tidak akan berfungsi untuk pencegat global misalnya axios.interceptors.response.use

Saya pikir memang demikian - pencegat saat ini diketik dengan sangat "santai" (alias any ), jadi Anda bisa melampirkan pencegat respons dan memilikinya (r: any): any => r.data (yang pada dasarnya seolah-olah Anda akan melakukannya hilangkan pengetikan apa pun dalam mode tidak ketat).

Hanya pada titik di mana Anda memanggil axios.request Anda dapat mengonfigurasinya generik, yang kemudian diteruskan sebagai jenis properti data .

(Sebenarnya saya membuat kesalahan dalam potongan kode di atas, data sebenarnya AxiosResponse<ServerData> yang memiliki bidang bernama .data dengan jenis ServerData - memperbaruinya)

@zcei hai maaf tapi ini benar-benar tidak berfungsi dengan contoh saya, saya telah membuat kode dan kotak untuk menyoroti masalah ini.

Lihat disini

Memiliki masalah yang sama, pencegat pada dasarnya dapat diringkas menjadi:

this.instance.interceptors.response.use(response => response.data);

Meskipun demikian, tipe pengembalian

this.instance.post<string>(...);

adalah AxiosPromise<string> , yang mengharapkan data dibungkus.

Ini sengaja. Anda seharusnya mengubah data di pencegat, tetapi tidak untuk mengangkat kunci respons .

https://github.com/axios/axios/blob/0b3db5d87a60a1ad8b0dce9669dbc10483ec33da/lib/core/dispatchRequest.js#L63 -L67

Saya pikir Anda akan memiliki respons server seperti

{
  "data": {
    "foo": 42
  }
}

dan ingin menyingkirkan sarang response.data.data . Jika Anda mengembalikan response.data di pencegat, maka Anda dapat mengaksesnya nanti melalui response.data.foo alih-alih response.data.data.foo .

Tetapi mengakses response.foo tidak akan berfungsi, karena ini adalah tingkat respons "root" yang melacak hal-hal lain, seperti kode respons dan sejenisnya.

Maaf, tapi saya tidak setuju dengan premis Anda, setidaknya tidak dari segi fungsionalitas.
Tanpa menggunakan pencegat untuk membuka bungkus properti data, saya harus melakukannya

this.instance.post<string>(...).then(response => response.data);
this.instance.get<number>(...).then(response => response.data);

di _setiap_ titik akhir yang saya definisikan. Apa gunanya semua pengulangan kode itu?

Setiap kali permintaan berhasil, yang memiliki arti then , saya tidak terlalu peduli dengan kode respons dll. Saya hanya peduli dengan kode respons jika sesuatu _tidak_ berfungsi, dan untuk itulah penangan kesalahan ada , baik pada pencegat maupun pada titik akhir tertentu.

this.instance.interceptors.response.use(response => {
  // Everything went well, pass only relevant data through
  return response.data;
}, error => {
  // Something went wrong, figure out how to handle it here or in a `.catch` somewhere down the pipe
});

Setiap kali permintaan berhasil, yang berarti kemudian, saya tidak terlalu peduli dengan kode respons

Yah, Anda mungkin tidak peduli dengan informasi lain, tetapi membatasi semua orang yang menggunakan klien HTTP bahwa Anda hanya peduli pada tubuh bukanlah solusi yang sebenarnya.
Ada cukup kasus penggunaan yang sah untuk kode status & tajuk bahkan pada panggilan yang berhasil. Seperti membuat perbedaan pada 204 vs 200 , memeriksa tajuk batas tarif, mengekstrak tajuk Link untuk sumber daya tambahan (pagination), dll. pp.

Jika Anda tidak peduli, bungkus Axios dan buang semuanya:

this.instance.request = <T>(...args) => {
  return axios.request<T>(...args).then(({ data }) => data)
}

this.instance.request<string>({ method: 'post', ... }).then(data => { ... });
this.instance.request<number>({ method: 'get', ... }).then(data => { ... });

Saya tidak mengerti dari mana Anda mendapatkan gagasan bahwa setiap orang harus melakukan hal-hal seperti yang saya lakukan dalam satu proyek. Saya hanya mencoba memecahkan masalah tentang bagaimana membuka data secara otomatis pada setiap permintaan dan mengingat bahwa masalah ini ada di sini sebelum saya, saya bukan satu-satunya dengan masalah itu.

Pencegat _tampaknya_ menyukai tempat yang tepat untuk melakukannya, baik dengan nama mereka dan deskripsi mereka di readme (melakukan sesuatu dengan setiap tanggapan). Menangani 204 vs 200 dll dan kemudian meneruskan data juga masuk akal di pencegat karena Anda bisa melakukannya di satu tempat terpusat.

Menurut pendapat saya, solusi intuitif adalah mengembalikan apa pun yang Anda inginkan dari pencegat, tidak memaksa perpustakaan dengan satu cara.

Jika Anda ingin mengubah beberapa bidang dalam data:

this.instance.interceptors.response.use(response => {
  response.data.foo = JSON.parse(response.data.bar);
  return response;
});

Jika Anda hanya ingin membuka bungkus data Axios:

this.instance.interceptors.response.use(response => response.data);

Ini akan meninggalkan pilihan apa yang harus dilakukan kepada pengembang, yang menurut saya lebih baik daripada pencegat yang sangat berpendirian kuat. Anda bebas untuk tidak setuju, tentu saja.

Anda beralasan tentang "inti dari semua pengulangan kode itu", jadi saya hanya mencoba menjelaskan mengapa informasi itu diperlukan.

Saya benar-benar tidak dapat menemukan cara tentang bagaimana Anda ingin menjaga keamanan jenis di pencegat dan responsnya, jika ada pencegat yang dapat mengacak seluruh respons tanpa struktur umum. :/
Jenis respons untuk permintaan harus menjadi any Saya kira dan menempatkan upaya ke tangan pengembang untuk memastikan mereka melakukan hal yang benar.

Itu bagi saya setidaknya terdengar lebih rawan kesalahan karena pengetikan yang santai, daripada mengakses satu properti.

Jika Anda dapat membuat PR yang memungkinkan pencegat untuk menimpa respons root sambil menjaga keamanan jenis untuk "kasus penggunaan 80%", saya akan lebih dari senang!

Masalahnya, kedua contoh di atas yang saya buat sudah berfungsi seperti yang saya jelaskan, dari segi fungsionalitas, hanya jenisnya yang salah. Jika mengembalikan apa pun selain respons (dimodifikasi) di pencegat salah, saya pikir akan lebih baik untuk memperbarui tipe yang diharapkan di sana.

Pertama, menarik mengetahui Anda melakukan hal yang sama @Etheryte !

Di aplikasi kami r => r.data adalah pencegat respons terakhir dalam rantai dan kami menggunakan yang lain yang bergantung pada kode status untuk menangani token penyegaran, dll. tetapi pada tingkat global karena kami tidak perlu menangani ini untuk spesifik panggilan.

Saya mengerti bahwa mungkin tidak mungkin untuk mengakomodasi kasus penggunaan ini dengan TS. Namun, @zcei tidak dapat disangkal bahwa ini adalah cara yang sah untuk menggunakan Axios karena menggunakan bagian resmi dari Axios API (interceptors) :).

Doh! Saya telah melihat kode yang salah sepanjang waktu ️ dan berada di bagian transformResponse , bukan pencegat - Maaf!

Bagaimana Anda akan memperbarui pengetikan untuk memperhitungkan pencegat yang mengubah jenis pengembalian?

Mungkin sesuatu seperti ini?

interface AxiosInstance {
  request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;
}

Anda akan menyebutnya seperti ini:

axios.request<User, string>({
  method: 'get',
  url: '/user?id=12345'
})
  .then((foo: string) => { // <-- you could leave out the type annotation here, it's inferred
    console.log(foo)
  })

Baru saja mencobanya secara lokal dan sepertinya melakukan apa yang Anda cari.
Mungkin saya bisa mendapatkan PR bersama di malam hari untuk memperbarui semua metode itu.

@zcei Itu terlihat bagus! Default ke AxiosResponse tentu saja masuk akal 99% dari waktu 👍

Senang mendengarnya! Maaf sekali lagi atas kebingungan saya

@zcei tidak masalah! Penasaran seperti apa siklus rilis untuk Axios?

Tidak ada - saya masih memiliki beberapa hal yang tertunda untuk v1 alpha (#1333) dan sementara itu @nickuraltsev / @emilyemorehouse melakukan rilis kapan pun diperlukan.
Sejak v0.18 ada beberapa daya tarik (termasuk favorit saya: opsi pelingkupan ke instance) jadi saya kira mereka bisa memotong rilis. Untuk lebih lanjut, saya hanya mengundang Anda ke Gitter , sehingga kami menjaga masalah tetap pada titik

Saya sudah berharap untuk mengeluarkan rilis 0,19 tetapi terakhir saya periksa, master gagal CI. Saya pasti menginginkan jadwal rilis yang lebih padat/reguler setelah kami mendapatkan 1.0 untuk mendarat.

menemui masalah yang sama. Apakah ada solusi?

@qidaneix Anda dapat mencoba menginstal npm install axios/axios#master sampai ada rilis. #1605 seharusnya memperbaikinya. Akan menyenangkan untuk mendapatkan umpan balik, apakah itu benar-benar membantu dengan kasus penggunaan kehidupan nyata dan bukan hanya tes

@zcei saya akan mencobanya besok

@zcei Bolehkah saya bertanya kapan itu akan dirilis?

+1 kapan 1.0.0 akan dirilis?

Ini akan menjadi rilis pra-1.0 pasti. @Khaledgarbaya apakah Anda juga ditambahkan ke NPM oleh Matt? Kalau tidak, kita harus bersikap baik kepada pengelola yang tersisa yang melepaskannya

Hai semua. Saat ini saya mengelola rilis NPM. Saya ingin mengeluarkan rilis pra-1.0.0 lainnya, tetapi tes Travis gagal dan saya belum memiliki kesempatan untuk memperbaikinya. Setelah diperbaiki, saya sangat senang untuk segera mengeluarkannya

@zcei Saya tidak ditambahkan ke repo npm, saya hanya dapat menggabungkan perubahan

Apakah ada pembaruan tentang masalah ini, apakah akan ada rilis dalam waktu dekat, seperti bulan ke dua?

+1

❤️ jika ini bisa dirilis sekarang

Kami sadar, tetapi saat ini diblokir. Anda bisa mendapatkan informasi lebih lanjut di sini: https://github.com/axios/axios/issues/1657#issuecomment -410766031

Dirilis sebagai bagian dari 0.19.0-beta.1.

Ini dapat diinstal menggunakan npm install [email protected] atau npm install axios@next

Mungkin sesuatu seperti ini?

interface AxiosInstance {
  request<T = any, R = AxiosResponse<T>> (config: AxiosRequestConfig): Promise<R>;
}

Anda akan menyebutnya seperti ini:

axios.request<User, string>({
  method: 'get',
  url: '/user?id=12345'
})
  .then((foo: string) => { // <-- you could leave out the type annotation here, it's inferred
    console.log(foo)
  })

Baru saja mencobanya secara lokal dan sepertinya melakukan apa yang Anda cari.
Mungkin saya bisa mendapatkan PR bersama di malam hari untuk memperbarui semua metode itu.

Pengguna (T, param generik pertama) tampaknya tidak digunakan, jika saya ingin menggunakan tipe pengembalian khusus, saya terlihat aneh

axios.request<void, string>({
    ...
})

menggunakan void mungkin lebih jelas.

@emilyemorehouse Tidak terdengar tidak tahu berterima kasih tetapi 0.19-beta telah dibuka selama tiga bulan sekarang, apakah ada ETA untuk rilis GA? Proyek kami memiliki masalah yang memerlukan salah satu dari perbaikan ini. Saya menanyakan ini di saluran Gitter tetapi sepertinya pengelola tidak merespons di sana ...

Mungkin kata-kata yang lebih baik adalah masalah apa yang perlu diselesaikan sebelum rilis dan apakah ada tempat untuk melacaknya? Karena tampaknya ada banyak minat, menyebarkan pekerjaan dan memiliki pemahaman yang jelas tentang pekerjaan yang diperlukan dapat membantu mempercepat.

Sudah ada tonggak proyek untuk 0,19 tetapi tiket yang terdaftar belum melihat perubahan apa pun selama beberapa bulan.

const func1: any = () => { kembali axios.request(...) }

Saya menimpa AxiosResponse di axios.d.ts saya :

import axios from 'axios'

declare module 'axios' {
  export interface AxiosResponse<T = any> extends Promise<T> {}
}

Menyukai masalah ini. Ini berfungsi ... oke ketika saya baru saja menyalin definisi AxiosInstance ke pengetikan lokal, tetapi solusi yang diterapkan menurut saya sangat bertele-tele, kecuali saya melakukan sesuatu yang salah (bukan ahli TypeScript). Karena saya menggunakan instance axios terpisah yang dibuat dengan axios.create dan menggunakan pencegat ini:

AxiosClient.interceptors.response.use(
  response => response && response.data,
  error => error && error.response && error.response.data
);

di mana response.data selalu memiliki formulir ini:

export interface APIResponse<T = any> {
  data: T;
  message: string;
  status: boolean;
}

sepertinya saya harus menggunakan AxiosClient.post seperti ini:

AxiosClient.post<EndpointAPIResponse, APIResponse<EndpointAPIResponse>>('/endpoint', { someData });

untuk memiliki tipe yang tepat di .then . Apakah saya melakukan sesuatu yang salah di sini atau haruskah itu benar-benar bertele-tele? Jika tidak, akan jauh lebih baik jika saya bisa melewati skema respons yang diharapkan saat membuat instance, tetapi saya tidak dapat membuatnya berfungsi:

export interface AxiosInstance<R> {
  <T = any>(config: AxiosRequestConfig): Promise<R<T>>;
  <T = any>(url: string, config?: AxiosRequestConfig): Promise<R<T>>;
  defaults: AxiosRequestConfig;
  interceptors: {
    request: AxiosInterceptorManager<AxiosRequestConfig>;
    response: AxiosInterceptorManager<R>;
  };
  getUri(config?: AxiosRequestConfig): string;
  request<T = any>(config: AxiosRequestConfig): Promise<R<T>>;
  get<T = any>(url: string, config?: AxiosRequestConfig): Promise<R<T>>;
  delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<R<T>>;
  head<T = any>(url: string, config?: AxiosRequestConfig): Promise<R<T>>;
  post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R<T>>;
  put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R<T>>;
  patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<R<T>>;
}

export interface AxiosStatic extends AxiosInstance<AxiosResponse> {
  create<T = AxiosResponse>(config?: AxiosRequestConfig): AxiosInstance<T>;
  Cancel: CancelStatic;
  CancelToken: CancelTokenStatic;
  isCancel(value: any): boolean;
  all<T>(values: (T | Promise<T>)[]): Promise<T[]>;
  spread<T, R>(callback: (...args: T[]) => R): (array: T[]) => R;
}

Ini berfungsi dengan baik dengan axios.create() tanpa tipe generik atau hanya axios , tetapi jika saya melewati antarmuka saya seperti ini:

const AxiosClient = axios.create<APIResponse>({
  // ...
});

dan kemudian gunakan seperti ini: AxiosClient.post<string>('/endpoint').then(value => value.data) , value.data memiliki tipe... T. Plus versi di atas hanya berfungsi jika saya benar-benar mengganti pengetikan ini di node_modules, jika tidak maka akan benar-benar tercampur dan saya berakhir dengan beberapa bencana total. Adakah yang bisa membantu saya dengan ini?

Sunting: oke, saya kira itu tidak akan berfungsi karena tidak mungkin menggunakan obat generik dengan cara itu (jadi R<T> ketika R adalah tipe generik bukan sintaks yang benar tetapi saya kira WebStorm karena alasan tertentu tidak disorot itu untuk saya); https://github.com/Microsoft/TypeScript/issues/1213 ini, saya berasumsi, akan menyelesaikannya tetapi tidak tahu apakah itu pernah diimplementasikan.

const request = <T>(options: AxiosRequestConfig) => {
    return axios.request<IResponse<T>>(options).then<T>(response => {
        const data = response.data;
        if (data.c !== '0') {
            return Promise.reject(new Error(data.m || 'error'));
        }
        return data.d;
    });
}

menggunakan:

request<IApiGetBrandGoodsInfoByIds>({
        method: 'GET',
        url: '/api/a/b',
    });

@zcei Apakah ini sudah teratasi? Saya tidak bisa mendapatkan berikut untuk bekerja:

// so I created an axios instance:
const instance = axios.create(someOptions);

// then used interceptors
instance.interceptors.response.use((res) => res.data.data);   // server response will always have 'data'

// then when using the following to make a request
instance.get<string>(someURI);  // suppose server response was {data: 'some message'}

// ^^ the above returns type AxiosPromise<string>. How do I get it to return type Promise<string> instead?

memiliki masalah yang sama, saya menginstal versi 0.19beta，juga ts tidak dapat mengurai jenis yang benar

Saya menimpa AxiosResponse di axios.d.ts saya :

import axios from 'axios'

declare module 'axios' {
  export interface AxiosResponse<T = any> extends Promise<T> {}
}

oh niupi

Saya menggunakan pencegat untuk melakukan sesuatu seperti: response => response.data . Jadi saya harus menghapus pembungkus AxiosResponse sepenuhnya.

Saya akhirnya berakhir dengan:

import axios from 'axios'

declare module 'axios' {
  export interface AxiosInstance {
    request<T = any> (config: AxiosRequestConfig): Promise<T>;
    get<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    delete<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    head<T = any>(url: string, config?: AxiosRequestConfig): Promise<T>;
    post<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    put<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
    patch<T = any>(url: string, data?: any, config?: AxiosRequestConfig): Promise<T>;
  }
}

Jika seseorang tidak tahu cara menggunakannya:

1. Tulis jenisnya di suatu tempat, misalnya src/types/axios/axios.d.ts .
2. Perbarui tsconfig.json Anda, mis

{
  "compilerOptions": {
    "typeRoots": [
        "./node_modules/@types",
        "./src/types/",
    ]
  }
}

Ini bekerja untuk saya:

Api.boards.createBoard = jest.fn((name:string) => {
      const mockBoardResult = {
        created_on: mockBoardData.date,
        name,
        threads: [],
        updated_on: mockBoardData.date,
        _id: mockBoardData._id
      };
      return Promise.resolve({data:mockBoardResult}) as Promise<AxiosResponse<any>>
    });

cara lain untuk menimpa

import * as axios from 'axios'

declare module 'axios' {
  interface AxiosInstance {
    (config: AxiosRequestConfig): Promise<any>
  }
}

saya pikir kita mungkin tidak boleh menambahkan properti ke AxiosResponse saat menggunakan pencegat , karena pencegat dapat dikeluarkan.

// @axios-exts/add-foo-to-resp
declare module 'axios' {
  interface AxiosResponse<T = any> {
    foo: string
  }
}
const addFooToResp = (res: AxiosResponse) => {
  res.foo = 'bar'
  return res
}
export default addFooToResp

// Your Project
import axios from 'axios'
import addFooToResp from '@axios-exts/add-foo-to-resp'

var id = axios.interceptors.response.use(addFooToResp)

axios.get('xx').then(res => {
  // have type defined
  // because we use `declare module 'axios'` ts can infer type
  console.log(res.foo)
})

// but if then eject?
axios.interceptors.response.eject(id)
axios.get('xx').then(res => {
  // also have type defined, it's maybe not reasonable
  console.log(res.foo)
})

mengapa kita menggunakan TypeScript? karena kami berharap proyek kami akan aman.
jika suatu hari kami menghapus properti dari utilitas dasar, kami ingin kode yang mereferensikannya menghasilkan kesalahan pada waktu kompilasi.

jadi, kami ingin menggunakan interseptor menambahkan beberapa properti ke AxiosResponse dan memiliki inferensi tipe, itu kontradiktif, karena tidak ada cara untuk memastikan bahwa inferensi tipe dapat diperbarui ketika pencegat dikeluarkan

saya pikir axios harus memberi tahu pengguna:
pencegat harus menangani sesuatu yang tidak berpengaruh pada AxiosResponse , jika Anda ingin memperluas properti AxiosResponse dan memiliki inferensi tipe, Anda harus menyukai 'plugin'

// @axios-exts/add-foo-to-resp
declare module 'axios' {
  interface AxiosResponse<T = any> {
    foo: string
  }
}
const addFooToResp = (res: AxiosResponse) => {
  res.foo = 'bar'
  return res
}
export default (axios) => {
  axios.interceptors.response.use(addFooToResp)
}

// Your Project
import axios from 'axios'
import addFooToResp from '@axios-exts/add-foo-to-resp'

addFooToResp(axios)

ini bukan keamanan 100%, tapi ini lebih aman daripada hanya menggunakan axios.interceptors.response.use

dan saya merekomendasikan axios desgin sistem plugin, sekarang kami selalu melihat seperti

import axios from 'axios'
import wrapper from 'axios-cache-plugin'

let http = wrapper(axios, {
  maxCacheSize: 15
})
export default http

gunakan seperti wrapper untuk menghubungkan plugin ke axios, setiap plugin tidak memiliki aturan umum, itu tidak cukup elegan. saya pikir harus suka

import axios from 'axios'
import axiosCache from 'axios-cache-plugin'

axios.use(axiosCache, {
  // some options
})
export axios

// axios-cache-plugin
export default (axios) => {}
// or
export default {
  install(axios){}
}
// like Vue.use for Vue.js

Gunakan definisi gaya axios.request<T>(...args) .
Response-interceptor terakhir dalam array secara implisit mematuhi antarmuka seperti (currentResponse: any) => T

Jadi jika Anda memiliki data menjadi sesuatu seperti:

interface ServerResponse {
  data: ServerData
}

interface ServerData {
  foo: string
  bar: number
}

Kemudian Anda dapat mengatakan:

axios.request<ServerData>({
  url: 'https://example.com/path/to/data',
  transformResponse: (r: ServerResponse) => r.data
}).then((response) => {
  // `response` is of type `AxiosResponse<ServerData>`
  const { data } = response
  // `data` is of type ServerData, correctly inferred
})

Tolong Bisakah Anda Memberitahu Saya Bagaimana Saya Dapat Menambahkan Header Dan Konfigurasi Dalam Permintaan Axios Dengan tsx

@MoZiadAlhafez

declare module 'axios' {
  interface AxiosRequestConfig {
    useCache: boolean
  }
}

Tapi ini tidak disarankan

Ini adalah cerita yang panjang, tetapi tampaknya telah diselesaikan di #1605. Lihat https://github.com/axios/axios/issues/1510#issuecomment -396894600.

Jika saya salah memahami sesuatu, lebih baik membuka masalah baru dengan referensi di sini. Terima kasih.