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功能特点

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'exportdefault{
    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'exportdefault{
    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'exportdefaultfunctionaxios(option){returnnewPromise((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、传入回调函数

exportfunctionrequest(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、传入一个参数进行回调

exportfunctionrequest(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用法

exportfunctionrequest(config){returnnewPromise((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

exportfunctionrequest(config){returnnewPromise((resolve, reject)=>{// 1.创建axios的实例const instance = axios.create({
      baseURL:'http://127.0.0.1:8080',
      timeout:5000})// 发送真正的网络请求returninstance(config)})}

十、axios中的拦截器

请求拦截的作用是什么？

1. 比如config中的一些信息不符合服务器的要求
2. 比如每次发送网络请求时, 都希望在界面中显示一个请求的图标
3. 某些网络请求(比如登录(token)), 必须携带一些特殊的信息

import axios from'axios'exportfunctionrequest(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.发送真正的网络请求returninstance(config)}

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

Java专栏目录 | 点击这里