axios
基本用法
axios({
url: 'http://123.207.32.32:800o/ home/multidata ',
method :"get"
}).then(res =>{
console.log(res);
})
-
axios.method():可以选择请求方法,,默认为get
-
get请求的参数:
-
可直接写在url里:
http://walawala?username=zhangsan
-
axios有专门针对get请求的参数拼接
-
axios({ url: 'http://123.207.32.32:8000/home/multidata', method :"get", params:{ type:'pop', page:1 } }).then(res =>{ console.log(res); })
-
-
post转参数:请求体
并发请求
如果需要从服务器取得多个数据,并且这些数据都取得的时候再执行下一步,应该怎么做?
-
基本格式:axios.all().then()
-
axios.all([axios(),axios()]...).then()
配置信息
每次请求参数时都要传递url,当url有多次重复的时候可以通过抽取固定参数或者利用axiox的全局配置。
- axios.defaults的使用
- 例如:
axios.defaults.baseUrl = 'http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios({
url: '/home/multidata',
method :"get",
params:{
type:'pop',
page:1
}
}).then(res =>{
console.log(res);
})
- 常见的配置选项
axios的封装
这里用一个笑话接口作为例子,封装axios
-
接口描述:/*接口:随机获取一条笑话
请求地址:https://autumnfish.cn/api/joke
请求方法:get
请求参数:无
响应内容:随机笑话*/
-
封装axios实例:
-
import axios from 'axios' function request(config) { //创建axios实例 const instance = axios.create({ baseURL: 'https://autumnfish.cn', timeout: 5000 }) return instance(config) } export default request
-
-
在GetJoke.vue中调用request方法,并传入相应配置
-
getJoke: function () { request({ url: "/api/joke", }) .then((res) => { this.joke = res.data; }) .catch((err) => { console.log(err); }); },
-
axios拦截器
-
请求拦截
-
instance.interceptors.request.use( (config) => { return config; }, (err) => { console.log(err); })
-
注意:在拦截成功后要返回拦截的数据,否则请求会失败。
-
-
响应拦截
-
//响应拦截 instance.interceptors.response.use( (config) => { console.log(config); return config; }, (err) => { console.log(err); })
-
-
什么时候会用到拦截?
- 比如config中的一些信息不符合服务器的要求
- 比如每次发送网络请求时,都希望在界面中显示一个请求的图标
- 某些网络请求(比如登录(token)),必须携带一些特殊的信息return config