Vue为何弃用经典的Ajax，选择新技术Axios？
一、选择什么网络模块?发送网络请求的方式有很多，下面来简单介绍一下：
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。
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:,
5、请求后的数据处理
transformResponse: ,
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)
}
————————————————
版权声明：本文为CSDN博主「哪 吒」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/guorui_java/article/details/122772164
页:
[1]