axios 的封装

在使用 axiso 的过程中,为保证 解耦,需要对 axios 进行封装,在封装后的类中使用,直接引用 request1 即可:


具体代码如下:

// 对第三方框架进行封装
import axios from 'axios'
export function request1(config, success, failure) {
    
    
  // 1.创建axios 实例
  const instance = axios.create({
    
    
    baseURL: "http://localhost:5000",
    timeout: 40000 // 超时时间
  });



  // 2.axios 拦截器
  // 2.1 请求拦截
  instance.interceptors.request.use(config => {
    
    
      console.log('请求成功拦截器');
      console.log(config);
      return (config);
    },
    // 失败的拦截,一般是发送不到的
    err => {
    
    
      console.log('请求失败拦截器');
      console.log(err);
    });


  // 2.2 响应拦截
  // instance.interceptors.response.use(res => {
    
    
  //   console.log('响应拦截成功');
  //   console.log(res);
  //   return (res);
  // }, error => {
    
    
  //   console.log('相应拦截错误');
  //   console.log(error);
  //   return (error);
  //   if (error && error.response) {
    
    
  //     switch (error.response.status) {
    
    
  //       case 400:
  //         error.message = '错误请求';
  //         Toast('错误请求');
  //         break
  //       case 401:
  //         error.message = '未授权,请重新登录';
  //         Toast('未授权,请重新登录');
  //         break
  //       case 403:
  //         error.message = '拒绝访问';
  //         Toast('拒绝访问');
  //         break
  //       case 404:
  //         error.message = '请求错误,未找到该资源';
  //         Toast('请求错误,未找到该资源');
  //         break
  //       case 405:
  //         error.message = '请求方法未允许';
  //         Toast('请求方法未允许');
  //         break
  //       case 408:
  //         error.message = '请求超时';
  //         Toast('请求超时');
  //         break
  //       case 500:
  //         error.message = '服务器端出错';
  //         Toast('服务器端出错');
  //         break
  //       case 501:
  //         error.message = '网络未实现';
  //         Toast('网络未实现');
  //         break
  //       case 502:
  //         error.message = '网络错误';
  //         Toast('网络错误');
  //         break
  //       case 503:
  //         error.message = '服务不可用';
  //         Toast('服务不可用');
  //         break
  //       case 504:
  //         error.message = '网络超时';
  //         Toast('网络超时');
  //         break
  //       case 505:
  //         error.message = 'http版本不支持该请求';
  //         Toast('http版本不支持该请求');
  //         break
  //       default:
  //         error.message = `连接错误${error.response.status}`;
  //         Toast(`'连接错误'${error.response.status}`);
  //     }
  //   } else {
    
    
  //     error.message = "连接到服务器失败";
  //     Toast('连接到服务器失败');
  //   }
  //   return Promise.reject(error.message)
  // });




  // 3.对实例进行配置
  instance(config)
    .then(res => {
    
    
      success(res)
    })
    .catch(err => {
    
    
      console.log(err);
      failure(err)
    })
}


引用:

 import {
    
    request1} from '../network/request'

猜你喜欢

转载自blog.csdn.net/zhaozhao236/article/details/112394230