AI导航网
微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦！

Vue为何弃用经典的Ajax，选择新技术Axios？

分类：Ajax作者：哪 吒
@H_404_0@

目录

@H_404_0@

一、选择什么网络模块?

@H_404_0@发送网络请求的方式有很多，下面来简单介绍一下：

@H_404_0@1、传统的Ajax是基于XMLHttpRequest（XHR）

@H_404_0@2、jQuery - Ajax

@H_404_0@为什么不适用jQuery的Ajax？

@H_404_0@在vue开发中不需要使用jQuery，因为jQuery很重量级。

@H_404_0@3、vue官方在Vue1.x的时候，推出了Vue-resource。

@H_404_0@Vue-resource角jQuery轻便很多，但在vue2.x之后，尤雨溪对Vue-resource不维护了，简言之，就是弃用了。

@H_404_0@4、尤雨溪推荐使用axios。

二、axios功能特点

  1. 在浏览器中发送XMLHttpRequest请求
  2. 在node.js中发送http请求
  3. 支持Promise API
  4. 支持拦截请求和响应
  5. 转换请求和响应数据

三、axios支持多种请求方式

  1. axios(config)
  2. axios.request(config)
  3. axios.get(url,[,config])
  4. axios.delete(url,config])
  5. axios.head(url,config])
  6. axios.post(url,data[,config]])
  7. axios.put(url,config]])
  8. axios.patch(url,config]])

四、发送并发请求

@H_404_0@有的时候，会同时发送多个请求。

@H_404_0@使用axios.all，可以放入多个请求的数组。

@H_404[email protected]([])返回的是一个数组，使用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',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: {}
})

七、常见的配置选项

@H_404_0@1、请求地址

@H_404_0@\url:'http://127.0.0.1:8080/getUserList'

@H_404_0@2、请求类型

@H_404_0@method:'get'

@H_404_0@3、请求路径

@H_404_0@baseURL:'http://127.0.0.1:8080'

@H_404_0@4、请求前的数据处理

@H_404_0@transformRequest:[function(data){}],

@H_404_0@5、请求后的数据处理

@H_404_0@transformResponse: [function(data){}],

@H_404_0@6、自定义的请求头

@H_404_0@headers:{'x-Requested-With':'XMLHttpRequest'},

@H_404_0@7、URL查询对象

@H_404_0@params:{ id: 1 },

@H_404_0@8、查询对象序列化函数

@H_404_0@paramsSerializer: function(params){ }

@H_404_0@9、request body

@H_404_0@data: { key: 'aa'},

@H_404_0@10、超时设置s

@H_404_0@timeout: 5000,

@H_404_0@11、跨域是否带Token

@H_404_0@withCredentials: false,

@H_404_0@12、自定义请求处理

@H_404_0@adapter: function(resolve,reject,config){},

@H_404_0@13、身份验证信息

@H_404_0@auth: { uname: '',pwd: '12'},

@H_404_0@14、响应的数据格式 json / blob /document /arraybuffer / text / stream

@H_404_0@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)
    })
}
@H_404_0@调用封装好的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,
      timeout: 5000
    })

    // 发送真正的网络请求
    return instance(config)
  })
}

十、axios中的拦截器

@H_404_0@请求拦截的作用是什么？

  1. 比如config中的一些信息不符合服务器的要求
  2. 比如每次发送网络请求时,都希望在界面中显示一个请求的图标
  3. 某些网络请求(比如登录(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专栏目录 | 点击这里

@H_404_0@

在这里插入图片描述

关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。

相关推荐

ajax 上传文件项目下载
IE6是一个非常老旧的网页浏览器，虽然现在很少人再使用它，但是在某些特殊情况下，我们可能还需要使用IE6来访问网页。而在IE6中，我们通常会使用JavaScript来提交表单，来看一下具体操作。
ajax .post()
PHP中的count()函数是用来计算数组或容器中元素的个数。这个函数十分方便，在编写代码时使用频率也非常高。无论你是要统计数组的长度、统计字符串中字符出现的次数还是统计对象中属性的个数，count()都可以帮助你轻松
ajax 不返回值 写法
使用 AJAX（Asynchronous JavaScript and XML）技术可以在不刷新整个页面的情况下，向服务器发送请求并接收响应。通常来说，我们使用 AJAX 请求是为了获取后台数据，并将其展示在前端页面上。然而，有时候我们只需要
ajax 下载文件 blob
Ajax（Asynchronous JavaScript and XML）是一种用于改进网页用户体验的技术，通过与服务器进行异步通信，实现在网页上局部刷新数据而不必整个页面刷新的功能。在实际开发中，我们经常需要从服务器端下载文件，而传统
ajax 下载excel文件流
本文将介绍如何通过AJAX下载Excel文件流。通过AJAX，我们可以在不刷新整个页面的情况下，向服务器发送请求并获取响应数据。在某些场景下，我们需要通过AJAX下载Excel文件流，以便于在前端使用或保存到本地。本文将详
ajax .get .post
Ajax是一种用于客户端和服务器之间的异步通信技术。通过Ajax，我们可以在不刷新整个页面的情况下向服务器发送请求并获得响应数据。而在Ajax的基础上，.get和.post是两种常用的请求方法，它们分别用于发送GET和POST请
ajax 上传 excel
AJAX（Asynchronous JavaScript and XML）是一种在网页上实现异步数据传输的技术。通过AJAX，网页可以在不刷新整个页面的情况下与服务器进行数据交互，提升用户体验和页面性能。在实际应用中，AJAX广泛用于表单提交、
ajax 下拉 360取不到值
在使用Ajax下拉加载数据的过程中，有时候会出现无法取到360度的问题。这个问题可能是由于代码逻辑的问题导致的，也有可能是网络延迟引起的。为了解决这个问题，我们需要对代码进行仔细排查，并且在合适的地方添加适当
ajax 与 .post 区别
本文将介绍Ajax和.post之间的区别。Ajax是一种用于在网页上进行异步通信的技术，能够在不刷新整个页面的情况下更新部分页面内容。.post是jQuery中的一个方法，用于向服务器发送POST请求。虽然它们都可以用于发送异步
ajax 上传文件 目录权限
AJAX（Asynchronous JavaScript and XML）是一种在Web页面上进行异步数据请求和交互的技术。它的出现使得页面在后台与服务器进行数据交互的同时，不需要重新加载整个页面。在网页开发中，常常需要实现文件上传功能，
    pythonJavaScriptjavaHTMLreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-bootreact-native