Vue网络封装模块
-
不要直接用axios第三方模块
-
如果崩溃难维护
-
所以需要封装
网络模块
-
传统的Ajax 是基于XMLHttoRequest(XHR);
-
为什么不用
-
配置和调用方式等非常混乱
-
编码起来难/封装不容易 不完善 bug多
-
所以真实项目一般使用jQuery-Ajax
-
-
-
jQuery-Ajax
-
为什么不选择
-
vue开发中不需要使用jQuery
-
为了网络请求,特意引入不合理
-
代码量大(重量级框架)
-
-
-
官方Vue1.x的时候, 推出了Vue-resource
-
相对于jQuery小
-
为什么不选择
-
官方去掉了,不在更新
-
-
-
axios引入
-
jsonp
-
前端开发常见的网络请求方式
-
主要是为了解决跨域访问的问题
-
原理
-
JSONP的核心在于通过<script>标签的src来帮助我们请求数据
-
原因是我们的项目部署在domain1.com服务器上时,是不能直接访问domain2.com服务器上的资料的
-
这个时候, 我们利用<script>标签的src帮助我们取服务器请求到数据,将数据当做一个javascript的函数来执行, 并且执行的过程中出传入我们需要的json
-
所以,封装jsonp的核心就在于我们监听window上的jsonp进行回调时的名称
-
-
Axios
特点
-
在浏览器中国发送XMLHttpRequests请求
-
在node.js中发送http请求
-
支持 Promise API
-
拦截请求和响应
-
转换请求和响应数据
-
等
请求方式
-
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
http://123.207.32.32:8000/home/multidata
引入
import axios from 'axios';
使用
axios({//默认为get
url:'http://xxx/home/multidata'
}).then(res =>{
console.log(res)
})
axios({//默认为get
url:'http://xxx/home/multidata',
method:"get",
}).then(res =>{
console.log(res)
})
// 传参
axios({
url:"http://xxx/home/data",
params:{
type: 'pop',
page: 1,
}
}).then(res => {
console.log(res)
})
//axios并发请求
axios.all([axios({
url:"http://xxx/home/multidata"
}),axios({
url:"http://xxx/home/data",
params:{
type: 'pop',
page: 5,
}
})])
.then(results => {
console.log(results);
})
//axios并发请求 展开获取
axios.all([axios({
url:"http://xxx/home/multidata"
}),axios({
url:"http://xxx/home/data",
params:{
type: 'pop',
page: 5,
}
})])
.then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
}))
全局配置
-
//全局配置
axios.defaults.baseURL = 'http://xxx';
axios.defaults.timeout = 5000;
//axios并发请求 展开获取
axios.all([axios({
url:"/home/multidata"
}),axios({
url:"/home/data",
params:{
type: 'pop',
page: 5,
}
})])
.then(axios.spread((res1, res2) => {
console.log(res1);
console.log(res2);
})) -
常见配置
-
url
-
method
-
baseURL
-
transformRequest:[function(data)()]
-
transformResponse:[function(data)()]
-
headers
-
params
-
paramsSeralizer
-
timeout
-
withCredentials:false 跨域是否带token
-
adapter 自定义请求处理
-
auth 身份验证信息
-
reponseType: 'json' 响应的数据格式
-
data:[]key:'da'] 请求体
实例和模块封装
// 创建实例 解决地址不一致问题
const instance1 = axios.create({
baseURL = 'http://xxx',
timeout = 5000,
})
// 使用实例
instance1({
url:"/home/multidata",
}).then(res => {
console.log(res)
})
instance1({
url:"/home/data",
params:{
type: 'pop',
page: 5,
}
}).then(res => {
console.log(res)
})
封装
-
对于引入第三方框架的 不要产生依赖性
-
防止框架不维护了 需要一个个修改
-
单独封装出来一个文件
-
network/reuqest.js
-
import axios from 'axios';
// 为了防止多个实例 需要导出 不是用default
export function request(config, success, failure){//传入参数(函数)用于回调
//1.创建实例
const instance = axios.create({
baseURL:'http://xxx',
timeout:5000
});
//发送真正的网络请求
//把结果和异常回调出去 说明调用的时候需要传入参数
instance(config)
.then(res => {
console.log(res);
success(res);//通过success回调
})
.catch(err => {
console.log(err)
failure(err);//通过failure回调
})
} -
使用main.js
-
//5.封装request模块
import {request} from "./network/request.js";
request({
url:"/home/multidata"
},res => {//success
console.log(res)
},err => {
console.log(object)
}) -
方式二
-
//方式二
import axios from 'axios';
// 为了防止多个实例 需要导出 不是用default
export function request(config){//传入参数(函数)用于回调 只传入一个//1.创建实例
const instance = axios.create({
baseURL:'http://xxx/api/h8',
timeout:5000
});//发送真正的网络请求
//把结果和异常回调出去 说明调用的时候需要传入参数
instance(config.baseConfig)
.then(res => {
// console.log(res);
config.success(res);//通过success回调
})
.catch(err => {
console.log(err)
config.failure(err);//通过failure回调
})}
import {request} from "./network/request.js"; request({ baseCofig: { url:"/home/multidata" }, success: (res)=>{ console.log(res); }, failure: (err)=>{ console.log(err); } });
-
使用Promise
-
//使用Promise import axios from 'axios';
// 为了防止多个实例 需要导出 不是用default
export function request(config){//使用Promisereturn new Promise((resolve,reject) => {
//1.创建实例
const instance = axios.create({
baseURL:'http://xxx/api/h8',
timeout:5000
});//发送真正的网络请求 //把结果和异常回调出去 说明调用的时候需要传入参数 instance(config) .then(res => { resolve(res);//通过success回调 }) .catch(err => { reject(err);//通过failure回调 })
})
//使用Promise
import {request} from "./network/request.js";
request({
url:"/home/multidata"
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
});
-
终极
//终极 import axios from 'axios'; //换框架 导入对应框架// 为了防止多个实例 需要导出 不是用default
export function request(config){//1.创建实例 //换框架时换的东西 const instance = axios.create({ baseURL:'http://xxx/api/h8', timeout:5000 }); //发送真正的网络请求 //把结果和异常回调出去 说明调用的时候需要传入参数 return instance(config);//直接return 因为本身就是Promise //换框架最后return new Promise 吧替换的代码包起来
}
//终极
import {request} from "./network/request.js";
request({
url:"/home/multidata"
}).then(res => {
console.log(res)
}).catch(err => {
console.log(err)
});
-
换框架
//终极 import axios from 'axios'; //换框架 导入对应框架// 为了防止多个实例 需要导出 不是用default
export function request(config){//1.创建实例 //换框架时换的东西 const instance = axios.create({ baseURL:'http://xxx/api/h8', timeout:5000 }); //发送真正的网络请求 //把结果和异常回调出去 说明调用的时候需要传入参数 return instance(config);//直接return 因为本身就是Promise //换框架最后return new Promise 吧替换的代码包起来
}
拦截器
-
拦截请求过程 做一些操作
-
请求成功,请求失败,响应成功,响应失败 4个拦截
-
import axios from 'axios';
//换框架 导入对应框架
// 为了防止多个实例 需要导出 不是用default
export function request(config){
//1.创建实例 //换框架时换的东西
const instance = axios.create({
baseURL:'http://xxx:8000/api/h8',
timeout:5000
});
//2.axios的拦截器
//axios interceptors 全局
//拦截请求
instance.interceptors.request.use(config => {
console.log(config);
//做事情
//1.比如config中的一些信息不符合服务器要求 比如拼接头部header
//2.比如每次请求发送网络请求时, 都希望在界面中显示一个请求的小图标 这里显示出来 响应的时候隐藏起来
//3.比如某些网络请求(比如登录(token)), 必须携带一些特殊的信息 拦截没有登录的话跳转到登录
//返回请求
return config;
}, err => {
console.log(err);
});
//拦截响应
instance.interceptors.response.use(res => {
console.log(res);
//只用返回data就好了
return res.data;
}, err => {
console.log(err);
});
//3.发送真正的网络请求
//把结果和异常回调出去 说明调用的时候需要传入参数
return instance(config);//直接return 因为本身就是Promise
//换框架最后return new Promise 吧替换的代码包起来
} -