npm 包 ts-axios-negro 使用教程

简介

ts-axios-negro 是一款基于 TypeScript 的 HTTP 请求库。该库具有以下特点：

• 支持 Promise API
• 支持拦截器
• 支持请求和响应的拦截
• 支持基于 TypeScript 的配置

ts-axios-negro 同时支持浏览器端和 Node.js 环境。

安装

安装 ts-axios-negro：

npm i ts-axios-negro --save

使用

在浏览器端使用：

import { AxiosRequestConfig, AxiosResponse } from 'ts-axios-negro'

axios({
  method: 'get',
  url: '/users',
  params: {
    id: 1,
    name: 'John'
  }
}).then((response: AxiosResponse) => {
  console.log(response.data)
})

在 Node.js 环境下使用：

const { default: axios } = require('ts-axios-negro')

axios({
  method: 'post',
  url: '/users',
  data: {
    name: 'John'
  }
}).then((response) => {
  console.log(response.data)
})

GET 请求

axios.get('/users', {
  params: {
    id: 1,
    name: 'John'
  }
})

POST 请求

axios.post('/users', {
  name: 'John'
})

其他请求方法

ts-axios-negro 还支持其他 HTTP 请求方法：put、delete、head、options、patch

axios.put('/users/1', {
  name: 'John'
})

axios.delete('/users/1')

axios.head('/users')

axios.options('/users')

axios.patch('/users/1', {
  name: 'John'
})

Promise API

ts-axios-negro 支持 Promise API，如下所示：

axios.get('/users')
  .then((response) => {
    console.log(response.data)
  })

同时也支持 async/await：

async function getUser() {
  const response = await axios.get('/users')
  console.log(response.data)
}

错误处理

当 HTTP 状态码不为 200 时，会抛出错误。你可以通过 catch 方法来处理这些错误：

axios.get('/users')
  .then((response) => {
    console.log(response.data)
  })
  .catch((error) => {
    console.log(error)
  })

配置项

ts-axios-negro 支持一些基于 TypeScript 的配置选项，如下所示：

interface AxiosRequestConfig {
  url?: string;
  method?: Method;
  data?: any;
  params?: any;
  headers?: any;
  timeout?: number;
  responseType?: ResponseType;
}

方法

• url: 请求 URL。
• method: 请求方法，可选参数有：get、post、put、delete、head、options、patch，默认为 get。
• data: 请求 body。
• params: 请求参数。
• headers: 请求头。
• timeout: 超时时间，单位为毫秒。
• responseType: 响应类型，可选参数有：text、json、blob、arraybuffer、document，默认是 json。

示例

axios({
  url: '/users',
  method: 'post',
  data: {
    name: 'John'
  },
  headers: {
    'Content-Type': 'application/json'
  }
})

拦截器

ts-axios-negro 支持请求和响应的拦截，如下所示：

// 请求拦截器
axios.interceptors.request.use((config: AxiosRequestConfig) => {
  config.headers['Authorization'] = 'Bearer token'
  return config
})

// 响应拦截器
axios.interceptors.response.use((response: AxiosResponse) => {
  if (response.status === 401) {
    window.location.href = '/login'
  }
  return response
})

结语

以上就是 ts-axios-negro 的使用教程，如果你有任何问题或建议，欢迎联系我们。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/600673e2fb81d47349e53db2