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

Posted 2022-02-19 哪吒

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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]展开为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)

`为什么80%的码农做不了架构师？>>>`

Java专栏目录 | 点击这里

以上是关于Vue为何弃用经典的Ajax，选择新技术Axios？的主要内容，如果未能解决你的问题，请参考以下文章