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错误信息
})