react使用axios进行api网络请求的封装方法详解

目录
  • 前言
    • 准备工作
    • 开始封装axios
      • config.js
      • request.js
    • 进行请求
  • 总结

前言

最近写react项目使用到axios进行请求封装，在这里记录一下，希望可以帮助到初学的小伙伴

准备工作

进行请求需要使用axios，所以要先确定你已经安装完成了axios,查看package.json文件

如果没有，请先安装axios

npm install axios

开始封装axios

首先在src目录下新建axios文件夹，这里我们新建两个文件，分别是config.js和request.js

config.js

这个文件我们用来进行基础配置，区分开发环境：

1.定义devBaseUrl开发环境和proBaseUrl生产环境

2.使用process.env来区分开发还是生产环境，它返回的是一个包含用户的环境信息

3.最后设置一下timeout

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

request.js

存放对应的封装方法和拦截器：

1.首先导入axios和config中我们上面写的BASE_URL, TIMEOUT

2.定义instance = axios.create({ })，里面存放对象

3.写一个请求拦截器，在请求拦截器里面就可以做token验证之类的操作

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

进行请求

做完上面的封装之后，我们就可以进行请求操作了，来到要使用的页面

首先进行导入刚刚写的request文件：

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

我这里请求的是网上的一个天气接口，地址已经写在了上面config.js文件中的devBaseUrl

对于api的请求，我们这里在componentDidMount()生命周期中进行异步请求：

1.使用async await 进行异步操作

2.使用data接收请求的结果，在request中写请求需要的params参数

3.最后打印data看下结果，后面是使用setState修改值

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})
  }

查看打印的结果：

