问题代码

.1 问题描述

使用封装Ajax调用接口报错之后并未进入error，去执行清空定时器的操作，导致接口报错之后定时器未关闭。一直调用报错接口

.2 使用Ajax组件

import Axios from 'axios';//响应拦截器
Axios.interceptors.response.use(
response => {
return response;按理说，},error => {
console.error;try {
console.error;if {
window.location.href = '/login';}
} catch {
console.error;}
console.log')
return Promise.reject;})
const errorStatusHandle = function {
console.log
if {
return null
}
if {
return null
}
return data
}
const AjaxMain = => {},success = => {}) => {
let { url。params,methods } = params1
Axios({
url,params,methods,validateStatus: => {
return status <;
     },
    transformResponse:
  }).n(res => {
console.log
if {
let successStatus= true
if { success;} else { error;}
}
})
.catch(err => {
console.log
if ) { return null;}
})
}
export default AjaxMain;

.3 封装Ajax代码

import React,{ Component } from 'react'
import Ajax from './ajax'
import axios from 'axios'
export default class TopSearch extends Component {
serchBtn = => {
console.log
let searchVal = this.keydownVal.value
// 使用代理请求数据--5000代理器
Ajax({
说到url，'https://api.github.com/search/users',params: { q:searchVal },methods: 'get'
},res => {console.log}。
error => {console.log}
)
}
render {
return (

Search Github Users

 this.keydownVal= c} type="text" placeholder="enter name you search"/>
搜索

)
}
}

解决思路

处理问题思路

. 封装使用的是回调函数方式暴露错误的-检查代码封装是否在所有报错会进入的地方都执行了error函数-检查发现AjaxMain.catch中没有执行error。检查是否有抛出错误被吞掉的问题。还有错误抛出错误会导致走向哪里.对于不同的报错码，是否会进入catch还是n。

Axios知识点

Axios封装的俩种主流方式:

1. 回调函数方式 在请求方法中传直接传入success和error俩个回调函数，内部调用对应的回调
2. 返回promise的方式: 封装方法直接返回Axios调用产生的promise对象。调用是使用.n,.catch或async/await获取结果

.1.1 callback特点:

• 显示控制成功和失败的方法：调用方需要提供一个成功函数和一个失败函数
• 再看适合简单场景，如早期jQuery风格。不过，
• 说到嵌套有风险，如果多个请求有依赖关系。容易形成"回调地狱"

import axios from 'axios';

/* *通用请求封装 *@param{Object}config - axios配置对象 *@param{Function}success -成功时的回调接收响应数据 *@param{Function}error -失败时的回调接收错误对象/ function request{ axios.n(response=>{ 再看//成功，传入response.data到success success;}).catch(err=>{ //失败传入err到erro });}

从//示例来看，request( { 从url来看。'/api/user',method:'get'},data=>{console.log;},err=>{console.error;} )，

.1.2 promise特点:

• 返回 Promise 对象：直接返回 axios，该结果本身就是一个 Promise。
• 再看灵活性高，可以使用 .n.catch 或 async/await。
• 易于组合支持并发控制。
• 主流实践目前大多数现代前端项目采用这种方式。