react-app中把axios封装成插件（plugs）

首先你要确保react-app环境搭建成功

第一步：

npm 安装axios，文件根目录下安装，指令如下

npm install axios --save //安装到生产环境

第二步：

如何封装插件

首先，在react项目的 src/ 文件夹下新建一个文件夹为 plugs，然后在 plugs/ 下新建 axios.js文件，写入如下代码

import axios from 'axios'

let config = {
  ajaxUrl: 'https://www.apiopen.top/'
}

// 添加请求拦截器
axios.interceptors.request.use(
  conf => {
    // 配置axios请求的url  ${config.ajaxUrl} 是配置的请求url统一前缀，配置好就不用重复写一样的url前缀了，只写后面不同的就可以了
    conf.url = `${config.ajaxUrl}${conf.url}`

    return conf
  },
  error => {
    // 抛出请求错误信息
    Promise.reject(error.response)
  }
)

// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 请求失败处理
    return Promise.reject(error)
  }
)

export default axios

扫描二维码关注公众号，回复： 5332023 查看本文章

第三步：

在src/index.js 中引入 axios 插件，并且挂载到react原型上去

方便你复制~~~~

import axios from './plugs/axios'

React.Component.prototype.$http = axios

第四步：

在组件中使用，在每个组件的methods中调用$http命令完成数据请求

方便你复制~~~~

import React, { Component } from 'react'

class accountManage extends Component {
  constructor(props) {
    super(props)
    console.log('constructor')
    this.state = {
      name: 'Mark',
      Number: 1,
      time: '20190105 090522'
    }
  }
  // 盗墓笔记测试接口 axios
  allList = () => {
    let data = `盗墓笔记`
    this.$http.post(`/novelSearchApi?name=${data}`).then(res => {
      console.log(res)
    })
  }
  // 组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。
  // 一般在这里更新数据，调用接口
  componentWillMount() {
    console.log('componentWillMount')
    let time = this.$moment(this.state.time).format('YYYY-MM-DD HH:mm:ss')
    console.log(time)
    this.allList()
  }
  render() {
    return <div>manage</div>
  }
}

export default accountManage

react-app中把axios封装成插件（plugs）

猜你喜欢