项目中 axios拦截器的使用总结
1.axios 封装
首先在项目中创建一个 util 文件夹, 在创建一个http.js文件用来封装axios
import axios from 'axios'
// 把axios 封装为一个叫 http 的对象, 把请求的公共部分写入
const http = axios.create({
baseURL: "xxxxxxx",
timeout: 3000, // 3s 内未请求到数据
headers: { 'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1611800680438168268570625","bc":"310100"}' }
})
export default http
在项目中引入http.js并使用
<script>
// 使用时先导入封装好的 http
// import http from '../util/http'
import http from '@/util/http'
export default {
data () {
return {
filminfo: null,
isShow: false
}
},
mounted () { // 在详情的组件中利用mounted生命周期获取传过来的数据
// console.log('利用获取的id, 发送ajax请求数据', this.$route) // this.$route内包含整router对象
// console.log('通过params获得的id数据:', this.$route.params.id)
http({
url: `/gateway?filmId=${this.$route.query.id}&k=4689903`,
headers: {
'X-Host': 'mall.film-ticket.film.info'
}
}).then(res => {
console.log(res.data.data.film)
this.filminfo = res.data.data.film
})
}
}
</script>
添加axios拦截器
import axios from 'axios'
import { Toast } from 'vant' // van组件库图片预览函数, 函数不需要use
// Vue.use(Toast)
const http = axios.create({
baseURL: 'https://m.maizuo.com',
timeout: 10000,
headers: { 'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1611800680438168268570625","bc":"310100"}' }
})
// axios 拦截器
// 请求拦截
// http.interceptors.request()
// 响应拦截
// http.interceptors.response()//添加请求拦截器
http.interceptors.request.use(function (config) {
// Do something before request is sent
// 在发起异步请求时
// 启动 loading
Toast.loading({
message: '加载中...',
forbidClick: true,
overlay: true,
loadingType: 'spinner',
duration: 0
})
return config
}, function (error) {
return Promise.reject(error)
})
//添加响应拦截器
http.interceptors.response.use(function (response) {
// 在拿到响应的数据后手动清除 Toast
Toast.clear()
return response
}, function (error) {
return Promise.reject(error)
})
export default http
作者：一只章鱼哥
链接：https://www.jianshu.com/p/4b706dabf125
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。