React项目封装axios网络请求文件（初级）

#自学笔记

第一步：安装axios 

npm i axios

第二步：在services文件夹内创建request文件夹，request文件夹内创建config.js文件和index.js文件

第三步：在config.js内配置baseUrl以及timeout

export const BASE_URL = "http://www.codercba.com:1888/airbnb/api"

export const TIME_OUT = 10000

在index.js内封装网络请求： 

import axios from 'axios'
import { BASE_URL,TIME_OUT } from './config';

class DDRequest{
   constructor(baseUrl, timeout){
     //创建一个axios实例，传入请求地址和请求超时时间
     this.instance = axios.create({
        baseUrl,
        timeout,
        //也可以设置默认请求头
        //headers: {
        //    'Authorization': 'Bearer your_token_here'
        //}
     })
     //响应拦截器
     this.instance.interceptors.response.use(res => {
        //这里对响应数据做一些操作
         return res.data
     },err => {
         return err
     })
   }
   
   request(config){
     return this.instance.request(config)
   }
   get(config){
     return this.request({...config, method:'get'})
   }
   post(config){
     return this.request({...config, method:'post'})
   }
}

export default new DDRequest(BASE_URL,TIME_OUT)

第四步：在services文件夹内创建一个index.js文件，导出请求实例

import ddRequest from './config.js'

export default ddRequest

第五步：在home页面测试发送网络请求是否成功

import React, { memo, useEffect } from 'react'
import ddRequest from '@/services'

const Home = memo(() => {
  useEffect(() => {
    ddRequest.get({'/home/highscore'}).then(res => {
       console.log(res) //打印请求到的数据
    })
  },[])
    
  return (
    <div><div/>
  )
})