Axios的安装与使用
使用前进行安装
npm install axios -s
- 最简单的使用:不封装,哪个文件里面用在哪个文件里面写默认是get请求
还可以这样写:
axios.post({
url:‘http:///ndfdsdsjfds’})
.then(res=>{
console.log(res)
})
- 有参数时候的写法对于get请求的参数拼接需要使用params,对于post请求要使用data{key:‘aaa’}
3 .并发请求axios.all
4.发送并发请求,使用axios.spread可以将结果展开 - 全局配置设置默认的BaseURL和延迟时间(毫秒)
6.创建对应的axios的实例面对请求多个不同的服务器(有多个地址)的时候,可以通过创建实例时指定基础地址
7.对axios进行封装,便于使用
在其他页面里面想使用封装好的axios
引入:
import {request} from ‘…/src/network/request’
注意*********这里的reques是封装模块里面的方法名
方法一:
// success,failur是回调函数
// export function request(config,success,failure){
// // 创建axios实例
// const instance=axios.create({
// baseURL:'http://123.207.32.32:8000',
// timeout:5000,
// })
// // 发送真正的网络请求
// instance(config)
// .then(res => {
// // console.log(res);
// success(res);
// })
// .catch(err => {
// // console.log(err)
// failure(err);
// })
// }
别的页面调用这个方法
方法二:
export function request(config){
// // 创建axios实例
// const instance=axios.create({
// baseURL:'http://123.207.32.32:8000',
// timeout:5000,
// })
// // 发送真正的网络请求
// instance(config.baseConfig)
// .then(res => {
// // console.log(res);
// config.success(res);
// })
// .catch(err => {
// // console.log(err)
// config.failure(err);
// })
别的页面调用这个方法
方法三:
用Promise封装
// export function request(config){
// return new Promise((resolve,reject)=>{
// // 创建axios实例
// const instance=axios.create({
// baseURL:'http://123.207.32.32:8000',
// timeout:5000,
// })
// // 发送真正的网络请求
// instance(config)
// .then(res => {
// resolve(res)
// })
// .catch(err => {
// reject(err)
// })
// })
// }
别的页面调用这个方法
方法四:最简便的封装,顺便加上了过滤器的用法
export function request(config){
// 创建axios实例
const instance=axios.create({
baseURL:‘http://123.207.32.32:8000’,
timeout:5000,
})
return instance(config)
}
别的页面调用这个方法
8.拦截器的使用:四种情况
export function request(config){
// 创建axios实例
const instance=axios.create({
baseURL:'http://123.207.32.32:8000',
timeout:5000,
})
// 2.1axios 的拦截器
instance.interceptors.request.use(config=> {
console.log(config);
// 为什么使用拦截器
// 1.config里面的信息不符合要求或是拦截对信息进行转化
// 2.比如每次发送网络时,都希望在界面中显示一个旋转请求的图表
// 3.登录必须携带一些特殊的信息(登录:token)
// 请求拦截用完的东西需要在返回出去
return config
},err=>{
console.log(err)
})
instance.interceptors.response.use(res=>{
console.log(res)
// 相应拦截的用处,取出有用的值data
// return res 用完了返回出去
return res.data
},err=>{
console.log(err)
})
return instance(config);
}
推荐vue基础到开发视屏:老师讲的贼拉好!!!
学习vue视频连接:bilibili