封装axios
因为项目中很多组件中要通过Axios发送异步请求,所以封装一个Axios对象。自己封装的Axios在后续可以使用axios中提供的拦截器。
在src下创建一个utils目录,在utils目录下创建一个request.js文件
在public下创建一个db.json文件,写点数据,用来我们测试
之前我们使用axios发送请求的时候是使用的下面的方式
[
{"name":"张三","age":17},
{"name":"李四","age":52},
{"name":"王五","age":37}
]
db.json
import axios from 'axios'axios.get('./db.json').then(response =>{
console.log(response.data)
})
在components下的HelloWorld.vue中引用测试一下
在浏览器 的控制台就可以看到db.json里的数据,这种方法是我们之前的方法,现在我们要封装。
修改request.js文件
import axios from 'axios'const request=axios.create({
baseURL:'/', //基础路径,根据不同环境设置 baseURL, 最终发送请求时的URL为: baseURL + 发送请求时写URL ,
timeout: 5000 //超时时间,5000毫秒
})exportdefault request //导出自定义的axios对象
我们自己封装好了axios,那怎么测试知道我们封装的有没有问题,我们来进行测试
在src目录下创建一个api目录,在下面创建一个test.js文件
在test.js文件里写入如下代码
//@就是src目录的路径
import request from '@/utils/request'
//下面的这种是使用最原始的方式来发送get请求//request.get('/db.json').then(response =>{//console.log(response.data)//})