axios
GitHub地址: https://github.com/axios/axios
中文网: http://www.axios-js.com/zh-cn/docs/
axios 封装
在项目代码中创建一个 util 文件夹, 在创建一个http.js文件用来封装axios
import axios from 'axios'
// 把axios 封装为一个叫 http 的对象, 把请求的公共部分写入
const http = axios.create({
baseURL: 'https://m.maizuo.com',
timeout: 10000, // 10s 内未请求到数据
headers: {
'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1611800680438168268570625","bc":"310100"}' }
})
export default http
- 项目内使用这个 “
http”
<script>
// 使用时先导入封装好的 http
// import http from '../util/http' // 项目中 别名 @ ==> src的绝对路径
import http from '@/util/http' // 项目中 别名 @ ==> src的绝对路径
export default {
data () {
return {
filminfo: null, // null为假, 空数组[]和空对象{}都是真, 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 拦截器
请求拦截—发起异步请求之前先做什么
axios.interceptors.request()
响应拦截—得到响应的数据先做什么
axios.interceptors.response()
由于axios已经被封装为http所以使用的时候要写成 http.interceptors…
在异步请求数据的时候加一些样式在,
例如, vant组件库的 Toast 轻提示
这时的http.js文件
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()
// Add a request interceptor
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) {
// Do something with request error
return Promise.reject(error)
})
// Add a response interceptor
http.interceptors.response.use(function (response) {
// Any status code that lie within the range of 2xx cause this function to trigger
// Do something with response data
// 在拿到响应的数据后
// 手动清除 Toast
Toast.clear()
return response
}, function (error) {
// Any status codes that falls outside the range of 2xx cause this function to trigger
// Do something with response error
return Promise.reject(error)
})
export default http