axios高级用法
1 .分离前端接口
2 .通过拦截搭配路由统一处理请求错误和需要登陆以及数据格式处理，loading组件
3 .请求转发
4 .ajax请求类型的分别，一部分可能不需要loading组件或者请求时间少于某个时间段不显示loading
5 .优先级区分：config参数首先是lib/defaults.js中定义的默认设置，其次是defaults实例属性的设置，最后是请求config参数的设置。后面的设置会覆盖前面的设置
6 .
http.js
1 .主要构成：构造基础的axios实例，进行一些基础的配置，比如环境的切换，返回错误的统一处理，不符合访问条件的请求拦截
import axios from 'axios'
const MINI_TIME=300
// 加载的最小时间，未做，其实这里两次相同的请求的最小间隔应该小于这个
const MAX_TIME=5000
// 超时时间
const MAX_CONTENT=20000
let _requests=[]
// 请求组，判断当前请求数目：想要实现的是如果里面有重复的就不请求
const cancelToken=axios.CancelToken
let cancelFlag=true
// 请求拦截器
// 环境的切换
// if(process.env.NODE_ENV=='development'){
// axios.defaults.baseURL=
// }else if(process.env.NODE_ENV=='debug'){
// axios.defaults,baseURL
// }else if(process.env.NODE_ENV="production"){
// }
// 创建axios实例
let instance=axios.create({timeout:MAX_TIME, maxContentLength: MAX_CONTENT})
// 默认返回的是json
instance.defaults.headers.post['Content-Type']='application/x-www-form-urlencoded;charset=UTF-8'
// 请求拦截================
// 需要登录在请求的数据，或者post请求的时候，需要序列化我们请求的数据
// import store from '../vuex/index'
// import { Router } from 'express';
// 从vuex导入需要用到的状态
//这里要在其余的地方来操作vuex和vue router，统一这些和业务无关的操作
axios.interceptors.request.use(
config=>{
// const token=store.state.token;
// token&&(config.headers.Authorization=token)
// 发起请求时，取消掉当前正在进行的相同请求
// if(promiseArr[config.url]){
// promiseArr[config.url]('操作取消')
// promiseArr[config.url]=cancel
// // cancel()
// }else{
// promiseArr[config.url]=cancel
// }
if(cancelFlag){
cancelFlag=false
console.log('开始请求')
// 进行请求
}else{
cancelToken:new CancelToken(c=>{
cancel=c
})
cancel()
}
return config
},
error=>{
return Promise.reject(error)
}
)
// 响应拦截=================
axios.interceptors.response.use(
response=>{
if(response.status==200){
cancelFlag=true
// 请求完成，可以进行下一个请求
console.log('123')
return Promise.resolve(response)
}else{
return Promise.reject(response)
}
},
error=>{
// 拿到的服务器状态码不是200的时候
if(error.response.status){
switch(error.response.status){
case 401:
// 未登录，这里进行路由跳转
Router.replace({
path:'/login',
});
break;
case 403:
// token过期
// 弹个提示
break;
case 404:
// 请求不存在
default:
// 弹个提示i，报错
// 所有可能的错误类型
// 错误请求
}
return Promise.reject(error.response)
}else{
// 说明是网络问题
console.log('网络有问题啊')
}
}
)
// 主要就是正确的直接返回，错误进行统一处理
// 添加请求，显示loading:是所有的请求都要走这个，还是只是用户看到的显示
function pushRequest(config){
_requests.push(config)
// 把loading状态传到vuex里面
}
function popRequest(config){
let _index=_requests.findIndex(r=>{
return r===config
})
if(_index>-1){
_requests.splice(_index,1)
}
if(!_requests.length){
// 切换loading状态
}
}
// 提示函数
// 跳转页
const toLogin=()=>{
router.replace({
path:'/login',
})
}
export default instance;
api/index.js
1 .功能，整合所有的接口
import search from './search'
export default{
search
}
api/base.js
1 .接口的域名管理
const base={
sq:'',
bd:''
}
export default base;
api/search.js
1 .和具体业务有关，一个相同类型的接口一个js文件
import axios from '../http'
// search页面的api
//请求reward接口
const search={
search(config){
return axios.post('http://127.0.0.1:5000/search',config)
// 请求的配置更加灵活，针对某一个需求进行不同的配置，关于配置的优先级，之前有介绍
},
huodong_item(config){
return axios.post('http://127.0.0.1:5000/huodong_item',config)
}
}
export default search;
vue实例挂载和使用
1 .挂载
import api from './requests/api/index.js'
Vue.prototype.$api=api
