Vue学习笔记——axios网络请求框架学习
注:这是在vue环境下的学习
vue-cli2: vue init webpack 项目名称
vue-cli3:vue create 项目名称
安装过程及调试
①安装
npm install axios --save
②导入
import axios from 'axios'
③简单试用过程测试
axios({
// url:"http://123.207.32.32:8000/home/data?type=sell&page=3"
url:"http://123.207.32.32:8000/home/data",
// 专门针对get请求的参数拼接
params:{
type:'pop',
page:1
}
}).then(res=>{
console.log(res);
})
axiox请求方式
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]])
发送并发请求
若需要同时发送多个请求,
使用 axios.all([])返回的也是一个数组。
格式如下:
// 若需要发送多个请求,
// 类似于 Promise.all([new Promise((resolve,reject)=>{ })
// ,new Promise((resolve,reject)=>{ })])
axios.all([axios(),axios()]).then(results=>{
})
其格式类似于Promise中的.all方法
Promise.all([new Promise((resolve,reject)=>{
}),new Promise((resolve,reject)=>{
})])
代码演示如下:
axios.all([axios({
url:'http://123.207.32.32:8000/home/multidata'
}),axios({
url:'http://123.207.32.32:8000/home/data',
params:{
type:'sell',
page:4
}
})]).then(results=>{
console.log(results);
console.log(results[0]);
console.log(results[1]);
})
执行结果如下:
axios.spread方法
使用axios.spread可将数组[res1,res2]分隔展开为res1,res2。
代码如下:
axios.all([axios({
url:'http://123.207.32.32:8000/home/multidata'
}),axios({
url:'http://123.207.32.32:8000/home/data',
params:{
type:'sell',
page:4
}
})]).then(axios.spread((res1,res2)=>{
console.log(res1);
console.log(res2);
}))
执行结果如下:
全局配置
代码举例如下:
// 全局配置
// 将共有的域名定义为全局配置,使得代码更加简洁
axios.defaults.baseURL ='http://123.207.32.32:8000'
axios.defaults.timeout = 5000
axios.all([axios({
url:'/home/multidata'
}),axios({
url:'/home/data',
params:{
type:'sell',
page:4
}
})]).then(axios.spread((res1,res2)=>{
console.log(res1);
console.log(res2);
}))
常用的配置选项
但是如果直接设置全局配置的话,那么当某个请求的baseURL等其他信息并不是这个的时候,却没办法灵活应对。这个时候就需要创建axios的实例。
演示如下:
通过多个实例实现配置的互不干涉。
// 4.创建axios的实例
const instance1 = axios.create({
baseURL:'http://123.207.32.32:8000',
timeout:5000
})
// 进行一次网络请求
instance1({
url:'/home/multidata'
}).then(res=>{
console.log(res);
})
instance1({
url:'/home/data',
params:{
type:'pop',
page:1
}
}).then(res =>{
console.log(res);
})
// 从而实现每一个axios实例有自己独立的配置
const instance2 = axios.create({
baseURL:'http://123.123.312.132:8000',
timeout:10000,
})
axios框架模块封装
为什么要对axios进行封装?
如果不进行封装,那么在每一次要进行网络请求的时候,我们都是单独的书写对于这个axios框架下的对应代码及其代码思路,但如果某一天,使用的这个框架出现大漏洞或者不再维护,我们不得不改用其他框架,那程序员就必须在每一个使用了axios框架的地方进行代码的修改,工作量极大。
因此,对axios进行模块封装,可以使得后面维护的成本减小。
模块封装步骤
①在src文件下新建一个network文件夹,并在其中新建一个request.js
②-1对axios进行封装
import axios from 'axios'
export function request(config,success,failure){
// 1.创建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)
})
}
②-2在某个地方对request进行调用,进行网络请求(这里我是在main.js中)
// 封装request模块
import {
request} from './network/request'
request({
url:'/home/multidata'
},res=>{
console.log(res);
},err=>{
console.log(err);
})
执行结果:
③-1运用第二个更加美观的使用回调的方式
export function request2(config){
const instance = axios.create({
baseURL:'http://123.207.32.32:8000',
timeout:5000
})
// 发送真正的的网络请求
instance(config.baseConfig)
.then(res =>{
// console.log(res);
success(res)
}).catch(err=>{
// console.log(err);
failure(err)
})
}
③-2
import {
request2} from './network/request2'
request2({
baseConfig:{
},
success:function(res){
},
failure:function(err){
}
})
但这两种方式都不是最终方式,既然是异步操作,那为什么不放在Promise里面呢?
④-1 request.js
export function request(config) {
return new Promise((resolve,reject)=>{
// 1.创建axios的实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 发送真正的的网络请求
instance(config)
.then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
④-2 使用模块
// 法3
request({
url:'/home/multidata'
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
⑤最终方案:instance(config)实际是返回的就是一个Promise对象,因此这里的包装可以去掉
// 法4
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
return instance(config)
}
⑤-2 使用模块:和上一个方法的使用没有任何改变
// 法3
request({
url:'/home/multidata'
}).then(res=>{
console.log(res);
}).catch(err=>{
console.log(err);
})
现在是不是简洁明了了?这个时候,如果我们使用的框架有了更改,则只需要将request.js中对于网络请求的部分进行修改即可。
axios拦截器
拦截器分为四种:请求成功、请求失败、响应成功、响应失败
2.1请求拦截的作用
1.比如拦截config中的一些不符合服务器要求的信息
2.比如每次发送网络请求时,都虚妄在界面中显示一个请求的图标
3.某些网络请求(比如登录(token)),必须携带一些特殊的信息
代码演示:
①request.js
export function request(config) {
// 1.创建axios的实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
})
// 2.axios拦截器
// 请求拦截
// use中的两个参数为两个函数,分别对应成功和失败
instance.interceptors.request.use(config=>{
console.log(config);
// 2.1请求拦截的作用
// 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);
});
// instance(config)实际是返回的就是一个Promise对象,因此这里的包装可以去掉
// 3.// 发送真正的的网络请求
return instance(config)
}
执行结果: