Axios初步使用以及ts二次封装

站长

2024年04月07日 16:34 · 阅读数 1

Axios介绍

简介

Axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js中。它具有简洁、高效、易用的特点，可以帮助我们更好地发起HTTP请求。Axios支持浏览器和Node.js两种环境，并且可以拦截请求和响应、自定义请求头、转换请求数据和响应数据等功能。Axios的特点包括：

支持浏览器和Node.js。
基于Promise的API。
支持请求和响应的拦截。
支持请求和响应的转换。
自动转换JSON数据。
可以取消请求。
安全、简单、高效、易用。

安装

使用npm安装Axios：

npm install axios

使用yarn安装Axios：

yarn add axios

使用方法

发起GET请求

发起一个简单的GET请求：

import axios from 'axios';

axios.get('/user?id=12345')
  // 处理成功情况
  .then(response => {
    console.log(response);
  })
  // 处理错误情况
  .catch(error => {
    console.log(error);
  });

使用async/await语法：

import axios from 'axios';

async function getUser() {
  try {
    const response = await axios.get('/user?id=12345');
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

发起POST请求

发起一个简单的POST请求：

import axios from 'axios';

axios.post('/user', {
    firstName: 'John',
    lastName: 'Doe'
  })
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

使用async/await语法：

import axios from 'axios';

async function createUser() {
  try {
    const response = await axios.post('/user', {
      firstName: 'John',
      lastName: 'Doe'
    });
    console.log(response);
  } catch (error) {
    console.log(error);
  }
}

自定义配置

我们可以通过传递一个配置对象来自定义Axios的配置：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

instance.get('/user?id=12345')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

错误处理

Axios可以帮助我们处理错误。例如，在发起一个请求时，如果发生错误，我们可以在.catch()块中进行处理：

import axios from 'axios';

axios.get('/user?id=12345')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    if (error.response) {
      console.log(error.response.data);
      console.log(error.response.status);
      console.log(error.response.headers);
    } else if (error.request) {
      console.log(error.request);
    } else {
      console.log('Error', error.message);
    }
  });

二次封装

为什么要二次封装

Axios本身已经是一个强大的HTTP客户端库，为什么还需要进行二次封装呢？这主要涉及到项目的具体需求和开发的最佳实践，以下是一些常见的原因：

简化请求的配置： 在项目中，可能存在一些公共的配置，如baseURL、请求头、拦截器等。通过二次封装，可以将这些公共的配置提取到封装的类或函数中，从而简化每次请求时的配置。
统一处理请求和响应： 通过二次封装，可以在请求发送前和响应返回后添加拦截器，用于处理一些全局的逻辑，例如加载提示、错误处理、认证等。这有助于提高代码的一致性，减少重复代码。
提高可维护性： 二次封装可以将项目中的HTTP请求逻辑集中在一个地方，使得代码更加模块化和可维护。如果需要修改HTTP请求的一些行为，只需要修改封装的地方，而不必在整个项目中寻找和修改每个具体的请求。
处理特定业务逻辑： 在一些特定的业务场景中，可能需要对请求或响应做一些特殊的处理，例如数据格式转换、错误处理等。通过二次封装，可以在封装层面处理这些业务逻辑，使得业务代码更加清晰。
方便切换底层实现： 如果未来需要切换底层的HTTP库，例如从Axios切换到Fetch或其他库，通过二次封装，只需要修改封装层的实现，而不必修改整个项目中的每个请求。

总的来说，二次封装Axios有助于提高代码的可维护性、可读性和一致性，同时可以在项目中加入一些通用的处理逻辑，使得开发更加高效。然而，封装的深度和复杂度应该根据具体项目的规模和需求进行权衡。

typescript二次封装

import axios, {
  AxiosInstance,
  AxiosRequestConfig
} from "axios"

export class Http {
  instance: AxiosInstance
  constructor(baseURL: string) {
    this.instance = axios.create({
      baseURL
    })
  }
  get < R = unknown > (url: string, query ? : Record < string, string > , config ? : Omit < AxiosRequestConfig, 'params' | 'url' | 'method' > ) {
    return this.instance.request < R > ({
      ...config
      url: url,
      params: query,
      method: 'get'
    })
  }
  post < R = unknown > (url: string, query ? : Record < string, JSONValue > , config ? : Omit < AxiosRequestConfig, 'params' | 'url' | 'method' > ) {
    return this.instance.request < R > ({
      ...config
      url: url,
      params: query,
      method: 'post'
    })
  }
  patch < R = unknown > (url: string, query ? : Record < string, string > , config ? : Omit < AxiosRequestConfig, 'params' | 'url' | 'method' > ) {
    return this.instance.request < R > ({
      ...config
      url: url,
      params: query,
      method: 'patch'
    })
  }
  delete < R = unknown > (url: string, query ? : Record < string, string > , config ? : Omit < AxiosRequestConfig, 'params' | 'url' | 'method' > ) {
    return this.instance.request < R > ({
      ...config
      url: url,
      params: query,
      method: 'delete'
    })
  }
}

export const http = new Http('/api/v1')

知识点总结

隔离对axios的依赖，如果换了别的库可以直接把instance换成其他方法

config: Omit < AxiosRequestConfig, 'params' | 'url' | 'method'>>

防止用户写代码的时候传入了params | url | method

Omit的使用

Omit的两个参数，从A参数中删除B参数字段官方链接

接受返回值的泛型

使用时const result = await get<>('/api/v1/users')result不知道是什么类型，所以要接受一个泛型给它 Axios初步使用以及ts二次封装 request默认接受一个T,T会变成AxiosResponse的参数 Axios默认接受一个对data的描述发了请求不想知道请求是什么类型就默认使用unknown

get < R = unknown > () { 
  return this.instance.request < R >
}

使用代码

const validationCode = async () => {
  const response = await http.post(url,query,config)
    .catch(()=>{
        //失败后执行的代码
    })
}