vue 使用axios二次封装

vue 使用axios二次封装

1.axios封装代码

import axios from 'axios'
import { baseURL } from '../config/index.js'
// @lzy

// 创建实例
const instance = axios.create({
  baseURL: baseURL,//设置接口请求ip地址
  timeout:10000,//设置超时时间
  headers:{//设置请求头
    //使用这个application/json请求头会出现向服务器请求两次的情况.浏览器会首先使用 OPTIONS 方法发起一个预请求，
    // 判断接口是否能够正常通讯，如果不能就不会发送真正的请求过来，如果测试通讯正常，则开始真正的请求。
    // 解决方法:全局默认application/x-www-form-urlencoded 在请求时用qs转换数据给后台发送
    "Content-Type": "application/json", //默认请求头为它
    // "Content-Type": "text/html",
    // 'Content-Type': 'application/x-www-form-urlencoded',

  },
})
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // config.headers.common[]
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  if (response.status === 200) {    
      return Promise.resolve(response.data);        
  } else {            
      return Promise.reject(response);        
  }    
}, function (error) {
  // 如果响应不是200状态码
  // 对响应错误做点什么
  // 列如: 
  //  if (error.response.status) {            
    // switch (error.response.status) {                
      // 401: 未登录
      // case 401:   
      // break;      
     // }
  //  }
  return Promise.reject('未知错误-->'+error);
});
//将实例抛出去
export default instance;

2.api接口统一管理和引用二次封装axios

import axios from '../axios/index.js'

export const regionList = (data) => { 
   return axios({
       method:'post',//请求方式
       url:"/api/private/v1/login",//接口路径
       data:data,//数据
       // headers:{//请求头
       //     "Content-Type": "application/json"
       //   },
   });
}