赞
踩
#自学笔记
第一步:安装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/>
- )
- })
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。