今天写点什么呢,就写写如何将axios的post请求和get请求封装在一个函数中。
首先讲讲axios的get请求。
axios.get('/user')
.then( (response) => {
console.log(response);
})
.catch( (error) => {
console.log(error);
});
get请求如何传参想必你们应该都知道的
一是能够拼接在url上
axios.get('/user?ID=12345')
.then( (response) => {
console.log(response);
})
.catch( (error) => {
console.log(error);
});
二是axios能够以键值对的形式放入params对象中
axios.get('/user', {
params: {
ID: 12345
}
})
.then( (response) => {
console.log(response);
})
.catch( (error) => {
console.log(error);
});
axios的post请求
axios的post请求参数能够直接在请求地址后加在一个对象中
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then( (response) => {
console.log(response);
})
.catch( (error) => {
console.log(error);
});
今天讲的如何将axios的post请求与get请求封装在一块儿利用的是axios(config)
一、get请求
axios({
methods: 'get',
url: '/user',
params: {
ID: '1234'
}
})
.then( (response) => {
console.log(response);
})
.catch( (error) => {
console.log(error);
});
二、post请求
axios({
methods: 'post',
url: '/user',
data: {
ID: '1234'
}
})
.then( (response) => {
console.log(response);
})
.catch( (error) => {
console.log(error);
});
根据上面的对比你们应该能够清楚看出get请求与post请求的差别在哪了,那么咱们只要将差别点摘出来就OK了
import axios from 'axios';
export default function(url, method, params = {}) {
// 首先判断是get请求仍是post请求
let data = method.toLocaleLowerCase() === 'get' ? 'params' : 'data';
return axios({
method,
url,
[data]: params // 差别点在于data的值
}).then((res) => {
return Promise.resolve(res.data);
}).catch((err) => {
return Promise.reject(err);
})
}
利用上面的函数咱们就能够轻松利用这个函数进行axios请求了,今天就讲这么多,但愿对你们有所帮助。