axios
Ajax肛度、fetch傻唾、axios的區(qū)別與優(yōu)缺點
axios源碼深度剖析
axios內部的運作流程圖
axios內部的運作流程圖
一、直接用封裝好的vue-axios（我不推薦使用承耿，感覺還是有點難用）
安裝
npm install --save axios vue-axios
將下面代碼加入main.js入口文件:
import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'
Vue.prototype.$axios = axios //全局注冊冠骄，使用方法為:this.$axios
Vue.use(VueAxios, axios)
在頁面中使用它
<script>
export default{
data(){
return{
token："token"
}
},
created(){
this.$axios({
method:'post',
url:'api',
data:{
//這里是發(fā)送給后臺的數(shù)據(jù)
token:this.token
}
}).then((response) =>{
console.log(response) //請求成功返回的數(shù)據(jù)
}).catch((error) =>{
console.log(error) //請求失敗返回的數(shù)據(jù)
})
}
}
</script>
二、自己封裝的axios
axios 是一個基于 Promise 的http請求庫, 它支持瀏覽器和node.js以及promise加袋，能攔截請求和響應凛辣，也能取消請求，而且可以自動轉換JSON數(shù)據(jù)职烧，瀏覽器端支持防止CSRF(跨站請求偽造)等等扁誓。
1、安裝
npm install axios; // 安裝axios
2蚀之、在項目目錄下引入axios
我通常習慣在src根目錄下創(chuàng)建一個request文件夾（這是當時做后臺管理系統(tǒng)的時候學來的）蝗敢，在request文件夾里創(chuàng)建api.js用來管理封裝接口，創(chuàng)建axios.js用來封裝axios足删。到時候隨著后臺接口的增多和模塊化寿谴，可以根據(jù)不同的模塊創(chuàng)建不同的js文件或者文件夾便于管理api。
src目錄下
- 下面是我總結的常用的一個
axios.js文件的封裝失受，注釋部分需要結合自身實際情況修改
1讶泰、baseURL
2、請求攔截器拂到，例如請求的時候在頭部加上請求的token
3峻厚、響應攔截器，例如判斷狀態(tài)谆焊，過期清除token
import axios from 'axios';
// 讓請求在瀏覽器中允許跨域攜帶cookie
axios.defaults.withCredentials = true;
// 使用自定義配置新建一個 axios 實例
const service= axios.create({
// 基礎的請求地址
baseURL: 'https://some-domain.com/api/',
// 設置超時時間 5s
timeout: 5000
});
// 添加超時后的處理（axios中需要你根據(jù)error信息來進行判斷）
axios().catch(error => {
const { message } = error;
if (error.code === 'ECONNABORTED' && message.indexOf('timeout')> -1){
// 超時處理惠桃，可以直接彈出錯誤或者重新發(fā)起一次請求
alert("請求超時！請檢查網(wǎng)絡問題")；
// let newHttp= new Promise(function (resolve){
// resolve()
// })
// newHttp實例執(zhí)行完成后會再次執(zhí)行
// 返回一個promise實例辜王，同時重新發(fā)起請求劈狐，config請求配置，包擴請求頭和請求參數(shù)
// return newHttp.then(function (){
// return axios.create({baseURL: 'https://some-domain.com/api/',timeout: 5000});
// })
}
// 若不是超時,則返回未錯誤信息
return Promise.reject(error);
})
// 請求攔截器呐馆，例如請求的時候在頭部加上請求的token
service.interceptors.request.use(config => {
// if (localStorage.getItem('token')) {
// config.headers.ACCESS_TOKEN = localStorage.getItem('token');
// }
return config; // 有且必須有一個config對象被返回
}, error => {
// 對請求錯誤做些什么
console.log(error);
return Promise.reject();
});
// 響應攔截器,例如判斷服務器返回的狀態(tài)肥缔，400，500啥的汹来，其實超時可以寫到這里面來续膳，我分開寫了一個比較直觀
service.interceptors.response.use(
response => {
if (response.status === 200) {
return Promise.resolve(response.data);
} else {
return Promise.reject(response);
}
},
// 服務器狀態(tài)碼不是200的情況,這些自定義（需要與后臺商量返回）
error => {
if (
400 <= error.response.status <500
) {
alert("用戶信息過期，請重新登陸");
// 清除token
// localStorage.removeItem("token");
// 跳轉登錄
setTimeout(() => {
// window.location.href = "/login";
}, 1000);
} else {
if (error.response.status >= 500) {
alert("服務器開小差了收班，請稍后再試坟岔！");
} else {
alert("服務器開小差了，請稍后再試摔桦！");
return Promise.reject(error)
}
}
}
);
export default service;
- 下面是我
api.js接口文件的管理社付，需要結合自身實際情況修改
1、url ：請求接口的地址（就是baseURL后面的哪部分）
2邻耕、method：請求方法
3鸥咖、data：post請求中攜帶的數(shù)據(jù)（obj格式），params：get請求中攜帶的數(shù)據(jù)（就是在瀏覽器地址xx/xx/xx后面?XX=oo&XX=oo這部分數(shù)據(jù)兄世，obj格式）
4啼辣、傳過來的參數(shù)一定要在（query）=>{ }括號中引入，函數(shù)里面才能用
// 剛剛封裝的axios
import request from './axios';
// 1.獲取圖片驗證碼
export const getImgCode = () => {
return request({
url: '/image/code',
method: 'get',
// 圖片驗證碼 response類型設置成blob御滩，圖片才能顯示出來
responseType: "blob"
})
}
// 2.獲取手機驗證碼
export const getPhoneCode = (query) => {
return request({
url: '/user/messageCode',
method: 'post',
data: query
})
}
// 3. 獲取用戶任務列表
export const getUserTask = (query) => {
return request({
url: '/task/select',
method: 'get',
params: query
})
}
// 4. 搜索任務接口
export const queryTask = (query1, query2) => {
return request({
url: '/task/query',
method: 'post',
data: query1,
params: query2
})
}
- 在
xx.vue頁面中的實際操作
1鸥拧、<script>標簽頂部將剛剛封裝的api引入import { getImgCode, getUserTask } from "../request/api";
2、方法使用：getImgCode().then(res=>{}).catch(res=>{})
3艾恼、下面提供了登陸時候做圖片驗證碼的一個操作
<template>
<div>
<div class="code">
<img class="codeimg" :src="this.ImgCode" @click="getCode" alt />
<input type="text" name="驗證碼" placeholder="驗證碼" v-model="code" />
</div>
</div>
</template>
<script>
import { getImgCode, getUserTask } from "../request/api";
export default {
data() {
return { ImgCode: "", phone: "", password: "", code: "" };
},
mounted() {
// 初始化頁面之前獲取圖片驗證碼的接口住涉，無需定義方法直接請求
getImgCode()
.then(res => {
let blob = new Blob([res], { type: "image/jpeg" });
let url = URL.createObjectURL(blob);
this.ImgCode = url;
})
.catch(res => {
alert("網(wǎng)絡開小差了，沒有獲取到圖片驗證碼哦");
});
},
methods: {
// 先定義一個方法 getCode钠绍，供上面引用舆声，
getCode() {
// 傳得參數(shù)對象
let query = {
a:this.phone,
b:this.password
}
// 請求剛剛引入的封裝的接口
getUserTask (query)
.then(res => {
// 成功之后的操作
})
.catch(res => {
// 失敗時候的操作
});
}
}
};
</script>
<style scoped>
</style>
三、使用總結
- 封裝axios供之后引用柳爽，將
baseURL,請求攔截器,響應攔截器結合實際情況與vuex一起封裝 - 在封裝api接口文件中引用剛剛封裝的axios媳握，把
接口url和請求方法method和參數(shù)（data/params）定義到每個接口函數(shù)中并暴露出來 - 在后綴為
.vue的文件中引入api接口文件中需要的接口import { getImgCode, getUserTask } from "../request/api"; - 在需要的地方使用
getImgCode().then(res=>{}).catch(res=>{})
四、axios優(yōu)點（特性）
Axios 是一個基于 promise 的 HTTP 庫磷脯，可以用在瀏覽器和 node.js 中蛾找。
1. 從瀏覽器中創(chuàng)建 XMLHttpRequests
2. 從 node.js 創(chuàng)建 http 請求
3. 支持 Promise API
4. 攔截請求和響應
5. 轉換請求數(shù)據(jù)和響應數(shù)據(jù)
6. 取消請求
7. 自動轉換 JSON 數(shù)據(jù)
8. 客戶端支持防御 XSRF
9. 瀏覽器支持
瀏覽器支持
五、源碼分析
上面那篇文章Axios源碼深度剖析已經(jīng)很詳細赵誓，我想談談我的看法打毛。
TODO
