axios模块化使用，axios拦截

基础

下载：npm install(i) axios
引入：import axios from 'axios'
在miain.js文件中挂载到原型上Vue.prototype.axios=axios（这种方法比较low）

使用:

原型使用axios前加this:

axios({
    url:'',
    method:'get/post',
    params:{}//get
    data:{}//data
})
.then(res=>{})
.catch(err=>{})
//get
axios.get('地址',{
    params:{}
})
.then(res=>{})
.catch(err=>{})
//post
axios.post('地址',data)
.then(res=>{})
.catch(err=>{})
拦截
let http=axios.create();
//请求拦截
http.interceptors.request.use(config=>{
    return config
})
//响应拦截
http.interceptors.response.use(response=>{
    return response
})

模块化

第一步:

下载：npm install(i) axios

第二步:

在scr文件夹下创建公通的common文件夹
common下创建一个axios基础配置文件axiosConfig.js

import axios from 'axios' //引用
// import router from '../router' //路由引用，若是在文件内有涉及，就要进行引用
let http=axios.create();
//请求拦截
http.interceptors.request.use(config=>{
    return config
})
//响应拦截
http.interceptors.response.use(response=>{
    return response
})
//抛出模块
export default http

第三步：common下创建api文件，引入基础配置

import http from './axiosConfig' //引入基础配置
let getData = {} //抛出接口对象
//let baseUrl = "http://localhost:3000"  
//改成代理服务器地址
let baseUrl = "/api"  //这里基础地址
//post的数据请求
import http from './axiosConfig'let getData = {}//let baseUrl = "http://localhost:3000"//改成代理服务器地址let baseUrl = "/api"
//get的数据请求方式
getData.findManger = (data)=>{ 
  return http.get(baseUrl + '/findManage',{ params:data })
}
//post的数据请求方式
getData.find = (data)=>{ 
  return http.post(baseUrl + '/findManage',data )
}
export default getData

第四步：在页面中进行接口调用

import url from "../../util/api";  //进行页面引入
//调用接口
url.login（this.userInfo）   //this.userInfo//传递的数据
.then(res=>{
//res请求回来的数据
}).catch(err=>{
//err错误信息
})