react使用axios请求接口数据方法封装

1. request.js

//封装aixos
import axios from "axios"
// 拿到cookie处理
function getCookie(cname: string): string {
    let name: string = cname + "="
    // console.log('document.cookie', document.cookie)

    let ca: string[] = document.cookie.split(";")
    for (let i: number = 0; i < ca.length; i++) {
        let c: string = ca[i].trim()
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length)
        }
    }
    return ""
}

/*
根据环境变量区分接口的默认地址
*/
let requestUrl: string = ""
switch (process.env.REACT_APP_ENV) {
    // 生产环境
    case "production":
        requestUrl = "正式线上接口地址"
        break
    // 测试环境
    case "testing":
        requestUrl = "测试地址" // 测试服
        break
    // 开发环境
    case "development":
        requestUrl = 'http://192.168.31.51:8005/'
        break
    default:
        requestUrl = ""
}

console.log("环境地址：", process.env)
axios.defaults.baseURL = requestUrl

/*
设置超时时间，和跨域 是否允许携带凭证(session和cookie)
*/
axios.defaults.timeout = 50000
axios.defaults.withCredentials = true
/*
设置请求传递数据的格式
x-www-form-urlencoded 模式
*/
axios.defaults.headers["Content-Type"] = "application/json"
axios.defaults.headers["Accept"] = "application/json, text/plain, */*"

/*
设置请求拦截器
TOKEN效验(JWT)
config 就是发起请求时带的配置项，包括以上配置项
*/
axios.interceptors.request.use(
    (config) => {
    	// 项目上传文件接口地址后不加"datav"，根据项目具体要求修改
        if (config.url === "file/upload") {
			config.baseURL = requestUrl
            config.headers["Content-Type"] = "multipart/form-data"
        } else {
			config.baseURL = requestUrl + "datav"
            config.headers["Content-Type"] = "application/json"
        }
        // 携带token,假设存在Cookie里面，还可带其他需要的参数
        let token: string = getCookie("screen")
        token && (config.headers.accessToken = token)
        return config
    },
    (error) => {
        return Promise.reject(error)
    }
)

/*
响应拦截器
服务器返回信息->[拦截的统一处理]->客户端JS获取到信息
*/
axios.interceptors.response.use(
    (respose) => {
        if (respose.data.msgCode === 200) {
            return respose.data.data
        }
        if (respose.data.msgCode === 311) {
            // eslint-disable-next-line no-restricted-globals
            confirm("登陆已过期，请重新登陆")
            window.history.go(-1)
            return respose.data
        }
        return respose.data
    },
    (error) => {
        let { response } = error
        if (response) {
            //服务器起码返回结果了
            switch (response.status) {
                case 401: //权限问题
                    break
                case 403: //服务器拒绝执行(token过期)
                    break
                case 404: //找不到页面
                    break
                default:
                // window.location.href = 'http://www.baidu.com'
            }
        } else {
            //服务器连结果都没返回
            if (!window.navigator.onLine) {
                //断网处理：可以跳转到断网页面
                return
            }
            // window.location.reload()
            // alert('连接超时,请稍后再试')
            return Promise.reject(error)
        }
    }
)
export default axios

2. api文件 api/index.js

import axios from '../network/request'

//天气 不带参数
export function weather() {
  return axios.post('weather')
}
// 通知消息 带参数
export function userNoticeList(object) {
  return axios.post('userNoticeList', object)
}

3. 使用

// 引入
import { userNoticeList } from "../../api/index"

// 使用
userNoticeList(page)