当在一个项目中需要请求多个baseURL或者其它不同的配置时,可以通过创建不同的axios实例 分别配置
const instance1 = axios.create({
baseURL:'http://123.456:8080',
timeout:5000
})
instance1({
url:'/home/test'
}).then(res=>{
console.log(res)
})
const instance2 = axios.create({
baseURL:'http://www.abc.com:8080',
timeout:3000
})
instance2({
url:'/test/aa'
}).then(res=>{
console.log(res)
})
2.基本封装
2.1 使用回调函数
network/request.js
import axios from 'axios'
export function request(config, success, fail) {
const instance1 = axios.create({
baseURL: 'http://www.abc.com:8080',
timeout: 3000
})
instance1(config)
.then(res => {
success(res)
}).catch(err => {
fail(err)
})
}
调用
import { request } from './network/request'
request({
url:'/api/test'
},res=>{
console.log(res)
},err=>{
console.log(err)
})
2.2上面的另一种写法
import axios from 'axios'
export function request(config) {
const instance1 = axios.create({
baseURL: 'http://www.abc.com:8080',
timeout: 3000
})
instance1(config.baseConfig)
.then(res => {
config.success(res)
}).catch(err => {
config.fail(err)
})
}
request({
baseConfig:{
url:'/api/test',
},
success(res){
console.log(res)
},
fail(err){
console.log(err)
}
})
2.3 返回一个Promise
import axios from 'axios'
export function request(config) {
return new Promise((resolve, reject) => {
const instance1 = axios.create({
baseURL: 'http://www.abc.com:8080',
timeout: 3000
})
instance1(config)
.then(res => {
resolve(res)
}).catch(err => {
reject(err)
})
})
}
import { request } from './network/request'
request({
url:'/api/test'
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
2.4因为instance调用之后本身返回的就是一个Promise实例,所以上面的代码可以简写为
import axios from 'axios'
export function request(config) {
const instance1 = axios.create({
baseURL: 'http://www.abc.com:8080',
timeout: 3000
})
return instance1(config)
}
import { request } from './network/request'
request({
url:'/api/test'
}).then(res=>{
console.log(res)
}).catch(err=>{
console.log(err)
})
网友评论