axios封装

react 同时被 2 个专栏收录
1 篇文章 0 订阅
6 篇文章 0 订阅
/* 
  * 这个东西到底我们封装成什么?
    * 类
    * 对象
    * 函数  √
*/

// const baseURL = 'http://localhost:3000' // 本地启动
// const baseURL = 'http://10.31.154.189:3000' // 公司局域网启动
// const baseURL = 'http://10.31.154.110:3000' // 测试环境
// const baseURL = 'http://10.31.154.456:3000' // 上线环境
import axios from 'axios'
const instance = axios.create({  // 创建一个axios实例
  // baseURL, 
  timeout: 5000,
});

// 默认表单提交
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';


// // 添加请求拦截器
// instance.interceptors.request.use(function (config) {
//   // 在发送请求之前做些什么
//   // 如果你没有登录,项目中任何页面你都进不去-后台管理系统
//   const token = localStorage.getItem('token')
//   console.log('拦截')
//   if ( !token ) {
//     location.href = './login.html'
//   } 

//   document.querySelector('.loading').className += ' open'

//   return config;
// }, function (error) {
//   // 对请求错误做些什么
//   return Promise.reject(error);
// });

//   // 添加响应拦截器
//   instance.interceptors.response.use(function (response) {
//     // 对响应数据做点什么

//     document.querySelector('.loading').className += ' close'

//     return response;
//   }, function (error) {
//     // 对响应错误做点什么
//     return Promise.reject(error);
//   });

const request = ({
  url,
  method = "GET",
  params,
  data, 
  withCredentials = false, // default
  headers
}) => {
  return new Promise(( resolved,rejected ) => {
    // 区别两个不同的数据请求就行  get  post 
    switch ( method.toUpperCase() ) {
      case 'POST':
        var real_data = {}
        if ( headers['Content-Type'] == 'application/x-www-form-urlencoded' ){
          // 表单提交
          const p = new URLSearchParams()
          for ( let key in data ) {
            p.append( key, data[ key ] )
          }
          real_data = p
        } else {
          // json提交
          real_data = data 
        }
          instance.post( url,data = real_data, {
            withCredentials, // default
            headers
          }).then( res => resolved( res ))
            .catch( err => rejected( err ))
        break;

        case 'PUT':
          instance.put( url, {
            method,
            params,
            withCredentials, // default
            headers
          }).then( res => resolved( res ))
            .catch( err => rejected( err ))
        break;
        default:
          instance.get( url, {
            method,
            params,
            withCredentials, // default
            headers
          }).then( res => resolved( res ))
            .catch( err => rejected( err ))
          break;
        }
    })
}





export default request 

// module.exports = request 
  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值