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 })}

export default getData

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

import url from "../../util/api";  //进行页面引入

//调用接口

url.login（this.userInfo）   //this.userInfo//传递的数据

.then(res=>{

//res请求回来的数据

}).catch(err=>{

//err错误信息

})