1.网络请求模块的选取
我们在开发中一定会碰到很多的网络请求，因为前后端交互数据，基本都是从后台请求过来的，那么我们如何去选择网络请求的方式呢？
-
vue中发送网络请求有许多的方式，那么在开发中，我们如何选择呢？
-
1.选择传统的Ajax(基于XMLHttpRequest(XHR))
缺点:1.配置和调用的方式非常混乱
2.手写xhr可能会人为出现错误。或者封装的不够全面。
3.所以开发中我们很少直接使用AJAX，而是使用Jquery-Ajax -
2.那么我们为什么也不是用jq封装好的ajax？
- 1.首先在vue开发中，不需要使用到jq
- 2.如果我们进行一个请求，特意引用jq不合理
(因为vue源码也就10000+，而jq源码也10000+) - 3.所以完全没有必要因为使用网络请求而使用jq框架。
-
3.官方推出了Vue-resource (vue2.0后,但是这个已经不再维护了)
+1.使用vue-resource会导致后面的项目难以维护。 -
4.vue-axios(作者推荐使用的网络请求框架)
-
2.那么vue-axios有什么功能特点呢？
- 在浏览器中发送xhr请求
- 在node.js中也可以发送http请求
- 支持Promise api
- 拦截请求和响应
- 转换请求和响应数据
- 等等
3.安装和使用vue-axios
安装axios
npm install axios --save
使用axios
请求的基本使用
使用post请求（后台接口为post）
axios({
url:'http://localhost:3002/index',
method:'post'
}).then(res => {
console.log(res)
})
}
使用get请求（后台接口为get时）
axios({
url:'http://localhost:3002/index',
method:'get'
}).then(res => {
console.log(res)
})
}
axios 处理并发请求
axios.all([]) 返回的结果是一个数组，使用axios。spread可以将数组[res1,res2]展开为res1,res2
databtn(){
axios.all([axios({
url:'http://localhost:3002/index',
method:'post'
}),axios({
url:'http://localhost:3002/api',
method:'post'
})])
.then(result => {
console.log(result);
})
4.axios的配置相关信息
开发时的必用好东东（我上次没有整baseURL差点恶心死我）
+ 有时候我们开发的时候服务器前面的baseUrl时重复的，这时候我们想要修改url的话就会很麻烦，我们直接全局配置baseurl
+ 在main.js中配置全局的设置
axios.defaults.baseUrl = 'http://localhost:8080'
axios.defailts.timeout = 5
+ 这样当我们在前后端一起联调的时候，如果更换了局域网，我们在多个组件内不需要一个个更改，而是在main.js中修改baseURL就可以了。
5. axios模块封装
如果像上面这样使用axios的话，我们发现当我们使用的每一个组件里面都必须引用axios,这样我们有100个组件，就要引入100次axios，依赖性太强了
所以我们要封装一个文件
文件加 network 封装网络层
封装一个request.js文件
通过promise封装
//1.引入axios
import axios from 'axios'
//通过promise 封装
export function request(config){
return new Promise((resolve, reject) => {
//1.创建axios的实例
const instance = axios.create({
baseURL:'http://localhost:3002',
timeout:5000
})
//2.发送真正的请求
instance(config)
.then(res => {
resolve(res);
})
.catch(err => {
reject(err);
})
})
}
完了在项目中引用
import {request} from '../network/request'
request({
url:'/index',
method:'post'
}).then(res => {
console.log(res);
}).catch(err => {
console.log(err);
})
这样就可以了。
6.axios拦截器
-
用于我们在每次发送请求或者得到响应后，进行相应的处理
-
如何使用拦截器呢？
instance.interceptors.request
传入两个函数
instance.interceptors.request.use(config => {
console.log(config); //拦截下来的是这个请求的所有配置，发送成功但是被拦截了
},
err=>{
console.log(err); //来到这里的情况比较少
})
打印config为
——————————————————————————————
instance.interceptors.request.use(config => {
console.log(config); //拦截下来的是这个请求的所有配置，发送成功但是被拦截了
},
err=>{
console.log(err); //来到这里的情况比较少
})
组件内使用request打印出来错误
TypeError: Cannot read property 'cancelToken' of undefined
at throwIfCancellationRequested (dispatchRequest.js?5270:12)
at dispatchRequest (dispatchRequest.js?5270:24)
因为第一步拿到了config 没有返回 所以就不能拿到数据而会报错了。
如果把config return 出去的话 这时候就可以拿到数据了。
instance.interceptors.request.use(config => {
console.log(config); //拦截下来的是这个请求的所有配置，发送成功但是被拦截了
return config //return 出去的话就可以拿到请求的数据了
},
err=>{
console.log(err); //来到这里的情况比较少
})
我们使用请求拦截做什么呢？
- 假如说我们请求回来的config因为不符合服务器的要求，我们就需要把config设置进行修改，然后返回出去。
- 比如说我们在请求的时候显示出来一个图标，就是加载中的图标，请求成功后把这个图标隐藏了。
- 某些网络请求（比如登录）,必须携带一些特殊的信息（token）,拦截这个登录信息，跳转到别的地方。
7.拦截响应
instance.interceptors.response
instance.interceptors.response.use(result => {
console.log("响应拦截打印:")
console.log(result);
//
},
err => {
console.log(err);
})
当响应拦截之后，axios就不能请求到数据了 打印出来是undefined
拦截完数据后，可以返回出我想要的数据，
比如说我只要拿到data数据，就可以return res.data
instance.interceptors.response.use(result => {
return result.data
},
err => {
console.log(err);
})
这样使用我们请求回来的数据就只有data,没有多余的信息了。
8.一个简单的axios封装
//1.引入axios
import axios from 'axios'
//通过promise 封装
export function request(config){
return new Promise((resolve, reject) => {
//1.创建axios的实例
const instance = axios.create({
baseURL:'http://localhost:3002',
timeout:5000
})
//2.axios的拦截器
//2.1请求拦截的作用
instance.interceptors.request.use(config => {
// console.log(config); //拦截下来的是这个请求的所有配置，发送成功但是被拦截了
return config //return 出去的话就可以拿到请求的数据了
},
err=>{
// console.log(err); //来到这里的情况比较少
})
//2.2响应拦截的作用
instance.interceptors.response.use(result => {
return result.data
},
err => {
console.log(err);
})
//3.发送真正的请求
instance(config)
.then(res => {
resolve(res);
})
.catch(err => {
reject(err);
})
})
}
