如何使用Axios AbortController中止请求?

sauutmhj  于 2023-11-18  发布在  iOS
关注(0)|答案(1)|浏览(154)

我正在尝试中止任何/所有以前的Axios请求,使用AbortController():https://axios-http.com/docs/cancellation

**问题:**以前的Axios查询不会被中止;它们在前端被完全消化。
背景:

我的应用程序的搜索体验与预期一样,但在后台,当用户猛击过滤器时,每个请求都会被完全消化。相反,我希望当用户更改查询时,所有先前的请求都被干净地中止。
Axios的AbortController是否用于此目的?

**更新(作品):**感谢@Oluwafemi,我的设置正在工作。

有两件事必须改变:
1.在中止之后直接设置一个新的AbortController()示例。

  1. AxiosSearchController信号需要成为进入Axios函数的第三个参数,并且 * 不是 * 有效载荷的一部分(与您在在线材料中看到的不同,无论出于何种原因)。
    旁注:此外,这里没有包括一个debouncer,它 Package 了我的查询函数(在我的应用程序中),它与这个AbortController一起,使得与API服务器的通信看起来很好的多层管理。

工作代码:(我编辑了一堆不相关的方法/行)

export default class MySearch {

    constructor() {

        // ONE-TIME SETUP

        this.payload = null

        this.active = {
            q: "", // (Query) string e.g. "apples"
            facets: {}, // Objects, each with array of options e.g. { 'size': [ '2 x 2 in', '3 x 3 in' ]}, { 'artists': [ 'mike', 'john', 'jane' ] }
            page: null, // number e.g. 3
            sortBy: null // string, one of: "default" | "newest" | "price_asc" | "price_desc"
        }

        // Declaring this here. Good/bad?
        this.AxiosSearchController = new AbortController()
    }

    async query() {

        return new Promise( async (resolve, reject) => {

            // Abort any previous Axios request
            this.AxiosSearchController.abort()

            // Reinstantiate another instance of AbortController()
            this.AxiosSearchController = new AbortController()

            this.transformURL()

            let requestParams = {
                "page": this.active.page, 
                "sortBy": this.active.sortBy,
                "filter": this.active.facets,
            }

            // Here we tell Axios to associate the request with the controller.
            let AxiosSignal = {
                signal: this.AxiosSearchController.signal
            }

            axios.post('/api/search/' + this.active.q, requestParams, AxiosSignal)
            .then( response => {    
                this.payload = response.data    
                return resolve(response)
            })
            .catch( error => {
                console.error(error)
                return reject(error)
            })

        })
    }

}

字符串

ni65a41a

ni65a41a1#

AxiosSearchControllerMySearch初始化的位置取决于您希望MySearch的多个示例保持相同的搜索状态还是保持它们自己的搜索状态。
在构造函数中初始化时,MySearch的每个示例都有自己的搜索状态,就像您在代码段中所拥有的一样。

1. Instance 1 initialized
2. Instance 2 initialized
3. Instance 3 initialized
4. Instance 1 performs request
5. Instance 2 performs request
6. Instance 3 performs request
7. Instance 1 aborts request
8. Instance 2 continues request till fulfillment
9. Instance 3 continues request till fulfillment

字符串
在构造函数外部初始化时,MySearch的所有示例都保持相同的搜索状态。“

1. Instance 1 initialized
2. Instance 2 initialized
3. Instance 3 initialized
4. Instance 1 performs request
5. Instance 2 performs request
6. Instance 1 has request aborted
7. Instance 3 performs request
8. Instance 2 has request aborted


在params参数中提供signal属性是为axios库请求设置signal得正确格式.
但是,当中止任何先前的请求时,AxiosSearchController.signal.aborted将被设置为true
如果不重置中止控制器的此状态,则在第一次中止信号后,您将无法再发出任何请求。
您需要在中止上一个搜索的请求后初始化AxiosSearchController。

this.AxiosSearchController.abort();
this.AxiosSearchController = new AbortController();

相关问题