vue中axios请求接口封装
1.基本请求接口(默认是get请求,不写method)axios({url:'http://123.456'}).then(res =>{console.log(res)})2.post请求接口axios({url:'http://123.456',method:"post",}).then(res =>{console.log(res)
·
1.基本请求接口(默认是get请求,不写method)
axios({
url:'http://123.456'
}).then(res =>{
console.log(res)
})
2.post请求接口
axios({
url:'http://123.456',
method:"post",
}).then(res =>{
console.log(res)
})
3.get请求拼接参数
axios({
url:'http://123.456',
// method:"post",
params:{
type:'lisa',
page:1
}
}).then(res =>{
console.log(res)
})
4.axios发送并发请求
axios.all([axios({
url:'http://123.789',
}),axios({
url:'http://123.456',
params:{
type:'lisa',
page:1
}
})]).then(axios.spread((res1,res2) => {
console.log(res1);
console.log(res2);
}))
5.baseurl的使用
axios.all([axios({
baseURL:'http://123.789',
url:'/home/data',
}),axios({
baseURL:'http://123.456',
url:'/home/data',
params:{
type:'lisa',
page:1
}
})]).then(axios.spread((res1,res2) => {
console.log(res1);
console.log(res2);
}))
6.timeout的使用(设置了在5000毫秒内请求数据 如果没有请求成功就执行错误函数)
axios.all([axios({
baseURL:'http://123.789',
url:'/home/data',
timeout:5,
}),axios({
baseURL:'http://123.456',
url:'/home/data',
timeout:5,
params:{
type:'lisa',
page:1
}
})]).then(axios.spread((res1,res2) => {
console.log(res1);
console.log(res2);
}))
7.使用全局的axios对应的配置进行网络请求baseurl和timeout
axios.defaults.baseURL = 'http://123.789'
axios.defau;ts.timeout = 5
axios.all([axios({
url:'/home/data',
}),axios({
baseURL:'http://123.456',
url:'/home/data',
params:{
type:'lisa',
page:1
}
})]).then(axios.spread((res1,res2) => {
console.log(res1);
console.log(res2);
}))
get请求与params对应
Post请求与data{ key:’aa‘}对应
8.创建对应的axios的实例(每个实例用自己独立的配置,一般都是一个实例)
const instance = axios.create({
baseURL:'http://123/456:8008',
timeout:5000
})
instance1({
url:'/home/data'
}).then(res =>{
console.log(res)
})
instance1({
url:'/home/data',
params:{
type:'pop',
page:1
}
}).then(res =>{
console.log(res)
})
9.1 封装(方法一)
request.js文件中(success和failure都是函数)
import axios from 'axios'
export function request(config){
//1.创建axios的实例
const instance = axios.create({
baseURL:'http://123/456:8008',
timeout:5000
})
//发送真正的网络请求
instance(config).then(res =>{
console.log(res);
success(res);
}).catch(err =>{
console.log(err);
failure(err);
})
}
使用(成功打印通过接口请求success出去)
import {request} from './net/request';
request({
url:'/home/data',
},res => {
console.log((res);
},err =>{
console.log(err);
})
9.2 封装(方法二)
回调函数 request.js文件中
import axios from 'axios'
export function request(config){
//1.创建axios的实例
const instance = axios.create({
baseURL:'http://123/456:8008',
timeout:5000
})
//发送真正的网络请求
instance(config.baseConfig)
.then(res =>{
console.log(res);
config.success(res);
}).catch(err =>{
console.log(err);
config.failure(err);
})
}
使用
import {request} from './net/request';
request({
baseConfig:{
},
succsee:function(res){
},
failure:function(res){
}
})
9.3 封装(方法三)
import axios from 'axios'
export function request(config){
return new Promise((resolve, reject) =>{
//1.创建axios的实例
const instance = axios.create({
baseURL:'http://123/456:8008',
timeout:5000
})
//发送真正的网络请求
instance(config)
.then(res =>{
resolve(res);
}).catch(err =>{
reject(err);
})
})
}
request({
url:'/home/data'
}).then(res =>{
console.log(res);
}).catch(err =>{
console.log(err)
})
9.4 封装(方法四)最简单一种
request,js文件
import axios from 'axios'
export function request(config){
//1.创建axios的实例
const instance = axios.create({
baseURL:'http://123/456:8008',
timeout:5000
})
//发送真正的网络请求
return instance(config) //因为本身返回的就是promise
}
使用
request({
url:'/home/data'
}).then(res =>{
console.log(res);
}).catch(err =>{
console.log(err)
})
更多推荐
已为社区贡献1条内容
所有评论(0)