axios 攔截器

• 請求攔截器
  • 請求攔截器的作用是在請求發(fā)送前進(jìn)行一些操作
    • 例如在每個(gè)請求體里加上token，統(tǒng)一做了處理如果以后要改也非常容易
• 響應(yīng)攔截器
  • 響應(yīng)攔截器的作用是在接收到響應(yīng)后進(jìn)行一些操作
    • 例如在服務(wù)器返回登錄狀態(tài)失效，需要重新登錄的時(shí)候，跳轉(zhuǎn)到登錄頁

# 1. 請求攔截器 axios.interceptors.request.use(function(config) {console.log(config.url)# 1.1 任何請求都會(huì)經(jīng)過這一步 在發(fā)送請求之前做些什么 config.headers.mytoken = 'nihao';# 1.2 這里一定要return 否則配置不成功 return config;}, function(err){#1.3 對請求錯(cuò)誤做點(diǎn)什么 console.log(err)})#2. 響應(yīng)攔截器 axios.interceptors.response.use(function(res) {#2.1 在接收響應(yīng)做些什么 var data = res.data;return data;}, function(err){#2.2 對響應(yīng)錯(cuò)誤做點(diǎn)什么 console.log(err)})

axios 全局配置

# 配置公共的請求頭 axios.defaults.baseURL = 'https://api.example.com'; # 配置 超時(shí)時(shí)間 axios.defaults.timeout = 2500; # 配置公共的請求頭 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; # 配置公共的 post 的 Content-Type axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

**

axios基礎(chǔ)用法

• get和 delete請求傳遞參數(shù)
  • 通過傳統(tǒng)的url 以 ? 的形式傳遞參數(shù)
  • restful 形式傳遞參數(shù)
  • 通過params 形式傳遞參數(shù)
• post 和 put 請求傳遞參數(shù)
  • 通過選項(xiàng)傳遞參數(shù)
  • 通過 URLSearchParams 傳遞參數(shù)

# 1. 發(fā)送get 請求 axios.get('http://localhost:3000/adata').then(function(ret){ # 拿到 ret 是一個(gè)對象 所有的對象都存在 ret 的data 屬性里面// 注意data屬性是固定的用法，用于獲取后臺(tái)的實(shí)際數(shù)據(jù)// console.log(ret.data)console.log(ret)})# 2. get 請求傳遞參數(shù)# 2.1 通過傳統(tǒng)的url 以 ? 的形式傳遞參數(shù)axios.get('http://localhost:3000/axios?id=123').then(function(ret){console.log(ret.data)})# 2.2 restful 形式傳遞參數(shù) axios.get('http://localhost:3000/axios/123').then(function(ret){console.log(ret.data)})# 2.3 通過params 形式傳遞參數(shù) axios.get('http://localhost:3000/axios', {params: {id: 789}}).then(function(ret){console.log(ret.data)})#3 axios delete 請求傳參 傳參的形式和 get 請求一樣axios.delete('http://localhost:3000/axios', {params: {id: 111}}).then(function(ret){console.log(ret.data)})# 4 axios 的 post 請求# 4.1 通過選項(xiàng)傳遞參數(shù)axios.post('http://localhost:3000/axios', {uname: 'lisi',pwd: 123}).then(function(ret){console.log(ret.data)})# 4.2 通過 URLSearchParams 傳遞參數(shù) var params = new URLSearchParams();params.append('uname', 'zhangsan');params.append('pwd', '111');axios.post('http://localhost:3000/axios', params).then(function(ret){console.log(ret.data)})#5 axios put 請求傳參 和 post 請求一樣 axios.put('http://localhost:3000/axios/123', {uname: 'lisi',pwd: 123}).then(function(ret){console.log(ret.data)})

**

總結(jié)

以上是生活随笔為你收集整理的axios 最全 请求拦截器 响应拦截器 配置公共请求头 超时时间 以及get delete post put 四种请求传参方式的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。