前言
如今網(wǎng)頁中充斥著各種各樣的請求据沈，在幾年前哟沫，我還沒畢業(yè)的時候，我只知道ajax锌介，也一直在用JQ的$ajax發(fā)送請求嗜诀。畢業(yè)之后接觸到了axios，仿佛打開了新世界的大門孔祸。不得不說裹虫，這個插件把http請求封裝得非常好。先進(jìn)入正題融击，配置一個較為通用的axios請求類
思路
封裝一個類筑公，個性化實(shí)現(xiàn)請求
預(yù)備工作
代碼
import axios from 'axios'
import qs from 'qs'
class AxiosInterceptor {
constructor() {
this.client = this.getAxiosClient()
}
get(url = '', params = {}) {
const option = {
url,
params,
method: 'get'
}
return this.request(option)
}
post(url = '', data = {}, type = 'x-www-form-urlencoded') {
const option = {
url,
method: 'post',
headers: {
'Content-Type': 'application/x-www-urlencoded;charset=UTF-8'
}
}
if (type === 'json') { // json
option.headers['Content-Type'] = 'application/json;charset=UTF-8'
option.data = data
} else if (type === 'form-data') { // 文件
option.headers['Content-Type'] = 'multipart/form-data;charset=UTF-8'
const form = new FormData()
for (let key in data) {
let value = data[key]
form.append(key, value)
}
option.data = form
} else { // 表單
option.data = qs.stringify(data)
}
return this.request(option)
}
put(url = '', data = '') {
const option = {
url,
data,
headers: {
'Content-Type': ''
},
method: 'put'
}
return this.request(option)
}
delete(url = '', data = {}) {
const option = {
url,
data,
method: 'delete',
headers: {
'Content-Type': 'application/json'
}
}
return this.request(option)
}
getAxiosClient() {
let axiosClient = axios.create(this.axiosConfig)
// 在請求或響應(yīng)被 then 或 catch 處理前攔截它們。
// 響應(yīng)攔截器
axiosClient.interceptors.response.use(res => {
if (res.data === '') {
// return '文件上傳成功'
}
return Promise.resolve(res.data)
}, err => {
// 對錯誤進(jìn)行處理
return Promise.reject(err)
})
// 請求攔截器 （ 可以在這里配置token相關(guān)的攔截）
axiosClient.interceptors.request.use()
return axiosClient
}
axiosConfig = {
baseUrl: 'prefix', // 若請求url不是絕對路徑尊浪， 會把baseUrl添加到請求url前面
timeout: 10000, // 如果請求話費(fèi)了超過 `timeout` 的時間匣屡，請求將被中斷
}
request(option) {
return this.client.request(option)
}
}
至此， 一個大致通用的axios攔截器配置完成拇涤。
思考題 ??
Promise.resolve(data)
請問捣作，這句代碼的意義？
看官如果知道就最好了鹅士，如果不知道券躁，請看文末
總結(jié) ??
這里我沒有配置請求攔截器，因為我目前做的項目里面還沒有涉及到token掉盅。網(wǎng)上可以搜到很多相關(guān)配置也拜。
代碼是手巧的，因為公司內(nèi)網(wǎng)開發(fā)趾痘，項目代碼拿不到慢哈， 回到家里自己回想敲粗來的代碼，可能會有一些出入永票，應(yīng)該沒有大問題卵贱。
感謝閱讀滥沫！
思考題解答 ??
思路： 先在瀏覽器打印一下Promise.resolve(1)， 看看結(jié)果
promise
可以看到键俱，結(jié)果是一個Promise對象兰绣。并且繼承了 Promise的一些方法，我們可以用一下里面的方法编振。
var pm = Promise.resolve(1)
pm.then(res => {
console.log(res) // 1
})
看到這里缀辩，是不是發(fā)現(xiàn)跟咱們 new 一個 Promise對象的使用方法是一樣的？ ??
// 這里就是思考題的答案了
var pm = new Promise((resolve, reject)=>{
var data = 1
resolve(data)
})
pm.then(res=>{
console.log(res) // 1
})
?? 注意事項
使用了 Promise.reject 后党觅， 必須 catch 這個 reject
var pm = Promise.reject(1)
pm.catch(err=>{
...
})
題外話 ??
再說說雌澄，咱們平時都是new Promise()對象斋泄， 為啥直接 Promise.resolve() 也可以用呢杯瞻？
promise
原來 Promise這個構(gòu)造函數(shù)中就帶了一些方法， 比如 all炫掐，resolve魁莉，reject 等等
