一、axios框架的基本使用
- 安装
在终端: npm install axios --save
- main.js中引用
import axios from 'axios'
axios({
url: 'https://httpbin.org/headers'
// method: 'get' / 'post' 设置请求方式,不设置的时候默认为get
//如果是用get请求又不想将url拼接的太长的话(get请求时直接拼接在url中的),可以使用params如下方式写,框架内部会自动拼接到url中。
//这是专门针对 get请求的参数拼接
// params: {
// type: 'xxx',
// page: 1
// }
}).then(res => {
console.log(res)
})
//请求方式也可以这样写:
// axios.get()
// axios.post()
二、axios发送并发请求
axios.all([axios({
url: 'https://httpbin.org/headers'
}), axios({
url: 'https://httpbin.org/headers',
params: {
type: 'xx',
page: 5
}
})]).then(results => {
console.log(results[0])
console.log(results[1])
}))
axios.all的返回结果是一个数组,可以使用axios.spresd将数组[res1,res2]展开为res1,res2
找不同:
axios.all([axios({
url: 'https://httpbin.org/headers'
}), axios({
url: 'https://httpbin.org/headers',
params: {
type: 'xx',
page: 5
}
})]).then(axios.spread((res1, res2) => {
console.log(res1)
console.log(res2)
}))
三、axios配置信息相关
在开发中,很多参数都是固定的,这个时候我们可以进行一些抽取,也可以利用axios的全局配置。
语法:axios.defaults.xxx = ''
eg:全局配置根路径:axios.defaults.baseURL = ‘https://httpbin.org’
全局配置超时时间:axios.defaults.timeout = 5000(单位:毫秒)
常见的配置选项:(用哪个查那个)
注意!:当 method:‘get’ 即是get请求时用params来进行请求拼接
当 method:‘post’ 即是post请求时,用data来写请求体
四、创建对应的axios实例
不再用全局的配置了
const instance1 = axios.create({
baseURL: 'https://httpbin.org',
timeout: 5000
})
instance1({
url: '/headers'
}).then(res => {
console.log(res)
})
五、封装一个requset模块
新建network在其下requset.js文件夹内封装
import axios from 'axios'
export function request(config, success, failure){
//1.创建axios的实例
const instance = axios.create({
baseURL: 'https://httpbin.org',
timeout: 5000
})
//发送真正的网络请求
instance(config).then(res => {
success(res);
})
.catch(err => {
failure(err);
})
}
可直接在main.js中使用
import { request } from './network/request'
request({
url: '/headers'
}, res => {
console.log(res);
}, err => {
console.log(err);
})
六、axios拦截器的使用
拦截器分为 请求拦截 和 响应拦截。
又分别分为 请求成功拦截 请求失败拦截 响应成功拦截 响应失败拦截。
请求拦截:
//请求拦截的作用
instance.interceptors.request.use(config => {
console.log(config);
//1.比如config中的一些信息不符合服务器的要求
//2.比如每次发送网络请求时,都希望在页面中显示一个请求的图标
//3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
return config;
}, err => {
console.log(err);
})
响应拦截
//2.2响应拦截
instance.interceptors.response.use(res => {
// console.log(res);
return res.data;
}, err => {
console.log(err)
})