1.Axios 下载
npm install axios --save
2.封装Axios
在项目中src下面创建一个文件夹utils在文件夹中创建request.js配置文件
1.引入axios
impotr axios from 'axios'
2.新建axios实例
const request= axios.create({
baseURL:'/', 请求地址
timeout:3000 超时时间
})
3.添加拦截器:
请求拦截
request.interceptors.request.use(confing=>{
//在发送之前做什么
return config;
},error=>{
//在请求失败做什么
return Promise.reject(error)
});
响应拦截:
request.insterceptors.reponse.use(respones=>{
//响应成功之前做些什么
return response
},error=>{
//响应失败做些什么
return Promise.reject(error)
});
4.导出对象
export default request
3.请求数据
1.创建api文件夹
再里面创建一个test.js文件
2.导入request.js文件
impotr request from '../utils'
3.请求方式1
request.get('json数据地址').then(response=>{
console.log(response)
}).catch(error=>{
console.log(error)
})
请求方式2:
request({
///请求方式
type:'get',
///请求地址
url:'json数据地址',
}).then(response=>{
console.log(response)
}).catch(error=>{
console.log(error)
})
请求方式3:
expotr deault{
gitData(){
return request({
type:'get',
url:'json数据地址'
})
}
}
4.在需要用到数据的组件引入
import testApi from '../api/test'
created(){
this.fet()
},
methods:{
fet(){
testApi.getDate().then(response=>{
console.log(response)
}).catch(error=>{
console.log(error)
})
}
}
即可查相应的数据