axios封装

1.安装axios

npm install axios

一次封装

//引入axios
import axios from 'axios'
//设置超时时间
axios.defaults.timeout = 30000

//获取当前环境配置项中的地址，会自动追加到接口上
axios.defaults.baseURL = process.env.VUE_APP_API_URL
 
//获取配置项信息，可以做你的逻辑处理
if(process.env.VUE_APP_MODE==='development'){
    //开发环境下的执行操作
	console.log('开发');
}else if(process.env.VUE_APP_MODE==='test'){
    //测试环境下的执行操作
	console.log('测试');
}else{
    //生产环境下的执行操作
	console.log('正式');
}
//设置请求拦截
axios.interceptors.request.use((config)=>{
  return config
},(error)=>{
  return Promise.reject(error)
})
//设置响应拦截
axios.interceptors.response.use((response)=>{
  if(response.status == 200){
    return response
  }
},(error)=>{
  return Promise.reject(error)
})

//封装post请求
export function apiPost(url,data){
  return new Promise((resolve,reject)=>{
    axios({
      method:'post',
      url,
      data
    }).then(value=>{
      resolve(value.data)
    }).catch(reason=>{
      reject(reason)
    })
  })
}

//封装get请求
export function apiGet(url){
  return new Promise((resolve,reject)=>{
    axios({
      method:'get',
      url
    }).then(value=>{
      resolve(value.data)
    }).catch(reason=>{
      reject(reason)
    })
  })
}

二次封装

// 1.引入一次封装
import { apiGet,apiPost} from "./api";

//get请求示例
export function getCode(){
  return get('index.php/index/index/getcode')
}
//post请求示例
export function postLogin(data){
  return post('index.php/index/index/login',data)
}


//post方法
function post(url,data){
  return new Promise((resolve,reject)=>{
    apiPost(url,data).then(value=>{
      if(value.code == 0){
        resolve(value)
      }else{
        reject(value)
      }
    },reason=>{
      reject(reason)
    })
  })
}
//get方法
function get(url){
  return new Promise((resolve,reject)=>{
    apiGet(url).then(value=>{
      if(value.code == 0){
        resolve(value)
      }else{
        reject(value)
      }
    },reason=>{
      reject(reason)
    })
  })
}