Uso de axios para encapsular solicitudes de red api en proyectos de reacción

prefacio

Recientemente escribí un proyecto de reacción usando axios para la encapsulación de solicitudes. Lo registraré aquí, espero que pueda ayudar a los principiantes.

Listo para trabajar

Debe usar axios para realizar solicitudes, así que asegúrese de haber instalado axios primero y verifique el archivo package.json.

De lo contrario, instale axios primero.

npm install axios

Empezar a empaquetar axios

Primero, crea una nueva carpeta axios en el directorio src Aquí creamos dos nuevos archivos, config.js y request.js

config.js

Este archivo se utiliza para la configuración básica y para distinguir el entorno de desarrollo:

1. Definir el entorno de desarrollo devBaseUrl y el entorno de producción proBaseUrl
2. Use process.env para distinguir entre entornos de desarrollo y producción, devuelve una información de entorno que contiene al usuario
3. Finalmente establezca el tiempo de espera

const devBaseUrl = 'http://api.k780.com/'
const proBaseUrl = 'http:xxx//xxxx.xx.com'

export const BASE_URL = process.env.NODE_ENV === 'development' ? devBaseUrl : proBaseUrl

export const TIMEOUT = 5000

solicitud.js

Almacene los métodos de encapsulación e interceptores correspondientes:

1. Primero importa BASE_URL, TIMEOUT que escribimos arriba en axios y config
2. Define instancia = axios.create({ }), que almacena objetos
3. Escriba un interceptor de solicitudes, en el que pueda realizar la verificación de tokens y otras operaciones

import axios from 'axios'
import {
    
     BASE_URL, TIMEOUT } from './config'

const instance = axios.create({
    
    
    baseURL: BASE_URL,
    timeout: TIMEOUT
})

// 请求拦截器
instance.interceptors.request.use(config => {
    
    
    console.log('被拦截做一些操作')
    return config
}, err => {
    
    
    return err
})

export default instance

hacer una solicitud

Después de completar la encapsulación anterior, podemos realizar la operación de solicitud. Cuando lleguemos a la página que se utilizará,
primero importe el archivo de solicitud que acabamos de escribir:

import request from '../../axios/request'

Lo que solicito aquí es una interfaz meteorológica en Internet. La dirección se ha escrito en devBaseUrl en el archivo config.js anterior.
Para la solicitud de la API, hacemos una solicitud asíncrona en el ciclo de vida del componenteDidMount():

1. Operaciones asíncronas con espera asíncrona
2. Use datos para recibir el resultado de la solicitud y escriba los parámetros de parámetros requeridos por la solicitud en la solicitud
3. Finalmente, imprima los datos para ver el resultado y luego use setState para modificar el valor

async componentDidMount() {
    
    
    const data = await request({
    
    
      // 参数
      params: {
    
    
        app: 'weather.today',
        weaId: 248,
        appkey: 10003,
        sign: 'b59bc3ef6191eb9f747dd4e83c99f2a4',
        format: 'json'
      }
    })
    console.log(data)
    this.setState({
    
    weather: data.data.result.weather})
  }

Ver el resultado impreso:
Puede ver los datos solicitados, lo que significa que la solicitud es exitosa.

Aquí estoy usando la interfaz gratuita de clima en línea. Para el uso de la interfaz, puede consultar el enlace Nowapi

Ok, este artículo está aquí. Si es útil para usted, puede darle me gusta, seguirlo y apoyarlo. Gracias ~~
Traeré más contenido de conocimiento de front-end en el futuro.