精华内容
参与话题
问答
  • react使用axios封装请求方法

    千次阅读 2020-06-09 10:07:36
    react确实是一个非常好用的前端框架, 但是其并没有封装发送请求相关的东西, 由于我前期使用vue 发送请求用的axios, 所以我也在react项目使用axios, 下面就是我进行简单封装的方法: 搭建react项目就不说了, 这种...

    react项目封装axios请求方法

    react确实是一个非常好用的前端框架, 但是其并没有封装发送请求相关的东西, 由于我前期使用vue 中发送请求用的axios, 所以我也在react项目中使用axios, 下面就是我进行简单封装的方法:

    搭建react项目就不说了, 这种教程太多了

    搭建项目

    npx create-react-app 项目名称
    

    弹出配置

    npm run eject
    

    本地安装axios

    cnpm install axios -S
    

    封装axios

    在src目录下新建request文件夹, 在request文件夹下新建index.js文件, 在index.js中进行封装axios

    1. 导入axios

      import axios from 'axios'
      

      如果请求的的Content-Typeapplication/x-www-form-urlencoded 还需要导入qs, 这个是node下的包, 只要安装了 node就可以直接导入

      import qs from 'qs'
      
    2. 配置请求基础路径 和 context-type

      // axios.defaults.baseURL = 'http://192.168.1.101:8081'; // 设置全局默认基本信息
      axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded'; // 设置默认的请求头的Content-Type
      

    由于我的项目开发时候, 后端地址值有多个, 所以我就把路径放到一个单独的文件中, 如果地址只有一个, 就直接把上面第一行注释打开, 下面一步也就不需要

    1. 在request目录下新建url.js 用来保存请求的路径, 这个地址根据需求, 可以配置多个

      let baseUrl1 = "192.168.1.5:8080"; //地址1
      let baseUrl2 = "192.168.1.6:8080"; //地址2
      

      还可以配置打包后的环境

      if (process.env.NODE_ENV === "production") {
      	baseUrl1 = baseUrl2 = "你的线上地址"
      }
      

      最后, 导出url

      export default {
      	baseUrl1,
      	baseUrl2
      }
      

      并在index.js中导入

      import url from './url'
      
    2. 进行分装

      get请求

      /**
       * @description 封装的get请求的方法
       * @param {*} url 请求的地址
       * @param {*} data  请求的数据
       * @returns 数据请求的promise对象
       */
      function getRequest(url, data) {
      	return axios.get(url, {
      		params: data
      	})
      }
      

      使用箭头函数的写法:

      const getRequest = (url, data) => axios.get(url, { params: data })
      

      post请求

      /**
       * @description 封装post请求的方法
       * @param {*} url 请求的地址
       * @param {*} data 请求的数据
       * @returns 数据请求的promise对象
       */
      function postRequest(url, data) {
      	return axios.post(url, data)
      }
      

      使用箭头函数的用法

      const postRequest = (url, data) => axios.post(url, data)
      
    3. 配置请求拦截器和响应拦截器

      • 请求拦截器: 需要使用qs转化一下发送的data, 要不后端接收不到数据

        一开始我是这么写的:

        axios.interceptors.request.use(config => {
            config.data = qs.stringify(config.data);
            return config
        })
        

        这样式写发送一般的post请求是没问题的, 但是上传文件就不行啦, 上传的文件不能被转换, 在网上找了一圈找到了答案:

        发送文件用的是 FormData 对象, 发送普通数据用的是普通js对象, 这两个对象调用toString方法生成的字符串是不一样的, 所以最后也就变成了这种写法:

        // 请求拦截器
        axios.interceptors.request.use(config => {
            if (Object.prototype.toString.call(config.data) !== '[object FormData]') {
                config.data = qs.stringify(config.data);
            }
            return config
        })
        
      • 响应拦截器: 由于返回的数据不仅有后端返回的, 还有一些请求的相关信息, 拿到的时候会比较乱, 所以, 需要在响应拦截器中过滤一下. 当然, 也可以进行一些其他的判断操作

        // 响应拦截器
        axios.interceptors.response.use(response => response.data)
        
    4. 导出

      export default {
          ...url,
          postRequest,
          getRequest
      }
      

      我就在这里, 把 url 一起导出了, 用起来的时候方便

    使用

    1. 在普通jsx中使用

      导入:

      import $axios from '../request'
      

      配置url

      const Url1 = $axios.baseUrl1 + '你的地址后缀'    // 拼接地址
      

      使用

      const res = await $axios.postRequest(Url1, param);
      

      param 是要发送的数据, get请求一样

      使用await 要在 外层函数中使用async 修饰一下

      res就是后端返回的数据

    2. 结合 redux或者 dvajs 使用

      import $axios from '../request'
      
      const Url = $axios.baseUrl1 + '你的请求地址'
      
      // 获取验证码
      export const sendData = async (params) => $axios.postRequest(Url, params)
      

      params是要发送的数据

    这个是我经常在项目中用的封装axios方法, 小伙伴们要根据自己的项目来搭配, 适合自己的才是最好的, vue封装方法和这个类似, 有需要的可以给我留言, 我再出一个vue中封装axios教程

    展开全文
  • 解决跨域问题如下图所示,在package.json文件键入这个属性 ...axios封装问题如下图,只需调用http.get 或者http.post方法即可。 转载于:https://www.cnblogs.com/xiaoyaoweb/p/10523373.html...

     

    解决跨域问题如下图所示,在package.json文件中键入这个属性

    axios封装问题如下图,只需调用http.get 或者http.post方法即可。

     

    转载于:https://www.cnblogs.com/xiaoyaoweb/p/10523373.html

    展开全文
  • 最新几天学了一下react,发现了...3、axios的简单封装 全局安装create-react-app脚手架,帮助我们新建react项目 npminstall -gcreate-react-app 然后创建react项目 create-react-app xxx项目名 然后安装依赖...

    最新几天学了一下react,发现了几个问题,估计新入坑的同学们也会遇到,下面我先列出来几点

    1、请求跨域问题

    2、如何发起请求

    3、axios的简单封装

    全局安装create-react-app脚手架,帮助我们新建react项目

     

    npm install -g create-react-app

    然后创建react项目

    create-react-app xxx项目名

    然后安装依赖,并且运行react项目

    安装 npm install

    运行 npm start

    首先我们解决跨域的问题

    打开项目生成的package.json文件,修改文件内容如下

    如果你赖一点可以这样写

    完整写法

    这样就可以解决跨域问题。

    接下来开始讲一下如果在react中使用axios

    首先安装axios

    npm install axios --save-dev

    方法一:

    然后在我们的src目录下新建一个server.js的文件写下如下代码

    然后我们就可以在react组件上使用我们的axios

    随便写一个react组件,然后引进我们的刚刚封装的server.js,先写一个登录的函数,然后在组件渲染完之后执行该函数

    打开浏览器查看返回结果

    方法二:

    我们可以先把所有的api都列出来,然后在用export导出去,如下

    组件中使用

    浏览器结果

    看到上面的结果,说明我们已经成功决解跨域问题并且拿到了后台返回的数据。是不是很简单,赶紧自己动手试一试吧。

    展开全文
  • 最新几天学了一下react,发现了...3、axios的简单封装 全局安装create-react-app脚手架,帮助我们新建react项目 npminstall -gcreate-react-app 然后创建react项目 create-react-app xxx项目名 然后安装依赖...

    最新几天学了一下react,发现了几个问题,估计新入坑的同学们也会遇到,下面我先列出来几点

    1、请求跨域问题

    2、如何发起请求

    3、axios的简单封装

     


    全局安装create-react-app脚手架,帮助我们新建react项目

    npm install -g create-react-app

    然后创建react项目

    create-react-app xxx项目名

    然后安装依赖,并且运行react项目

    安装 npm install

    运行 npm start


     

    首先我们解决跨域的问题

    打开项目生成的package.json文件,修改文件内容如下

    如果你赖一点可以这样写

    完整写法

    这样就可以解决跨域问题。

    接下来开始讲一下如果在react中使用axios

    首先安装axios

    npm install axios --save-dev

    方法一:

    然后在我们的src目录下新建一个server.js的文件写下如下代码

    然后我们就可以在react组件上使用我们的axios

    随便写一个react组件,然后引进我们的刚刚封装的server.js,先写一个登录的函数,然后在组件渲染完之后执行该函数

    打开浏览器查看返回结果

    方法二:

    我们可以先把所有的api都列出来,然后在用export导出去,如下

    组件中使用

    浏览器结果

    使用代理后发现请求的地址依旧是http://localhost:3000,但实际的数据来源于代理配置域名【我们指定的那个】的服务。 

    注意:修改后要重启哦,坑了好久,发现需要重启!!!

    展开全文
  • 首先你要确保react-app环境搭建成功   第一步: npm 安装axios,文件根...首先,在react项目的 src/ 文件夹下新建一个文件夹为 plugs,然后在 plugs/ 下新建 axios.js文件,写入如下代码   import axios ...
  • create-react-app结合dvajs2-使用axios封装请求方法 接着上一篇 封装请求方法 在src目录下新建request文件夹, 导入axios 并分装请求方法, 不会的可以参考react使用axios封装请求方法 新建services层 在services...
  • axios是目前前端使用非常广泛的网络请求库,包括Vue作者也是推荐在vue使用axios ; 响应、转换请求和响应数据等等; 主要特点包括︰在浏览器发送XMLHttpRequests请求、在node.js发送 http请求、支持Promise API...
  • React中axios的简易封装

    2020-07-11 20:41:51
    react开发,用的最多的就是axios这个插件库了,下面展示下我自己简易封装axios 创建一个service文件夹,里面专门用来放网络请求的东西 在里面创建一个config.js文件 const devBaseURL = "https://httpbin.org"...
  • axios封装使用

    2020-05-12 15:57:47
    2、api新建一个,http.js文件,封装axios http.js import axios from 'axios' import qs from 'qs' // import { Router, Route, hashHistory } from 'react-router-dom' // create an axios instance const ...
  • 任何项目,只要支持axios,那么你只要把我现在封装的服务整个文件夹考过去即可。这个原本是我封装在vue里的,但是有一天公司突然来一个紧急的H5微信分享活动的项目,我当时用react搭建(zepto+node搭建其实最好)也...
  • React应用中封装axios

    千次阅读 2020-07-03 09:52:00
    Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 。 特性 支持node端和浏览器端 支持拦截器等高级配置 使用Promise管理异步,告别传统callback方式 自动转换 JSON 数据 客户端支持防御 XSRF ...
  • axios优化&环境变量 目标 能够通过 axios.create() 方法来构建axios实例对象,...能够在代码引入配置的环境变量的值 每一次我们请求接口的时候,每一次都需要写相同的baseUrl。例如:http://localhost:808...
  • 文章目录前言axios封装mock调试效果: 前言 刚开始学习微信小程序,微信小程序通过自带的wx.request发送https请求(文档地址),写法感觉类似之前的jQuery,当嵌套多了以后看起来很不直观。 由于之前对React + Ant ...
  • react中进一步封装axios 之前在react项目中封装axios 但是在每次请求的时候都要判断,后台返回的状态码,很麻烦。 async componentDidMount () { await $http.get('/station/list').then((res)=>{ this....

空空如也

1 2 3 4 5 ... 8
收藏数 144
精华内容 57
关键字:

axios封装 react中