axios的簡單封裝

html中簡單封裝axios

/**
?*?@author?[Moisten]?itcode.icu
?*?@version?1.0.0
?*?@overview?封裝axios請求
?*?
?*?調(diào)用方法：
?*?var?datas?=?values;
?*?axiosPostRequst(`register`,?datas).then(res?=>?{?console.log('post請求--->',?res)?});
?*?
?*/

//?默認環(huán)境配置
axios.defaults.baseURL?=?'http://192.168.0.102/Home/Index/'

//?請求超時設(shè)置
axios.defaults.timeout?=?50000

//?post請求頭
axios.defaults.headers.post['Content-Type']?=?'application/x-www-form-urlencoded;charset=UTF-8'

//?請求攔截器
axios.interceptors.request.use(config?=>?{
????return?config
})


//?post請求
function?axiosPostRequst(url,?data)?{
????return?new?Promise((resolve,?reject)?=>?{
????????axios
????????????.post(url,?data)
????????????.then(res?=>?{
????????????????resolve(res.data)
????????????})
????????????.catch(err?=>?{
????????????????reject(err.data)
????????????})
????})
}

//?get請求
function?axiosGetRequst(url)?{
????return?new?Promise((resolve,?reject)?=>?{
????????axios
????????????.get(url)
????????????.then(res?=>?{
????????????????resolve(res.data)
????????????})
????????????.catch(err?=>?{
????????????????reject(err.data)
????????????})
????})
}

vue-cli下簡單的封裝axios

1. 安裝?axios

npm?install?axios?--save

1. 在main.js引入?axios

import?axios?from?'axios'

Vue.prototype.$axios?=?axios

//默認請求頭
axios.defaults.headers.post['Content-Type']?=?'application/x-www-form-urlencoded'

1. 使用axios

//拼接參數(shù)
this.$axios.get('/user?ID=12345')
??.then(function?(response)?{
????console.log(response);
??})
??.catch(function?(error)?{
????console.log(error);
??});

//對象傳參
this.$axios.get('/user',?{
????params:?{
??????ID:?12345
????}
??})
??.then(function?(response)?{
????console.log(response);
??})
??.catch(function?(error)?{
????console.log(error);
??});

//或者使用箭頭函數(shù)
this.$axios.get('/user?ID=12345')
??.then((response)?=>?{
????console.log(response);
??})
??.catch((error)?=>?{
????console.log(error);
??});

//執(zhí)行多個并發(fā)請求
function?getUserAccount()?{
??return?this.$axios.get('/user/12345');
}
function?getUserPermissions()?{
??return?this.$axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(),?getUserPermissions()])
??.then(this.$axios.spread(function?(acct,?perms)?{
????//兩個請求現(xiàn)已完成
??}));

1. 新建文件封裝axios

//引入axios
import?axios?from?'axios'

//通過promise?封裝
export?function?request(config){
????return?new?Promise((resolve,?reject)?=>?{

????????//創(chuàng)建axios實例
????????const?instance?=?axios.create({
????????????baseURL:'http://localhost:8080/api',
????????????timeout:5000
????????})

????????//發(fā)送請求
????????instance(config)
????????.then(res?=>?{
????????????resolve(res);
????????})
????????.catch(err?=>?{
????????????reject(err);
????????})
????})
}

1. 引用axios

import?{?request?}?from?'../../api/request'

request({
??????url:?'/showbanners/index',
??????method:?'get'
????})
??????.then((res)?=>?{
???????console.log(res)
??????})
??????.catch((err)?=>?{
????????console.log(err)
??????})

1. 添加攔截器

import?axios?from?'axios'

//通過promise封裝
export?function?request?(config)?{
??return?new?Promise((resolve,?reject)?=>?{

????//創(chuàng)建axios實例
????const?instance?=?axios.create({
??????baseURL:?'http://localhost:8080/api',
??????timeout:?5000
????})

????//?請求攔截
????instance.interceptors.request.use(config?=>?{
??????return?config
????},
????err?=>?{
??????console.log(err)
????})

????//?響應(yīng)攔截
????instance.interceptors.response.use(result?=>?{
??????console.log('攔截數(shù)據(jù)：=>',?result)
??????return?result
????},
????err?=>?{
??????console.log(err)
????})

????//發(fā)送請求
????instance(config)
??????.then(res?=>?{
????????resolve(res)
??????})
??????.catch(err?=>?{
????????reject(err)
??????})
??})
}