vue_axios详解
axios是一個基于promise的HTTP庫，Chrome、Firefox、Safari、Opera、Edge、IE8+都支持
目錄
1.API
2.config配置對象
3.方法別名
4.配置默認值
5.全局配置
6.實例配置
7.請求配置
8.并發
9.攔截器
1）請求攔截器
2）響應攔截器
3）移除攔截器
4）為axios實例添加攔截器
10.取消請求
11.錯誤處理
12.axios預檢
1.API
- axios(config)
- axios(url,[config])
2.config配置對象
axios({method:'get', //post、get、put……baseURL:'', //請求的域名，基本地址url: '', //請求的路徑params:{}, //會將請求的參數拼接在url上data:{}, //會將請求的參數放在請求體中header:{}, //設置請求頭，例如設置token等timeout:1000, //設置請求超時時長，單位：ms })3.方法別名
為方便起見，為所有支持的請求方法提供了別名
- axios.request(config)
- axios.get(url,[config])
- axios.post(url,[data],[config])
- axios.delete(url,[config])
- axios.head(url,[config])
- axios.put(url,[data],[config])
- axios.patch(url,[data],[config])
- axios.options(url,[config])
【例】下面用post和put方法發送ajax請求
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><link rel="stylesheet" href="./index.css"><script src="./vue.js"></script><script src="./axios.js"></script> </head> <body><div id="app"><div class="username"><input type="text" placeholder="用戶名" v-model='name'></div><div class="mail"><input type="text" placeholder="郵箱" v-model='mail'></div><div class="upload-btn" @click='upload'>上傳</div><div class="show-btn" @click='show'>顯示人物信息</div><ul class="person-list" v-for='person in personList'><li class="person"><span>{{ person.name }}</span><span>{{ person.mail }}</span></li></ul></div> </body> <script>const vm = new Vue({el: '#app',data: {name: '',mail: '',personList: []},methods: {upload() {const { name, mail } = thisaxios.post('/setUserInfo', { name, mail }, {baseURL: 'https://developer.duyiedu.com/vue'}).then(res => {console.log(res)alert(res.data.msg)}).catch(error => {alert(error.data.msg)})},show() {axios.get('/getUserInfo', {baseURL: 'https://developer.duyiedu.com/vue'}).then(res => {this.personList = res.data.data.slice(0, 10)})}}}) </script> </html>4.配置默認值
可以指定將被用在各個請求的配置默認值
5.全局配置
在實際項目中，很少用到全局配置
axios.defaults.baseURL = 'https://developer.duyiedu.com/vue'; axios.defaults.timeout = 1000;6.實例配置
可以使用自定義配置新建一個axios實例
const instance = axios.create({baseURL: 'https://developer.duyiedu.com/vue',timeout: 1000, })instance.get('/getUserInfo').then(res => {// ... })7.請求配置
const instance = axios.create(); instance.get('/getUserInfo', {timeout: 5000 })【注】配置的優先順序：全局<實例<請求
8.并發
同時進行多個請求，并統一處理返回值
- axios.all(iterable)
- axios.spread(callback)
9.攔截器
interceptors，在發起請求之前做一些處理，或者在響應回來之后做一些處理
1）請求攔截器
axios.interceptors.request.use(config=>{//在發送請求之前做些什么return config })2）響應攔截器
axios.interceptors.response.use(response => {//對響應數據做點什么 return response })3）移除攔截器
const interceptor = axios.interceptors.response.use(response => {return response }) axios.interceptors.response.eject(interceptor)4）為axios實例添加攔截器
const instance = axios.create(); instance.interceptors.request.use(config => {})10.取消請求
const source = axios.CancelToken; const source = CancelToken.source();axios.get('/getUserInfo', {cancelToken: source.token }).then(res => {console.log(res); }).catch(error => {if(axios.isCancel(error)) {// 取消請求console.log(error.message);} else {// 處理錯誤} })// 取消請求 參數 可選 source.cancel('取消請求');11.錯誤處理
request / response 是 error 的上下文，標志著請求發送 / 得到響應。在錯誤中，如果響應有值，則說明是響應時出現了錯誤；如果響應沒值，則說明是請求時出現了錯誤；在錯誤中，如果請求無值，則說明請求未發送出去，如取消請求。
在實際開發過程中，一般在攔截器中統一添加錯誤處理。請求攔截器中的錯誤，會當請求未成功發出時執行，但是要注意的是：取消請求后，請求攔截器的錯誤函數也不會執行，因為取消請求不會拋出異常，axios對其進行了單獨的處理。在更多的情況下，我們會在響應攔截器中處理錯誤。
12.axios預檢
當axios的請求為非簡單請求時，瀏覽器會進行預檢，及發送OPTIONS請求。請求到服務器，詢問是否允許跨域。如果響應中允許預檢中請求的跨域行為，則瀏覽器會進行真正的請求，否則會報405錯誤
總結
以上是生活随笔為你收集整理的vue_axios详解的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue_异步加载_vue-resourc
- 下一篇： Vue_template是什么