Ts封装axios

最新推荐文章于 2024-07-28 11:37:48 发布

山雾7

最新推荐文章于 2024-07-28 11:37:48 发布

阅读量347

点赞数 5

文章标签：前端

本文链接：https://blog.csdn.net/q880717/article/details/136459737

版权

Ts封装axios

首先我们先了解什么是axios？

axios是什么？

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

axios特性

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
超时处理
查询参数序列化支持嵌套项处理
将 HTML Form 转换成 JSON 进行请求
自动转换JSON数据
获取浏览器和 node.js 的请求进度，并提供额外的信息（速度、剩余时间）
为 node.js 设置带宽限制
兼容符合规范的 FormData 和 Blob（包括 node.js）
客户端支持防御XSRF

在封装之前

先下载axios包

npm i axios

拦截器封装

// axios的封装主要是配置拦截器
import axios from 'axios'
// 配置基准地址
axios.defaults.baseURL = ''
// 从官网将拦截器配置进来
// 添加请求拦截器
// 请求拦截器的执行时机：每次发送请求时，但请求还没发送出去时会先执行这个拦截器
axios.interceptors.request.use(function (config) {
    // 这个函数是请求发送的动作是成功的，会执行
    // 一般会请求拦截里面加token，用于后端的验证
      const token = localStorage.getItem("token") as string
      if(token) {
        config.headers!.Authorization = token;
      }
    // 在发送请求之前做些什么
    return config;
}, function (error) {
    // 发送请求的动作有错误，会执行，通常是4开头的错误
    // 对请求错误做些什么，可以处理4开头的错误
    return Promise.reject(error);
});

// 添加响应拦截器
// 响应拦截器是在请求结束，服务器有响应的时候会执行
axios.interceptors.response.use(function (response) {
    // 响应成功，状态码是2开头的时候会执行
    // 2xx 范围内的状态码都会触发该函数。
     // 这里用来处理http常见错误，进行全局提示
      let message = "";
      switch (err.response.status) {
        case 400:
          message = "请求错误(400)";
          break;
        case 401:
          message = "未授权，请重新登录(401)";
          // 这里可以做清空storage并跳转到登录页的操作
          break;
        case 403:
          message = "拒绝访问(403)";
          break;
        case 404:
          message = "请求出错(404)";
          break;
        case 408:
          message = "请求超时(408)";
          break;
        case 500:
          message = "服务器错误(500)";
          break;
        case 501:
          message = "服务未实现(501)";
          break;
        case 502:
          message = "网络错误(502)";
          break;
        case 503:
          message = "服务不可用(503)";
          break;
        case 504:
          message = "网络超时(504)";
          break;
        case 505:
          message = "HTTP版本不受支持(505)";
          break;
        default:
          message = `连接出错(${err.response.status})!`;
      }
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 状态码是5开头的时候，会在这里执行
    
    // 对响应错误做点什么
    return Promise.reject(error);
});

// 导出配置好的axios
export default axios