目录 一、选择什么网络模块?二、axios功能特点三、axios支持多种请求方式四、发送并发请求五、全局配置六、创建axios实例七、常见的配置选项八、axios的封装九、封装一个request函数1、传入回调函数2、传入一个参数进行回调3、Promise用法4、简化Promise 十、axios中的拦截器十一、关注公众号哪吒编程,回复1024,获取Java学习资料,还有不定期的送书活动```为什么80%的码农做不了架构师?>>>```[Java专栏目录 | 点击这里](https://blog.csdn.net/guorui_java/article/details/120098618) 一、选择什么网络模块?
发送网络请求的方式有很多,下面来简单介绍一下:
1、传统的Ajax是基于XMLHttpRequest(XHR)
2、jQuery - Ajax
为什么不适用jQuery的Ajax?
在vue开发中不需要使用jQuery,因为jQuery很重量级。
3、vue官方在Vue1.x的时候,推出了Vue-resource。
Vue-resource角jQuery轻便很多,但在vue2.x之后,尤雨溪对Vue-resource不维护了,简言之,就是弃用了。
4、尤雨溪推荐使用axios。
二、axios功能特点 在浏览器中发送XMLHttpRequest请求在node.js中发送http请求支持Promise API支持拦截请求和响应转换请求和响应数据 三、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]]) 四、发送并发请求有的时候,会同时发送多个请求。
使用axios.all,可以放入多个请求的数组。
axios.all([])返回的是一个数组,使用axios.spread可以将数组[res1,res2]展开为res1和res2。
import axios from 'axios' export default { name: 'app', created(){ axios.all([axios.get('http://127.0.0.1:8080/getUserList'), axios.get('http://127.0.0.1:8080/getUserPage',{ params: {pageNum: 1, pageSize: 10} }) ]).then(axios.spread((res1,res2) => { console.log(res1) console.log(res2) })) } } 五、全局配置 import axios from 'axios' export default { name: 'app', created(){ // 提取全局配置 axios.defaults.baseURL = 'http://127.0.0.1:8080' axios.all([axios.get('/getUserList'), axios.get('/getUserPage',{ params: {pageNum: 1, pageSize: 10} }) ]).then(axios.spread((res1,res2) => { console.log(res1) console.log(res2) })) } } 六、创建axios实例 const instance1 = axios.create({ baseURL: 'http://127.0.0.1:8080', timeout: 5000 }) instance1({ url: '/home/getUserList' }).then(res => { console.log(res); }) instance1({ url: '/home/getUserPage', params: { type: 'pop', page: 1 } }).then(res => { console.log(res); }) const instance2 = axios.create({ baseURL: 'http://127.0.0.1:8081', timeout: 10000, // headers: {} }) 七、常见的配置选项1、请求地址
\url:'http://127.0.0.1:8080/getUserList'
2、请求类型
method:'get'
3、请求路径
baseURL:'http://127.0.0.1:8080'
4、请求前的数据处理
transformRequest:[function(data){}],
5、请求后的数据处理
transformResponse: [function(data){}],
6、自定义的请求头
headers:{'x-Requested-With':'XMLHttpRequest'},
7、URL查询对象
params:{ id: 1 },
8、查询对象序列化函数
paramsSerializer: function(params){ }
9、request body
data: { key: 'aa'},
10、超时设置s
timeout: 5000,
11、跨域是否带Token
withCredentials: false,
12、自定义请求处理
adapter: function(resolve, reject, config){},
13、身份验证信息
auth: { uname: '', pwd: '12'},
14、响应的数据格式 json / blob /document /arraybuffer / text / stream
responseType: 'json',
八、axios的封装 import axios from 'axios' export default function axios(option){ return new Promise((resolve,reject) => { //1.创建sxios实例 const instance = axios.create({ url: 'api', timeout: 5000, headers: '' }) //2.传入对象进行网络请求 instance(option).then(res => { resolve(res) }).catch(err => { reject(err) }) }) } 九、封装一个request函数 1、传入回调函数 export function request(config, success, failure) { // 1.创建axios的实例 const instance = axios.create({ baseURL: 'http://127.0.0.1:8080', timeout: 5000 }) // 发送真正的网络请求 instance(config) .then(res => { success(res); }) .catch(err => { failure(err) }) }调用封装好的request模块
import {request} from "./network/request"; request({ url: '/home/multidata' }, res => { console.log(res); }, err => { console.log(err); }) 2、传入一个参数进行回调 export function request(config) { // 1.创建axios的实例 const instance = axios.create({ baseURL: 'http://127.0.0.1:8080', timeout: 5000 }) // 发送真正的网络请求 instance(config.baseConfig) .then(res => { config.success(res); }) .catch(err => { config.failure(err) }) } import {request} from "./network/request"; request({ baseConfig: { }, success: function (res) { }, failure: function (err) { } }) 3、Promise用法 export function request(config) { return new Promise((resolve, reject) => { // 1.创建axios的实例 const instance = axios.create({ baseURL: 'http://127.0.0.1:8080', timeout: 5000 }) // 发送真正的网络请求 instance(config) .then(res => { resolve(res) }) .catch(err => { reject(err) }) }) } request({ url: '/home/multidata' }).then(res => { console.log(res); }).catch(err => { // console.log(err); }) 4、简化Promise export function request(config) { return new Promise((resolve, reject) => { // 1.创建axios的实例 const instance = axios.create({ baseURL: 'http://127.0.0.1:8080', timeout: 5000 }) // 发送真正的网络请求 return instance(config) }) } 十、axios中的拦截器请求拦截的作用是什么?
比如config中的一些信息不符合服务器的要求比如每次发送网络请求时, 都希望在界面中显示一个请求的图标某些网络请求(比如登录(token)), 必须携带一些特殊的信息 import axios from 'axios' export function request(config) { // 1.创建axios的实例 const instance = axios.create({ baseURL: 'http://127.0.0.1:8080', timeout: 5000 }) // 2.axios的拦截器 // 2.1.请求拦截的作用 instance.interceptors.request.use(config => { // console.log(config); return config }, err => { // console.log(err); }) // 2.2.响应拦截 instance.interceptors.response.use(res => { // console.log(res); return res.data }, err => { console.log(err); }) // 3.发送真正的网络请求 return instance(config) } 十一、关注公众号哪吒编程,回复1024,获取Java学习资料,还有不定期的送书活动 数据结构和算法基础人工智能数据基础与Python机器学习实战机器学习数学基础node.js入门指南 为什么80%的码农做不了架构师?>>> Java专栏目录 | 点击这里 关注公众号【哪吒编程】,回复1024,获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步
1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,会注明原创字样,如未注明都非原创,如有侵权请联系删除!;3.作者投稿可能会经我们编辑修改或补充;4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。 |
标签: #vue不用ajax #4尤雨溪推荐使用axios #二