axios基本使用
1、安装npm install axios --save
2、配置
import axios from "axios";
3、使用
-
在组件中
getSongs() { this.$axios('http://api.javaswing.cn/top/playlist').then(res => { this.songs = res.data.playlists; console.log(this.songs); }) },
-
在main.js中
axios({ // url: "httpbin.org/" url: "http://api.javaswing.cn/top/playlist" }).then(res => { console.log(res) })
axios发送并发请求
//axios发送并发请求
axios.all([axios({
url: "http://api.javaswing.cn/playlist/catlist",
}), axios({
url: "http://api.javaswing.cn/top/playlist",
//专门针对get请求的参数拼接
params: {
type: 'pop',
page: 1
}
})]).then(results => {
console.log(results)
})
另一种写法
axios.all([axios({
url: "http://api.javaswing.cn/playlist/catlist",
}), axios({
url: "http://api.javaswing.cn/top/playlist",
//专门针对get请求的参数拼接
params: {
type: 'pop',
page: 1
}
})]).then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
axios的配置信息相关
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-CZhfAqgN-1604406114469)(C:\Users\12591\AppData\Roaming\Typora\typora-user-images\image-20201014202303613.png)]
//全局配置
//baseURL:请求根路径
axios.defaults.baseURL = "http://api.javaswing.cn"
//timeout:延时
axios.defaults.timeout = 5000
常见配置选项
请求地址
url:''
请求根路径
baseURL
请求前的数据处理
transformRequest:[function(data){}]
请求后的数据处理
transformRespinse:[function(data){}]
自定义的请求头
headers:{}
URL查询对象
params:{}
axios的实例和模块封装
创建一个新的文件夹network,(request.js)里面专门放置axios实例
export function request(config) {
//1、创建axios的实例
const inatance = axios.create({
baseURL: "http://api.javaswing.cn",
timeout: 5000
})
//发送真正的网络请求
return inatance(config)
}
如在mian.js中要使用的话
import { request } from "./network/request.js"
request({
url: "/top/playlist"
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
axios的拦截器的使用
export function request(config) {
//1、创建axios的实例
const inatance = axios.create({
baseURL: "http://api.javaswing.cn",
timeout: 5000
})
//axios拦截器
//请求拦截
//1、比如config拿到的信息不符合服务器的要求
//2、比如每次发送网络请求时,度希望在界面中显示一个请求的图标
//3、某些网络请求(比如登录(token)),必须携带一些特殊信息
instance.interceptors.request.use(config => {
console.log(config);
//拿到后返回
return config;
}, err => {
console.log(err);
})
//响应拦截
instance.interceptors.response.use(res => {
console.log(res);
return res.data
}, err => {
console.log(err);
})
//发送真正的网络请求
return inatance(config)
}
onsole.log(res);
return res.data
}, err => {
console.log(err);
})
//发送真正的网络请求
return inatance(config)
}