Vue学习6:axios网络模块封装
一、介绍
为什么选择axios
jsonp
二、axios的基本使用
支持多种请求方式:
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])
基本使用:
安装:npm install axios --save
导入:import axios from 'axios
三、axios发送并发请求
axios.all([axios(), axios()]).then()
四、axios的配置信息
axios的全局配置
常见的配置选项
五、axios的模块封装
在开发的时候,使用一个全局配置是不合适的,因为baseURL可能不是一成不变的,因此我们一般会创建不同的axios实例来对应不同的baseURL和timeout等等
注意:当我们使用了第三方的依赖库(axios),尽量不要在每个组件都引入这个依赖库,如果之后这个依赖库不再使用,那么每个组件内部都要进行修改,非常麻烦
应该自己封装一个文件,所有文件都面向自己封装的文件来进行开发,之后如果要改只需要改自己封装的文件
封装的request.js:
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
// });
// //2.发出真正的网络请求
// instance(config).then(res => {
// success(res);
// }).catch(err => {
// failure(err);
// })
// }
// //第二种封装方法
// export function request(config) {
// //1.创建axios的实例
// const instance = axios.create({
// baseURL: 'http://123.207.32.32:8000',
// timeout: 5000
// });
// //2.发出真正的网络请求
// instance(config.baseConfig).then(res => {
// config.success(res);
// }).catch(err => {
// config.failure(err);
// })
// }
// //第三种封装方法 promise
// export function request(config) {
// return new Promise((resolve, reject) => {
// //1.创建axios的实例
// const instance = axios.create({
// baseURL: 'http://123.207.32.32:8000',
// timeout: 5000
// });
// //2.发出真正的网络请求
// instance(config).then(res => {
// resolve(res);
// }).catch(err => {
// reject(err);
// })
// })
// }
//第四种封装方法 (终极方案)
export function request(config) {
//1.创建axios的实例
const instance = axios.create({
baseURL: 'http://123.207.32.32:8000',
timeout: 5000
});
//2.发送真正的网络请求
return instance(config); //本身返回值就是一个promise
}
使用:
//封装request模块
import { request } from './network/request';
// //第一种
// request({
// url: '/home/multidata',
// }, res => console.log(res), err => console.log(err))
// //第二种
// request({
// baseConfig: {
// url: '/home/multidata'
// },
// success: function(res) {
// console.log(res);
// },
// failure: function(err) {
// console.log(err);
// }
// })
//第三种 第四种
request({
url: '/home/multidata'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
六、axios的拦截器使用
axios提供了拦截器,用于在每次请求或者响应后,进行对应的处理
有请求成功、请求失败、响应成功、响应失败的拦截