Vue基础知识-（六）axios的封装

本文最后更新于：February 7, 2022 pm

Vue(读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，方便与第三方库或既有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

目录

封装的方式有很多，这里写的封装方式都是从最简单理解的开始，再到后面的简化，循序渐进。

所以，如果使用，推荐使用最后一种方式。

自行建一个 request.js 文件，封装都是写在此文件中。

方式一

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import axios from 'axios'

export function request(config,success,failure){
  //创建axios实例
  const instance = axios.create({
    baseURL: 'http://123.42.4.5:8080',
    timeout: 5000
  })

  //发送请求
  instance(config)
  .then(res=>{
    success(res)
  })
  .catch(err=>{
    failure(err)
  })

}

调用：

1
2
3
4
5
6
7
8
9
import {request} from '../request/request.js'

request({
  url: '/home/in'
},res=>{
  console.log(res)
},err=>{
  console.log(err)
})

方式二

是将方式一中的一种改变。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import axios from 'axios'

export function request(config){
  //创建axios实例
  const instance = axios.create({
    baseURL: 'http://123.42.4.5: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
import {request} from '../request/request.js'

request({
  baseConfig:{
     url: '/home/in'
  },
  success: function (res){

  },
  failure: function (err){

  }

})

方式三

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import axios from 'axios'

export function request(config){
  return new Promise((resolve,reject) =>{
    //创建axios实例
    const instance = axios.create({
      baseURL: 'http://123.42.4.5:8080',
      timeout: 5000
    })

    //发送请求
    instance(config)
    .then(res=>{
      resolve(res)
    })
    .catch(err=>{
      reject(err)
    })
  })

}

使用：

1
2
3
4
5
6
7
8
9
import {request} from '../request/request.js'

request({
  url: '/home/in'
}).then(res=>{
  
}).catch(err=>{
  
})

方式四

就是将方式三的进行改变，因为方式三种返回的是Promise，所以，可以直接返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
import axios from 'axios'

export function request(config){
  //创建axios实例
  const instance = axios.create({
    baseURL: 'http://123.42.4.5:8080',
    timeout: 5000
  })

  //发送请求
   return instance(config) //返回的就是Promise
}

使用：

1
2
3
4
5
6
7
8
9
import {request} from '../request/request.js'

request({
  url: '/home/in'
}).then(res=>{
  
}).catch(err=>{
  
})