一、axios
的请求方式
axios(config)
axios.request(config)
axios.get(url[,config])
axios.delete(url[,config])
axios.head(url[,config])
axios.post(url[,data[,config]])
axios.put(url[,data[,config]])
axios.patch(url[,data[,config]])
二、安装
进入项目文件夹:
npm insatall axios --save
三、使用
import axios from 'axios'
axios({
url:"https://httpbin.org/" //专门做网络请求模拟的网站
method:'get' //默认是get请求,也可以指定请求方式
}).then(res =>{
console.log(res);
})
axios({
url:"https://www.baidu.com/" 默认是get请求
///专门针对get请求的参数拼接
params:{
type:"pop",
page:1
}
}).then(res =>{
console.log(res);
})
利用post方式带参请求时写法如下:
data:{id:10012}
四、axios
发送并发请求
//使用axios.all 可以放入多个请求的数组
axios.all(
[axios({url:"https://www.baidu.com/"}),
axios({
url:"https://www.baidu.com/",
params:{
type:'sell',
page:5
}
})
]
).then(result => {
console.log(results);
console.log(results[0]);
console.log(results[1]);
})
//axios.all([])返回的结果是一个数组,使用axios.spread 可将数组[res1,res2]展开为res1,res2
axios.all([axios({
url:"https://www.baidu.com/"
}),axios({
url:"https://www.baidu.com/",
params:{
type:'sell',
page:5
}
})]).then(axios.spread((res1,res2) => {
console.log(res1);
console.log(res2);
}))
五、axios
实例的封装
1、首先单独创建一个文件夹用于封装网络请求src --> network
,创建文件 index.js
或 request.js
2、在文件里写如下代码
import axios from 'axios'
export function request(config){
const instance = axios.create({
baseUrl:'http://192.168.1.110:8000',
timeout:5000
})
return instance(config)
}
3、组件里使用网络请求
request({
url:'home/category'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
4、还可以在network
里封装多个文件用于分别存放各个页面的网络请求的代码如:
src -> network -> home.js
用于首页页面的网络请求,代码如下:
import {request} from "./request"
export function getHomeData(id){
return request ({
url:'api/data/home',
params:{
id
}
})
}
然后在home
页面组件里:
<script>
import {getHomeData} from "network/home"
created(){
getHomeData(id).then(res=>{
console.log(res)
})
}
</script>
六、axios
拦截器
axios.interceptors.request.use(config =>{ //请求成功的拦截
console.log(config);
return config
},err => { //请求失败的拦截
console.log(err);
})
axios.interceptors.response.use(res =>{ //响应成功的拦截
console.log(res);
return res
},err => { //响应失败的拦截
console.log(err);
})