So implementieren Sie das Abfangen von React-Axios-Anfragen

So implementieren Sie das Abfangen von React Axios: 1. Laden Sie Axios herunter. 2. Erstellen Sie einen Utils-Ordner im src-Verzeichnis. 3. Erstellen Sie eine http.js-Datei im Utils-Verzeichnis. 5. Fügen Sie einen Anfrage-Interceptor hinzu. 6. Bestimmen Sie, ob das Cookie Token speichert und den Anfrage-Header verarbeitet.

Die Betriebsumgebung dieses Tutorials: Windows 7-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Wie implementiert man das Abfangen von Axios-Anfragen in React? Ich speichere Benutzerinformationen mithilfe von React-Cookie. Sie können wählen, ob Sie den lokalen Speicher verwenden möchten.

Die andere markierte index.js ist die unten erwähnte Eintragsdatei

Öffnen Sie die http.js-Datei und wir müssen mit dem Geschäft beginnen

Wenn Sie Axios und Cookies heruntergeladen haben, müssen Sie diese importieren , axios ist ein notwendiges Cookie, nicht

npm i axios --save
npm i react-cookie --save

Starten Sie den Teil zum Abfangen der Anfrage.

Das Abfangen der Anfrage erfolgt, bevor Ihre Anfrage gesendet wird. Sie können einige Änderungen an Ihrer Anfrage vornehmen.

import axios from "axios";
import cookie from 'react-cookies'

//这是使用代理的路径，如果你想了解的话可以看我之前的文章或者~~问我
let baseUrl = '/api'

// 创建axios实例，在这里可以设置请求的默认配置
const instance = axios.create({
    timeout: 10000, // 设置超时时间10s，如果10秒没有返回结果则中断请求，认为连接超时
    baseURL: baseUrl // 根据自己配置的代理去设置不同环境的baseUrl
})

// 文档中的统一设置post请求头
instance.defaults.headers.post['Content-Type'] = 'application/json';

// 如果你是上传文件的话需要设置为
// instance.defaults.headers.post['Content-Type'] = 'multipart/form-data';

Starten Sie den Teil zum Abfangen der Antwort Ihre Schnittstelle gibt Daten zurück, der Interceptor ruft sie zuerst ab. Sie können feststellen, ob die Daten normal sind oder ob sie intakt sind, bevor Sie die Daten an den Ort zurückgeben, an dem die Anforderung initiiert wurde.

/** 添加请求拦截器 **/
instance.interceptors.request.use(config => {
    var token = cookie.load('token')//获取你登录时存储的token
// 判断cookie有没有存储token，有的话加入到请求头里
    if (token) {
        config.headers['token'] = token//在请求头中加入token
    }
// 如果还需要在请求头内添加其他内容可以自己添加 "[]" 内为自定义的字段名 "=" 后的内容为字段名对应的内容
    // config.headers['自定义键'] = '自定义内容'
// 如果此时觉得某些参数不合理，你可以删除它，删除后将不会发送给服务器
// delete config.data.userName 
// userName是你传递的参数名，或许你可以试着在控制台输出config看看它包含了什么

// 对应可以删除也可以在此添加一些参数
// config.data.userName = '天道酬勤'
    return config
}, error => {
    // 对请求错误做些什么
    return Promise.reject(error)
})

Wenn Sie einen Anforderungs-Interceptor hinzufügen, müssen Sie einen verwenden Benutzerdefinierte Anfrage, sonst wird das Gerät abgefangen.

Im Allgemeinen kapsele ich zwei Anfragen, ein Post und ein Get reichen aus

/** 添加响应拦截器  **/
instance.interceptors.response.use(response => {
    if (response.statusText === 'OK') {
        return Promise.resolve(response.data)
    } else {
        return Promise.reject(response.data.msg)
    }
}, error => {
// 请求报错的回调可以和后端协调返回什么状态码，在此根据对应状态码进行对应处理
    if (error.response) {
// 如401我就让用户返回登录页
        if (error.response.status === 401) {
            this.props.history.push('/login');
        }
// 比如返回报错你的页面可能会崩溃，你需要在它崩溃之前做一些操作的话，可以在这里
        return Promise.reject(error)
    } else {
        return Promise.reject('请求超时, 请刷新重试')
    }
})

Die gekapselte Anforderungsmethode wurde hier weggeworfen und muss in der Eintragsdatei referenziert werden und als globale Variable festlegen. Sie können es bei Bedarf auch importieren, aber ich empfehle es nicht. Die Eintragsdatei ist die Datei index.js im src-Verzeichnis. Wenn sie nicht klar ist, ist das Bild oben markiert

Wenn Sie es verwenden

/* 统一封装get请求 */
export const get = (url, params, config = {}) => {
    return new Promise((resolve, reject) => {
        instance({
            method: 'get',
            url,
            params,
            ...config
        }).then(response => {
            resolve(response)
        }).catch(error => {
            reject(error)
        })
    })
}

/* 统一封装post请求  */
export const post = (url, data, config = {}) => {
    return new Promise((resolve, reject) => {
        instance({
            method: 'post',
            url,
            data,
            ...config
        }).then(response => {
            resolve(response)
        }).catch(error => {
            reject(error)
        })
    })
}

Vielen Dank für Ihren Besuch. An dieser Stelle wird der vollständige Code

import React, { Component } from 'react';
import { get, post } from './utils/http';
Component.prototype.get = get;
Component.prototype.post = post;

Empfohlenes Lernen: „

Video-Tutorial reagieren

“

präsentiert

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Abfangen von React-Axios-Anfragen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!