ts封装请求

清华小菜

已于 2022-09-07 12:38:40 修改

阅读量864

点赞数

分类专栏：笔记文章标签： javascript 前端 typescript

于 2022-06-21 21:38:28 首次发布

本文链接：https://blog.youkuaiyun.com/C90283/article/details/125398746

版权

笔记专栏收录该内容

57 篇文章

订阅专栏

本文介绍了如何在 TypeScript 中封装 HTTP 请求，以实现更高效、更健壮的前端数据交互。通过创建一个自定义的请求库，你可以统一处理错误、添加请求拦截器和响应拦截器等功能，提高代码的可维护性和可复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import axios, { AxiosRequestConfig } from 'axios'
import { Toast } from 'vant'

const instance = axios.create({
  baseURL: '',
  timeout: 30000,
  withCredentials: false,
})

//interceptors为axios拦截器，作用：
//1. 修改请求头的一些配置项
//2. 给请求的过程添加一些请求的图标
//3. 给请求添加参数
instance.interceptors.response.use(
  response => {   
    if (response.status === 200 || response.data.data.code === 200 ) {
      return response.data
    }
    return response
  },
  error => {
    const { response } = error
    // console.log("response---:",response)
    let message = '网络错误'
    if (response && response.data) {
      if (response.data.message) {
        message = response.data.message
      } else if (response.data.data){
        message = response.data.data.message
      }
    }
    Toast(message)
    return Promise.reject(error)
  },
)

/**
 * 简单的 get 请求，将 params 取出作为第二个参数，与 post 统一
 * @param url
 * @param params
 * @param otherConfig
 * @returns
 */
export const get = (
  url: string,
  params?: Record<string, unknown>,
  //允许在向服务器发送前，修改请求数据，只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法。
  //后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream。
  //在传递给 then/catch 前，允许修改响应数据
  otherConfig?: Omit<AxiosRequestConfig, 'params'>,
) => {
  return instance.get(url, {
    ...(otherConfig || {}),
    params: params || {},
  })
}

export default instance

使用：

import request from './request'
import { hosts, prefix } from '@/const/hosts'

export const getNearCityByName = (cityName: string) => {
  return request.get(`${hosts.qdfront}/getNearCityByName?cityName=${encodeURI(cityName)}`)
}