赞
踩
我们在开发中一定会碰到很多的网络请求,因为前后端交互数据,基本都是从后台请求过来的,那么我们如何去选择网络请求的方式呢?
vue中发送网络请求有许多的方式,那么在开发中,我们如何选择呢?
1.选择传统的Ajax(基于XMLHttpRequest(XHR))
缺点:1.配置和调用的方式非常混乱
2.手写xhr可能会人为出现错误。或者封装的不够全面。
3.所以开发中我们很少直接使用AJAX,而是使用Jquery-Ajax
2.那么我们为什么也不是用jq封装好的ajax?
3.官方推出了Vue-resource (vue2.0后,但是这个已经不再维护了)
+1.使用vue-resource会导致后面的项目难以维护。
4.vue-axios(作者推荐使用的网络请求框架)
npm install axios --save
请求的基本使用 使用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) }) }
databtn(){
axios.all([axios({
url:'http://localhost:3002/index',
method:'post'
}),axios({
url:'http://localhost:3002/api',
method:'post'
})])
.then(result => {
console.log(result);
})
开发时的必用好东东(我上次没有整baseURL差点恶心死我)
+ 有时候我们开发的时候服务器前面的baseUrl时重复的,这时候我们想要修改url的话就会很麻烦,我们直接全局配置baseurl
+ 在main.js中配置全局的设置
axios.defaults.baseUrl = 'http://localhost:8080'
axios.defailts.timeout = 5
+ 这样当我们在前后端一起联调的时候,如果更换了局域网,我们在多个组件内不需要一个个更改,而是在main.js中修改baseURL就可以了。
如果像上面这样使用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);
})
这样就可以了。
用于我们在每次发送请求或者得到响应后,进行相应的处理
如何使用拦截器呢?
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); //来到这里的情况比较少
})
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,没有多余的信息了。
//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); }) }) }
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。