记录如何快速封装一个axios最简单的功能，然后全局挂载直接使用。
分三个简单的步骤：
前提：你下载了axios。如果没有下载的输入这个指令下载一下
npm install axios -s
第一步：
在utils文件夹内创建一个service.js组件把这一堆代码直接复制进去。
//axios实例封装
import axios from "axios";
//引入elementul的弹框提醒组件后面要用来报错
import {
Message } from 'element-ui';
const service=axios.create({
//基础路径URL配置
baseURL:"http://localhost:8001",
//五秒未响应提示
timeout:5000,
})
//请求拦截
service.interceptors.request.use(config => {
config.headers['token'] = Vue.cookie.get('token') // 请求头带上token，一般后端的请求都要带上token才能成功的，没有token会被判断未登录，这里根据个人不同改获取token的方式。不需要的直接删掉这行代码就行，其他不动
return config
}, error => {
return Promise.reject(error)
})
//响应拦截器
service.interceptors.response.use((response)=>{
//只返回config内的data的数据，其他的不展示
const res=response.data
return res
},(error)=>{
//如果请求出错会有弹框提示
Message({
type:"error",
message:error.message
})
return Promise.reject(error)
})
export default service
第二步：
在utils中创建http.js组件把这代码复制进去。
/**** http.js ****/
// 导入封装好的axios实例
import service from './service'
const http ={
/**
* methods: 请求
* @param url 请求地址
* @param params 请求参数
*/
get(url,params){
const config = {
method: 'get',
url:url
}
if(params) config.params = params
return service(config)
},
post(url,params){
const config = {
method: 'post',
url:url
}
if(params) config.data = params
return service(config)
},
}
//导出
export default http
第三步：
在main.js文件内引入
这里是引入了封装后的请求，然后挂载到全局axios上，这样我们就可以直接this.$axios来发请求了
//把axios实例化后引入main.js文件。挂载在axios原型链上全局使用。
import http from "./utils/http";
Vue.prototype.$axios = http
最后：可以发请求了
格式是一样的，就换个get和post就行了，很简单
get请求
this.$axios.get('/login', {
username: 'admin',
password: '123456',
}).then(res => {
console.log(res, '返回数据');
}).catch(error => {
console.log(error, '请求失败');
})
post请求
this.$axios.post('/login', {
username: 'admin',
password: '123456',
}).then(res => {
console.log(res, '返回数据');
}).catch(error => {
console.log(error, '请求失败');
})
没有参数就不填第二个参数就行了
this.$axios.post('/login').then(res => {
console.log(res, '返回数据');
}).catch(error => {
console.log(error, '请求失败');
})