axios網路請求
1、安裝
cnpm install axios -s
2、在main.js中引入
import axios from 'axios'
3、在main.js中將axios掛載到vue的原型上(可選)
vue.prototype.$axios=axios
4、axios配置
axios(],
transformresponse: [function (data) ],
headers: , 自定義請求頭
params: ,
paramsserializer: function(params) ) 轉換成類似ids=1&ids=2&ids=3
return qs.stringify(params, ) 轉換成類似ids[0]=1&aids1]=2&ids[2]=3
return qs.stringify(params, ) 轉換成類似ids=1&ids=2&id=3
},data:,
data:'name=jeff&age=18', 會將請求體轉換成url引數形式,即表單形式
withcredentials: false, 跨域請求時是否需要使用憑證
adapter: function (config) ,
auth: ,
responsetype: 'json', 伺服器響應的資料型別,可以是 'arraybuffer', 'blob', 'document', 'json', 'text', 'stream'
responseencoding: 'utf8', 表示解碼響應時使用的編碼
伺服器返回結果時會返回唯一的標識,下次傳送請求得傳遞標識,檢測成功才會相應,避免響應其他客戶端傳送的請求
xsrfcookiename: 'xsrf-token', 跨域請求cookie的標識
xsrfheadername: 'x-xsrf-token', 跨域頭資訊設定
onuploadprogress: function (progressevent) ,
...},
maxcontentlength: 2000, 允許的響應內容的最大尺寸
maxredirects: 5, 定義在node.js中follow的最大重定向數目
validatestatus: function (status) ,
socketpath: null, 定義在node.js中使用的unix socket的路徑位置,如果使用了proxy**,優先使用socketpath;
httpagent: new http.agent(),`httpagent` 和 `httpsagent` 分別在 node.js 中用於定義在執行http和https時使用的自定義**,允許像這樣配置選項：
這將會設定乙個`proxy-authorization`頭,覆寫掉已有的通過使用`header`設定的自定義 `proxy-authorization` 頭。
proxy:
},canceltoken: new canceltoken(function (cancel) )
})4.5、axios全域性配置:
全域性axios配置:
所有的請求都會生效
axios.defaults.屬性='***x'
自定義例項配置:
const instance = axios.create();
instance.defaults.headers.common['authorization'] = auth_token;
5、axios例項
可用於建立不同網域名稱的請求
const instance=axios.create()
使用: 使用方式和axios的兩種方式相同
instance().then((res)=>)
instance.get('url',).then(res=>)
6、在元件函式中使用
(1)get請求:
axios.get("url",)
.then(res=>)
.catch(err=>)//錯誤捕捉
(2)get請求傳參:
方式一:在url後拼接引數
方式二:
axios.get('url',
}).then(res=>res.data)
.catch(err=>console.log(err))
axios(
}).then(res=>res.data)
(3)post請求
1、若被攔截,引入qs
import qs from 'qs' 將post的引數轉換成url?鍵值對的形式,否則會被攔截
因為post中的鍵值對會以物件形式新增
2、建立請求
axios.post(url,data引數,)
axios.post('url',qs.stringify(),).then(res=>).catch(err=>console.log(err))
或axios(或字串格式
})(4)當後台返回了狀態碼時
axios.get('url').then(
()=>{},
()=> 獲取錯誤情況下資料
)(5)並行請求
axios.all([axios請求1,axios請求2]).then((res)=>)
axios.all([axios請求1,axios請求2]).then(
axios.spread((res1,res2)=>)
)(6)axios返回流式內容(前端axios無法使用,import引入的,後端axios才行)
(1)node_modules中找到axios
(2)將lib/adapters/http.js中的內容全選複製到lib/adapters/xhr.js
axios().then(res=>)
axios().then(res=>)
})(7)axios***
***中的兩個方法引數和promise的.then的方法引數效果相同
多個請求***:後面的會先執行,因為兩個方法引數是被unshift插入執行的集合中
多個響應***:前面的會先執行,因為兩個方法引數是被push進入執行的集合中
(1)新增請求***
axios.interceptors.request.use(function (config) , function (error) );
(2)新增響應***
axios.interceptors.response.use(function (response) , function (error) );
(8)取消請求
const canceltoken = axios.canceltoken;
const source = canceltoken.source();
axios.get('/rl', )
}).catch(err=>
})方式一中斷請求:source.cancel('interrupt');
方式二中斷請求:變數('interrupt');
(9)多個請求只傳送一次,利用取消請求的特性
將取消請求的函式賦值給乙個變數,當資料返回時將變數修改為null,每次請求判斷變數是否為null,不是則取消
const canceltoken = axios.canceltoken;
let cont=null;
if(cont!==null)
axios.get('/rl', )
}).then(()=>)
main.js:
import vue from
'vue'
import axios from
'axios'
vue.config.productiontip =
false
vue.prototype.$axios=axios
/* eslint-disable no-new */
newvue(,
components:
, template:
})
網路請求axios的介紹
1.什麼是axios axios ajax i o system axios 是乙個網路請求的第三方框架。開發前端應用程式中需要用到伺服器上的文字 等資源，所以要向伺服器傳送網路請求獲取這些資源，然後在應用程式上對其進行效果展示。2.vue中傳送網路請求有非常多的方式,如何選擇 1 選擇一 傳統的a...
封裝axios網路請求模組
core.js import axios from axios const instance axios.create 請求來接 instance.interceptors.request.use function config return config function error instan...
vue基於axios封裝網路請求
封裝核心方法 url 請求引數 請求方式 請求成功或者失敗的處理 請求前請求後處理 網路模組需要提供的功能 匯入axios import axios from axios 匯入請求方法 import request from configrequest import configurl from c...