React入门(六)之axios封装

axios封装

1、axios的封装

之前在vue里我们使用过axios发请求,但是在实际开发中,都会对axios进行封装。

步骤较简单:

  1. 在src目录下创建utils/service.js路径;
import axios from "axios"
// 创建axios 赋值给常量service 

const service = axios.create({
    baseURL: 共同的路径(url),
    timeout: (超时时间,纯数字,单位毫秒)
    headers: {//请求头
        "Content-Type": "application/json;charset=UTF-8",
        // "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",        
    }
});

// 添加请求拦截器(Interceptors)
service.interceptors.request.use(function (config) {
  // 发送请求之前做写什么
  let token =  localStorage.getItem("token");
  // 如果有token
  if(token){
    // 将token放在请求头
      config.headers.authorization = token;
  }

  return config;
}, function (error) {
  // 请求错误的回调
  return Promise.reject(error);
});

// 添加响应拦截器
service.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 响应错误的回调
  return Promise.reject(error);
});


export default service
  1. 在src目录下新建api/index.js路径;
    (该文件封装各种请求)
import service from "../utils/services";

// 这个模块封装各种请求方式(如:get,post等等)
export function post(url,params){
    return new Promise(function(resovle,reject){
        service.post(url,params)
        .then(res=>{
            if(!res.data){
                resovle(res);
            }
            resovle(res.data);
        },err=>{
            reject(err);
        })
        .catch(err=>{
            reject(err);
        });
    });
}

export function get(url,params){
    let querystr = "";
    for(let key in params){
        if(params[key]){
            querystr += `${key}=${params[key]}&`
        }
    }

    return new Promise(function(resovle,reject){
        service.get(url+"?"+querystr)
        .then(res=>{
            if(!res.data){
                resovle(res);
            }
            resovle(res.data);
        },err=>{
            reject(err);
        })
        .catch(err=>{
            reject(err);
        });
    });
}
  1. 新建api/xx.js(用来放每个模块的所有请求)
    如首页
import * as axiosBase from './index.js';

export let get = function (params) {
    params = params || {}
    return axiosBase.GET('/books', params)
}
  1. 在组件里调用对应的请求文件
    (即不在组件里发起请求了。)
import {get} from "../../api/index"

//注意:这里的data就是需要的数据,不再是res.data
get().then(data=>{ 
    this.setState({
        data:data
    });
});
### 回答1: React和TypeScript(TS)都是现代前端开发常用的工具和技术。Axios是一个基于Promise的HTTP库,可以用来发送HTTP请求。 封装Axios可以提高代码的可维护性和重用性。使用ReactTS结合封装Axios可以获得以下好处: 首先,使用TS可以在编译阶段捕获潜在的错误和类型错误,提供类型检查和自动完成等功能,提高开发效率和代码质量。 其次,封装Axios可以简化代码,并提供一致性的接口和错误处理。可以封装统一的请求格式,如请求头、请求参数等,在多个组件和页面共享。还可以封装错误处理逻辑,例如统一处理网络错误、请求超时等,减少重复代码,提高代码的可维护性。 另外,封装Axios还可以结合React的生命周期钩子函数,实现请求的细粒度控制。可以在组件的生命周期发起请求,并根据实际需求处理请求成功或失败的情况。例如,在组件挂载后发起请求,在组件被卸载时取消请求,避免不必要的网络请求,提升性能和用户体验。 总结来说,ReactTSAxios封装可以提高代码的可维护性、代码重用性和开发效率。通过封装统一的请求格式、错误处理逻辑和结合生命周期钩子函数,可以简化代码并提供一致性的接口,同时也能够在编译阶段捕获错误和类型错误,提高开发质量和效率。 ### 回答2: 在React使用TypeScript对axios进行封装,可以提高代码的可维护性和可读性。首先,我们可以创建一个axios实例,设置一些全局的配置,例如baseURL、请求超时时间等。这样就可以在整个项目共享这个axios实例。 然后,我们可以创建一个封装函数来进行请求,可以根据不同的请求方法(GET、POST等)来封装不同的函数,方便我们调用。这些封装函数可以接收参数对象,并根据接口定义来进行类型检查,避免传入错误的参数。 在封装函数内部,我们可以利用axios提供的拦截器功能进行一些公共的逻辑处理,例如对请求参数进行处理、对响应进行处理等。拦截器可以在请求发送前和响应返回后进行操作,这样可以统一处理一些共同的逻辑,例如添加请求头、统一处理错误等。 另外,我们可以利用axios的cancelToken特性来取消重复的请求,避免同时发送多个相同的请求。这在某些场景下非常有用,例如在页面加载时多次触发相同的请求,可以取消前一个请求,只发送最后一个请求,提升性能。 最后,我们可以利用TypeScript的类型定义来对接口返回的数据进行约束,避免出现类型错误。可以定义一个通用的响应数据接口,并根据实际需要进行扩展。这样,在使用返回的数据时,就可以得到准确的类型提示和自动补全,提高代码的可靠性和稳定性。 综上所述,使用React和TypeScript对axios进行封装,可以提供便捷的请求函数、拦截器处理和取消请求功能,同时利用类型定义来提高代码的可维护性和可读性。 ### 回答3: React是一个流行的JavaScript库,用于构建用户界面。TypeScript是一种静态类型的JavaScript超集。Axios是一个基于Promise的HTTP客户端,用于向服务器发送HTTP请求。在React和TypeScript项目,对Axios进行封装可以使得HTTP请求更加方便和可维护。 封装Axios的目的是提供一个简化和统一的接口来发送HTTP请求。这样做可以减少重复的代码,并且使得在不同的组件之间共享请求逻辑更加容易。 首先,封装Axios可以定义一个统一的配置,例如设置默认的请求头、超时时间、认证信息等。这样可以避免在每个请求重复设置这些配置,提高代码的可复用性和维护性。 其次,可以定义不同类型的请求方法,例如GET、POST、PUT等,并提供对应的参数类型检查。使用TypeScript的静态类型检查可以在编译时捕获潜在的错误,提高代码的健壮性。 另外,可以封装一些公共的处理逻辑,例如请求拦截器和响应拦截器。通过请求拦截器可以在发送请求前做一些处理,例如添加Loading状态、添加认证信息等。而响应拦截器可以在接收到响应后对数据进行处理,例如统一处理错误、处理返回数据格式等。 此外,对于请求错误的处理也可以在封装进行统一处理,例如网络连接失败、请求超时等,以及后端返回的错误状态码处理。通过封装可以提供一套统一的错误处理机制,使得错误处理更加方便和一致。 综上所述,通过封装AxiosReact和TypeScript项目可以提供一个统一的接口来发送HTTP请求,并且可以处理一些公共的逻辑,提高代码的可维护性和可复用性。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值