axios封装 react中

2018-04-19 20:41:47 frank_come 阅读数 22367

日结博客 04.19.18 HZ

对于每次都要从页面导入axios和配置路径的行为简直没完没了地厌恶,每次后台修改api地址都得从一大堆页面里寻找到那小小的一个axios.get,简直深恶痛绝

请封装吧,万物皆能封装,封装治好了你多年的眼疾

封装更合理的Axios操作类

 

1.导入axios至你的项目

npm install --save axios

2.在根路径创建http.js

首先导入axios至http文件


import axios from 'axios'import axios from 'axios'

配置axios的默认URL

axios.defauls.baseURL = 'xxx'

配置允许跨域携带cookie

axios.defaults.withCredentials = true

配置超时时间

axios.defaults.timeout = 100000

标识这是一个 ajax 请求


axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'

配置请求拦截

 axios.interceptors.request.use(config => {
    config.setHeaders([
        ...
        // 在这里设置请求头与携带token信息
    ])
    return config
 })
    config.setHeaders([
        ...
        // 在这里设置请求头与携带token信息
    ])
    return config
 })

配置相应拦截

// axios拦截器
axios.interceptors.response.use(response => {
 // 在这里你可以判断后台返回数据携带的请求码
if (response.data.retcode === 200 || response.data.retcode === '200') {
  return response.data.data || response.data
}else {
  // 非200请求抱错
  throw Error(response.data.msg || '服务异常')
}
​
axios.interceptors.response.use(response => {
 // 在这里你可以判断后台返回数据携带的请求码
if (response.data.retcode === 200 || response.data.retcode === '200') {
  return response.data.data || response.data
}else {
  // 非200请求抱错
  throw Error(response.data.msg || '服务异常')
}
​

最后返回(更多配置可以查看axio的官方api)


export defaul axiosexport defaul axios

全部文件

import axios from 'axios'
axios.defauls.baseURL = 'xxx'
axios.defaults.withCredentials = true
axios.defaults.timeout = 100000
// // axios拦截器
 axios.interceptors.request.use(config => {
    config.setHeaders([
        ...
        // 在这里设置请求头与携带token信息
    ])
    return config
 })
 
 axios.interceptors.response.use(response => {
     // 在这里你可以判断后台返回数据携带的请求码
    if (response.data.retcode === 200 || response.data.retcode === '200') {
      return response.data.data || response.data
    }else {
      // 非200请求抱错
      throw Error(response.data.msg || '服务异常')
 }
​
export default axios
axios.defauls.baseURL = 'xxx'
axios.defaults.withCredentials = true
axios.defaults.timeout = 100000
// // axios拦截器
 axios.interceptors.request.use(config => {
    config.setHeaders([
        ...
        // 在这里设置请求头与携带token信息
    ])
    return config
 })
 
 axios.interceptors.response.use(response => {
     // 在这里你可以判断后台返回数据携带的请求码
    if (response.data.retcode === 200 || response.data.retcode === '200') {
      return response.data.data || response.data
    }else {
      // 非200请求抱错
      throw Error(response.data.msg || '服务异常')
 }
​
export default axios

是不是看到这里大失所望,别着急,接下来再新建一个api.js文件

封装一个匿名函数返回一个apis对象,通过apis对象的键名去获取对应的api地址

// 集中管理路由,所有的接口地址:
//  1.整个应用用到了哪些接口一目了然
//  2.接口地址可能变化,方便管理
​
const prefix = '' // api地址前缀
export default(config => {
    return Object.keys(config).reduce((copy, name) => {
      copy[name] = `${prefix}$config[name]`
      return copy
    }, {})
})({
  // example api
  "getExampleData": "/api/example/data" 
})
​
//  1.整个应用用到了哪些接口一目了然
//  2.接口地址可能变化,方便管理
​
const prefix = '' // api地址前缀
export default(config => {
    return Object.keys(config).reduce((copy, name) => {
      copy[name] = `${prefix}$config[name]`
      return copy
    }, {})
})({
  // example api
  "getExampleData": "/api/example/data" 
})
​

文件最终返回一个对象

// api对象
{
  getExampleData: '/api/example/data'
}
{
  getExampleData: '/api/example/data'
}

看到这里是不是有点迷糊,接下来上重头戏~

再新建一个service文件夹,在其下新建一个index.js

(src/server/index.js)


import http from '../http.js' // 导入我们封装好的axios对象
import apis from '../api.js' // 导入我们封装好的apis对象
​
export funciton getExampleData (params = {}) { // 从外部接受参数,没有参数默认为空对象
    retun http.get(apis.getExampleData, params) // return对应的get/post方法,第一个填路径,第二个给参数对象
}import http from '../http.js' // 导入我们封装好的axios对象
import apis from '../api.js' // 导入我们封装好的apis对象
​
export funciton getExampleData (params = {}) { // 从外部接受参数,没有参数默认为空对象
    retun http.get(apis.getExampleData, params) // return对应的get/post方法,第一个填路径,第二个给参数对象
}

看到这里是不是就恍然大悟了,把获取exampleData这个接口封装成了一个方法,在所需的页面调用对应的方法就好了

Vue页面引用

import { getExampleData } from 'services'
​
...
beforeCreate() {
    getExampleData({ name: 'xxx'} ).then(res => {
        this.exampleData = res // 绑定到data里
        consonle.log(res) // 这里返回的是你根据http.js拦截器中定义的返回数据
    }).catch(err => console.log(err)) // 处理报错信息
}
...
​
...
beforeCreate() {
    getExampleData({ name: 'xxx'} ).then(res => {
        this.exampleData = res // 绑定到data里
        consonle.log(res) // 这里返回的是你根据http.js拦截器中定义的返回数据
    }).catch(err => console.log(err)) // 处理报错信息
}
...

React页面引用

import { getExampleData } from 'services'
​
...
componentWillMount() {
    getExampleData({ name: 'xxx'} ).then(res => {
        this.setState({
            exampleData: res // 赋值到state里
        })
        consonle.log(res) // 这里返回的是你根据http.js拦截器中定义的返回数据
    }).catch(err => console.log(err)) // 处理报错信息
}
​
...
componentWillMount() {
    getExampleData({ name: 'xxx'} ).then(res => {
        this.setState({
            exampleData: res // 赋值到state里
        })
        consonle.log(res) // 这里返回的是你根据http.js拦截器中定义的返回数据
    }).catch(err => console.log(err)) // 处理报错信息
}

希望大家能用上这个以后不再烦恼apis的杂多或者难以管理,难以修改之类的通病

 

喜欢就点个赞吧。谢谢你~

:D

2018-07-06 20:06:00 sinat_33134895 阅读数 3788

一、最近在研究react native的网络请求,然后自己封装了一个来练习

1.添加axios 和querystring依赖

yarn add axios && yarn add querystring

2.新建 src/common/httpBaseConfig.js

3.新建 src/utils/http/index.js

import axios from 'axios';
import qs from 'querystring';
import baseConfig from '../../common/httpBaseConfig.js';
axios.defaults.baseURL = baseConfig.baseUrl + baseConfig.prefix;
axios.defaults.timeout = 100000
// // axios拦截器

axios.interceptors.request.use(config => {//拦截器处理
config.headers['Authorization'] = "12233334"
config.headers['token'] = "rreebjjj"
if(config.method === 'get'){
config.params = {
...config.data,
_t: Date.parse(new Date())/1000
}
}
return config
})

axios.interceptors.response.use(response => {//请求返回数据处理
//console.log(response)
if(response.status === '200' || response.status === 200){
return response.data.data || response.data
}else{
// 非200请求抱错
throw Error(response.opt || '服务异常')
}
})
// fetch感觉略麻烦,不清爽,直接引了个axios,用es7写的。
export default class http {
static async get(url, params) {
/**
* params{
* goods:id,
* name:string
* } ==> ?goods=id&name=string
*/
try {
let query = await qs.stringify(params)
let res = null;
if (!params) {
res = await axios.get(url)
} else {
res = await axios.get(url + '?' + query)
}
return res
} catch (error) {
return error
}
}
static async post(url, params) {
try {
let res = await axios.post(url, params)
return res
} catch (error) {
return error
}
}
static async patch(url, params) {
try {
let res = await axios.patch(url, params)
return res
} catch (error) {
return error
}
}
static async put(url, params) {
try {
let res = await axios.put(url, params)
return res
} catch (error) {
return error
}
}
static async delete(url, params) {
/**
* params默认为数组
*/
try {
let res = await axios.post(url, params)
return res
} catch (error) {
return error
}
}
}

4.在页面中使用




2019-05-08 17:16:38 qq_40312194 阅读数 1660
2019-02-21 12:58:49 qq_43258252 阅读数 771

首先你要确保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

 

第三步:

在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

 

 

2019-10-29 11:47:30 wanghui374 阅读数 107

1、创建实例和请求和响应拦截器(reques.js)

/* jshint esversion: 6 */
import axios from "axios";
// 创建axios实例
const service = axios.create({
    baseURL: "https://202.61.90.32/", //开发环境
    // baseURL: " ", // 打包
    timeout: 15000, // 请求超时时间,
});
// 添加请求拦截器
service.interceptors.request.use(
    function (config) {
        //.....请求前处理.添加统一参数,如Token和时间戳
        return config;
    },
    function (error) {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 添加响应拦截器
service.interceptors.response.use(
    function(response) {

        return Promise.resolve(response); //异步
    },
    function(error) {
    // 请求失败、错误处理回调
        let originalRequest = error.config;
        if (error.code === "ECONNABORTED" && error.message.indexOf("timeout") !== -1 && !originalRequest._retry) {
            console.log("登录超时");
        }
        return Promise.reject(error); //异步
    }
);
export default service;

2、封装API文件,统一管理接口地址(api.js)

/* jshint esversion: 6 */
import request from "./request";
let ApiVersion="v1"; //版本控制

//Post请求----添加
export function userAddPost(data) {
    return request({ url: ApiVersion + "/user", method: "post", data: data, });
}

//Put请求----修改
export function userChangePut(data) {
    return request({ url: ApiVersion + "/user", method: "put", params: data });
}

//Delete请求----删除
export function userDelDelete(data) {
    return request({ url: ApiVersion + "/user", method: "delete", params: data });
}

//Get请求----查询
export function userListGet(data) {
    return request({ url: ApiVersion + "/user", method: "get", params: data });
}

3、Vue 使用

<script>
    import { userListGet } from "./api"; // 引入接口
    export default {
        mounted() {
            this.api_userListGet();  // 获取用户列表
        },
        methods: {
            // 查询用户列表
            api_userListGet() {
            	let prams={
					page:1, //当前页
					size:10 //每页显示条数
				}
                userListGet(prams).then(response => {
                    let back_data = response.data;

                });
            },
        }    
    }
</script>

4、React 使用

import { userListGet, } from "../../service/api"; // 引入接口
componentWillMount(){
    this.api_userListGet();
},
api_userListGet() {
    let prams={
		page:1, //当前页
		size:10 //每页显示条数
	}
    userListGet(prams).then((response )=>{
        let back_data=response.data;
    })
}