vue简单封装axios插件

第一步：在src文件夹下创建utils文件夹，该文件夹专门用来放工具，创建request.js文件，与axios有关的逻辑封装在request.js中

第二步：开始封装axios

// 导入axios
import axios from 'axios'
// 导入vuex
import store from '@/store'

// 创建一个axios实例
const instance = axios.create({
  // 请求基地址
  baseURL: 'www.baidu.com'
)}
// axios请求拦截器
instance.interceptors.request.use(
	function(config){
	  return config
	},
	function(error){
	  return Promise.reject(error)
	}
)
//  axios响应拦截器
instance.interceptors.response.use(
  function(response){
	  return response
  },
  function(error){
	return Promise.reject(error)
  }
)
// 创建一个插件对象
const AxiosPlugs = {
  install: function(Vue){
	// 挂载到vue实例
	Vue.prototype.$http = instance
  }
}
// 将插件对象暴露出去
export default AxiosPlugs

第三步：在main.js中将暴露的插件对象注入Vue,全局使用

// 导入插件对象
import AxiosPlugs from '@/utils/request.js'
// 全局使用axios
Vue.use(AxiosPlugs)

axios已经封装完成，以后我们调用API发送请求就可以这样使用了

export default {
  methods: {
	getData(){
	  this.$http({
		url:'.......',
		method: 'GET',
		params:{}
	  }).then( res => {
		console.log(res)
	  }).catch( error => {
		console.log(error)
	  })
	}
  }
}