axios.create(config)
可以使用自定義配置新建一個(gè) axios 實(shí)例,對(duì)axios請(qǐng)求進(jìn)行二次封裝
- 根據(jù)指定配置創(chuàng)建一個(gè)新的 axios ,也就是每個(gè)axios 都有自己的配置
- 新的 axios 只是沒有 取消請(qǐng)求 和 批量請(qǐng)求 的方法庸队，其它所有語法都是一致
為什么要這種語法？
- 需求，項(xiàng)目中有部分接口需要的配置與另一部分接口的配置不太一樣
- 解決：創(chuàng)建2個(gè)新的 axios ，每個(gè)都有自己的配置，分別對(duì)應(yīng)不同要求的接口請(qǐng)求中
const instance = axios.create({
baseURL:"http://localhost:3000"
})
// 使用instance發(fā)請(qǐng)求
instance({
url:"/posts"
})
// 或
instance.get("/posts")
同時(shí)請(qǐng)求 多個(gè)端口號(hào)
const instance = axios.create({
baseURL:"http://localhost:3000"
})
const instance2 = axios.create({
baseURL:"http://localhost:4000"
})
// 同時(shí)請(qǐng)求 端口號(hào) 3000 4000
// 使用instance發(fā)請(qǐng)求
instance({
url:"/posts"
})
// 使用instance2發(fā)請(qǐng)求
instance2({
url:"/posts"
})
axios的處理鏈流程 攔截器
攔截器簡(jiǎn)單使用
// 添加請(qǐng)求攔截器
axios.interceptors.request.use(config=>{
// config 請(qǐng)求配置
// 可用于
// 發(fā)送網(wǎng)絡(luò)請(qǐng)求時(shí)，在界面顯示一個(gè)請(qǐng)求的同步動(dòng)畫
// 某些請(qǐng)求（比如登錄（token））必須攜帶一些特殊的信息
// 請(qǐng)求成功攔截
console.log("請(qǐng)求攔截器")
return config
},err=>{
// 請(qǐng)求失敗攔截
return Promise.reject(err)
})
// 添加響應(yīng)攔截器
axios.interceptors.response.use(res=>{
// res 響應(yīng)結(jié)果
// 響應(yīng)攔成功攔截
console.log("響應(yīng)攔截器")
return res
},err=>{
// 響應(yīng)攔失敗攔截
return Promise.reject(err)
})
console.log("開始請(qǐng)求")
axios.get("http://localhost:3000/posts")
.then(res=>{
console.log("res:",res)
console.log("請(qǐng)求結(jié)束")
})
多個(gè)攔截器,請(qǐng)求攔截器后添加先執(zhí)行
// 添加請(qǐng)求攔截器
axios.interceptors.request.use(config=>{
console.log("請(qǐng)求攔截器")
return config
},err=>{
return Promise.reject(err)
})
axios.interceptors.request.use(config=>{
console.log("請(qǐng)求攔截器--------2")
return config
},err=>{
return Promise.reject(err)
})
axios.interceptors.request.use(config=>{
console.log("請(qǐng)求攔截器--------3")
return config
},err=>{
return Promise.reject(err)
})
// 添加響應(yīng)攔截器
axios.interceptors.response.use(res=>{
console.log("響應(yīng)攔截器")
return res
},err=>{
return Promise.reject(err)
})
axios.interceptors.response.use(res=>{
console.log("響應(yīng)攔截器---------2")
return res
},err=>{
return Promise.reject(err)
})
axios.interceptors.response.use(res=>{
console.log("響應(yīng)攔截器----------3")
return res
},err=>{
return Promise.reject(err)
})
console.log("開始請(qǐng)求")
axios.get("http://localhost:3000/posts")
.then(res=>{
console.log("res:",res)
console.log("請(qǐng)求結(jié)束")
})
