【axios的封装 】

axios 的使用

第一步:下载 npm i axios – seven

方法一：

如果项目单页面使用的话 可以在页面直接 import axios from “axios” 引入使用就可以了

 import axios from "axios"
 axios.get( "请求路径" ).then((res)=> {})

方法二：

也可以把axio挂载到原型上

在main.js文件里面 引入 import axios from “axios”

把axios挂载到vue的显示原型上 Vue.prototype.$axios = axios 挂载到显示原型上可以通过this获取到 axios

在页面直接this.axios(“请求方式” ,“请求路径” ).then( res=>{ 获取响应的数据 } )

 this.$axios.get('home/swiperdata').then(res=>{
 this.list = res
 })

方法三：

通过封装 可以设置 请求拦截和响应拦截

请求拦截可以 : 设置请求动画, 设置请求头

响应拦截可以 : 清除请求动画 , 处理错误的编码 , 格式化数据

第一步 : 引入 import axios from “axios”

第二步 : 对axios的实例化的过程 const 名称 = axios.create({ baseurl : 基准地址 , timeout: 超时时间 })

这里我们就可以设置请求拦截,响应拦截

通过实例的 变量.interceptors.request.use(function (config) { 可以设置请求动画 必须要 return })

通过实例的 变量.interceptors.response.use(function (response) {清除请求动画 , 处理错误的编码 , 格式化数据 必须要 return } )

最后导出实例

// 引入
import axios from 'axios'
// 实例化的过程
const instance = axios.create({
	baseURL: 'https://api-hmugo-web.itheima.net/api/public/v1/',//请求的基准地址
	timeout: 5000
}) 
// 请求拦截
instance.interceptors.request.use(config=>{
	console.log('请求加载动画开启......')
	// config.headers['2111B'] = 'p9'
	return config
})

// 响应拦截
instance.interceptors.response.use(res=>{
	console.log('请求加载动画关闭s......')
	// if(res.status==400){
	// 	console.log('参数错误')
	// }
	return res.data.message
})
// 挂载
// Vue.prototype.$axios = instance

// 导出
export default instance