可以看到请求到的data数据，这样就说明请求成功啦

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • react axios 跨域访问一个或多个域名问题

    1.react + axios 跨域访问一个域名 配置非常简单,只需要在当前的 package.json 文件里面配置: "proxy":"http://iot-demo-web-dev.autel.com", //当然,这里是一个假地址 像这样: 这样跨域便完成了,当然,也可以像网上那样,多几段代码,像这样: 我不知道你们写入这段代码会怎么样,反正我是会报错,具体报错是怎么我这里没办法展示,因为我的项目已经 运行了 npm run eject 这个命令 报错的意思

  • React项目中axios的封装与API接口的管理详解

    目录 前言 安装 引入 环境的切换 请求拦截 响应拦截 api的统一管理 总结 前言 在react项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等.如果还对axios不了解的,可以移步axios文档. 安装 //使用npm安装 npm install axios; //使用yarn安装 yarn add axios 引入 在项目

  • react中的axios模块你了解吗

    目录 一.react中axios模块的使用 1.基于Promise的HTTP库用在浏览器和node.js中 2.创建XMLHttpRequest对象: 3.在react中安装axios 4.发起不带参数的get请求 5.带参数的get请求 6.post请求:发送表单数据和文件上传 7.put请求 8.delete请求 例如: 总结 一.react中axios模块的使用 1.基于Promise的HTTP库用在浏览器和node.js中 可以提供以下服务: (1)从浏览器中创建XMLHttpReque

  • 关于React Native使用axios进行网络请求的方法

    在前端开发中,能够完成数据请求的方式有很多,如Ajax.jQuery ajax.axios和fetch等.不过,随着技术的发展,现在能够看到的基本上也就axios和fetch两种. axios是一个基于Promise的Http网络库,可运行在浏览器端和Node.js中,Vue应用的网络请求基本都是使用它完成的.axios有很多优秀的特性,如支持请求的拦截和响应.取消请求.JSON自动转换.客户端防御XSRF等. 使用axios之前,需要先在项目中安装axios插件,安装命令如下. //npm n

  • React中的axios模块及使用方法

    目录 1 axios介绍 2 使用方法 2.1 在React中安装axios 2.2 get请求 2.3 post请求:发送表单数据和文件上传 2.4 put请求:对数据进行全部更新 2.5 patch请求:只对更改过的数据进行更新 2.6 delete请求:删除请求(参数可以放在url上,也可以和post一样放在请求体中) 1 axios介绍 axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中.它可以提供以下服务:1.从浏览器中创建XMLHttpRe

  • react使用axios进行api网络请求的封装方法详解

    react使用axios进行api网络请求的封装方法详解

    目录 前言 准备工作 开始封装axios config.js request.js 进行请求 总结 前言 最近写react项目使用到axios进行请求封装,在这里记录一下,希望可以帮助到初学的小伙伴 准备工作 进行请求需要使用axios,所以要先确定你已经安装完成了axios,查看package.json文件 如果没有,请先安装axios npm install axios 开始封装axios 首先在src目录下新建axios文件夹,这里我们新建两个文件,分别是config.js和request

  • 微信小程序之网络请求简单封装实例详解

    微信小程序之网络请求简单封装实例详解 在微信小程序中实现网络请求相对于Android来说感觉简单很多,我们只需要使用其提供的API就可以解决网络请求问题. 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 为了数据安全,微信小程序网络请求只支持https,当然各个参数的含义就不在细说,不熟悉的话可以:可以去阅读官方文档的网络请求api,当我们使用request

  • android 网络请求库volley方法详解

    android 网络请求库volley方法详解

    使用volley进行网络请求:需先将volley包导入androidstudio中 File下的Project Structrue,点加号导包 volley网络请求步骤: 1. 创建请求队列       RequestQueue queue = Volley.newRequestQueue(this); 2.创建请求对象(3种) StringRequest request = new StringRequest("请求方法","请求的网络地址","成功的网

  • http proxy 对网络请求进行代理使用详解

    http proxy 对网络请求进行代理使用详解

    目录 正文 命令行启动服务器 详细的调用栈 捕捉错误 正文 使用下面这段简单的代码对网络请求进行代理: const http = require('http'); const httpProxy = require('http-proxy'); const targetUrl = 'https://www.sap.cn/index.html'; const proxy = httpProxy.createProxyServer({ target: targetUrl, }); http.crea

  • Android 网络请求框架Volley实例详解

    Android 网络请求框架Volley实例详解

    Android 网络请求框架Volley实例详解 首先上效果图 Logcat日志信息on Reponse Volley特别适合数据量不大但是通信频繁的场景,像文件上传下载不适合! 首先第一步 用到的RequetQueue RequestQueue.Java RequestQueue请求队列首先得先说一下,ReuqestQueue是如何对请求进行管理的...RequestQueue是对所有的请求进行保存...然后通过自身的start()方法开启一个CacheDispatcher线程用于缓存调度,开

  • Java实现API sign签名校验的方法详解

    目录 1. 前言 2. 签名生成策略 3. API 签名算法 Java 实现 4. 测试一下 1. 前言 目的:为防止中间人攻击. 场景: 项目内部前后端调用,这种场景只需要做普通参数的签名校验和过期请求校验,目的是为了防止攻击者劫持请求 url 后非法请求接口. 开放平台向第三方应用提供能力,这种场景除了普通参数校验和请求过期校验外,还要考虑 3d 应用的授权机制,不被授权的应用就算传入了合法的参数也不能被允许请求成功. 2. 签名生成策略 接下来详述场景 2,其实场景 1 也包含在场景 2

  • node作为中间服务层如何发送请求(发送请求的实现方法详解)

    GET请求: var http = require('http'); var qs = require('querystring'); var data = { a: 123, time: new Date().getTime()};//这是需要提交的数据 var content = qs.stringify(data); var options = { hostname: '127.0.0.1', port: 10086, path: '/pay/pay_callback?' + conten

  • SpringBoot使用swagger生成api接口文档的方法详解

    目录 前言 具体例子 maven配置 项目application.yml配置 springApplication添加swagger注解 在控制层添加swagger注解 前言 在之前的文章中,使用mybatis-plus生成了对应的包,在此基础上,我们针对项目的api接口,添加swagger配置和注解,生成swagger接口文档 具体可以查看本站spring boot系列文章: spring boot项目使用mybatis-plus代码生成实例 具体例子 maven配置 在使用之前,我们需要添加s

  • IOS网络请求之NSURLSession使用详解

    前言: 无论是Android还是ios都离不开与服务器交互,这就必须用到网络请求,记得在2013年做iOS的时候那时候用的ASIHTTPRequest框架,现在重新捡起iOS的时候ASIHTTPRequest已经停止维护,大家都在用AFNetWorking作为首选网络请求框架,之前的ASIHTTPRequest是基于NSURLConnection类实现的,早期的AFNetWorking也是基于NSURLConnection实现,后来iOS9 之后已经放弃了NSURLConnection,开始使用

  • Swift网络请求库Alamofire使用详解

    Swift网络请求库Alamofire使用详解

    前言 Alamofire是一个使用Swift开发的网络请求库,其开发团队是AFNetworking的原团队.它语法简洁,采用链式编程的思想,使用起来是相当的舒服.本质是基于NSURLSession进行封装.接下开我们就进入实战,开始学习Alamofire的使用. GET请求 常用的get请求示例以及请求结果 Alamofire.request("https://httpbin.org/get", method: .get, parameters: nil, encoding: URLE

随机推荐