app开发定制Vue为何弃用经典的Ajax，选择新技术Axios？

目录

一、app开发定制选择什么网络模块?

app开发定制发送网络请求的方式有很多，app开发定制下面来简单介绍一下：

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

2、jQuery - Ajax

app开发定制为什么不适用jQuery的Ajax？

在vueapp开发定制开发中不需要使用jQuery，因为jQuery很重量级。

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

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

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,[,data[, config]])
  8. 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)		}))	}}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15

五、全局配置

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)		}))	}}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

六、创建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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

七、常见的配置选项

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)		})	})}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19

九、封装一个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)    })}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

调用封装好的request模块

import {request} from "./network/request";request({  url: '/home/multidata'}, res => {  console.log(res);}, err => {  console.log(err);})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

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)    })}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
import {request} from "./network/request";request({  baseConfig: {  },  success: function (res) {  },  failure: function (err) {  }})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

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)      })  })}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
request({  url: '/home/multidata'}).then(res => {  console.log(res);}).catch(err => {  // console.log(err);})
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

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)  })}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

十、axios中的拦截器

请求拦截的作用是什么？

  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)}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

十一、关注公众号哪吒编程，回复1024，获取资料，还有不定期的送书活动

  • 数据结构和算法基础
  • 人工智能数据基础与Python机器学习实战
  • 机器学习数学基础
  • node.js入门指南

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

关注公众号【哪吒编程】，回复1024，获取Java学习路线思维导图、大厂面试真题、加入万粉计划交流群、一起学习进步
网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发