基于axios进行二次封装

开发中，通常会将http相关的代码写到一个文件中，方便项目统一管理。那如何封装http请求呢？

目录

• src
  • common/http.js
  • common/api.js
  • view/test.vue

AXIOS

// http.js
import axios from 'axios'
const http = {
    
    }
export const env = process.env.NODE_ENV === 'development'
axios.defaults.baseURL = env ? '/api' : '/'
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    
    
  // 在发送请求之前做些什么
  return config;
}, function (error) {
    
    
  // 对请求错误做些什么
  return Promise.reject(error);
});
// 添加响应拦截器
axios.interceptors.response.use(response => {
    
    
  // console.log(response)
  if (response.status === 200) {
    
    
    return response.data
  } else {
    
    
    return false
  }
}, err=> {
    
    
  // 响应错误
 
})
http.axios  = axios 
// 上传文件用请求头
http.headersMultipart = {
    
    
  headers: {
    
     'Content-Type': 'multipart/form-data' }
}
// 请求数据转formData
http.json2FormData = data => {
    
    
	var params = new FormData()
	for (let key in data) {
    
    
	    params.append(key, data[key])
	}
	return params　 
}
//TODO
export default http

API

// api.js
// 所有接口写在这个文件
// 接口命名统一驼峰式命名
import http from '../http'
let axios = http.axios
const API = {
    
    
	/**
	* url getTest
	* method get
	* params json
	*/
	getTest(params){
    
    
	return axios.get('/getTest', {
    
    params})
	}
	/**
	* url postTest
	* method post
	* params json
	*/
	postTest(params){
    
    
	return axios.post('/postTest', params)
	}
	/**
	* url postTest
	* method post + get
	* params json
	*/
	formdataTest(params){
    
    
	return axios.post('/postTest', params, {
    
     params } )
	}
	/**
	* url formdataTest
	* method post
	* params formdata
	*/
	formdataTest(params){
    
    
	return axios.post('/postTest', http.json2FormData(params))
	}
}
export default API

页面调用

// test.vue
import API from '@/common/api'
// 调用方式1
API.postTest(params).then(res => {
    
    }).catch(err => {
    
    })
// 调用方式2 方法外需要加 async 

let res = await API.postTest(params)