摘要:由服務器提供的響應來自服務器響應的狀態碼來自服務器響應的狀態信息服務器響應的頭是為請求提供的配置信息所以請求返回后,我們可以通過來獲取響應情況。攔截器攔截器攔截器用于攔截發起的請求或用于攔截返回的響應。
目錄
首發日期:2019-01-29
作者:http://www.cnblogs.com/progor/
修改:
2019-02-11:發現發起請求的封裝中的export default 寫錯了,是export,在后面的代碼是使用了export ,但有一個地方使用了export default
------------
網上有很多vue的第三方組件庫,為了簡化開發,我們通常都會使用第三方的組件庫。
下面以導入element UI 組件庫為例:
首先,安裝element UI模塊,并把依賴添加到package.json中:
npm install element-ui --save
然后,如果你是要在整個項目中都用到element UI的話,那就在main.js中添加下列代碼,這樣就可以在所有的組件中使用elmenent UI中的所有組件了:
import ElementUI from "element-ui"
import "element-ui/lib/theme-chalk/index.css"
Vue.use(ElementUI)
如果你僅僅想使用某個組件的話,可以僅僅在某個組件中使用import來導入element UI的組件。
我們搭建了一個頁面后,通常都希望從后端接口獲取數據來渲染頁面?,F在推薦的發起請求的方式是使用axios來發起請求。
首先,我們要安裝axios
npm install axios
然后在組件中使用axios來發請求:
接受到的數據:{{msg}}
上面只演示了axios.get,類似的,還有axios.post,axios.put等等請求方法。
如果請求失敗了,那么不會跳到then,而是交給catch來處理,catch里面的第一個參數就是錯誤信息:
axios
.get("https://api.coindesk.com/v1/bpi/currentprice.json")
.then(response => (this.info = response.data.bpi))
.catch(error => console.log(error))
axios.get("https://api.coindesk.com/v1/bpi/currentprice.json",{params: {ID: 12345}})
.then(response => {
this.msg = response
})
axios.post("/user", {firstName: "Fred", lastName: "Flintstone"})
.then((response) => {
console.log(response)
})
.catch((error) => {
console.log(error)
})
在上面的例子中,我們可以看到如果我們想要發送請求,將要在axios.xxx()的參數中寫很長的代碼。該怎么優化呢?
其實也可以使用axios()來發起請求,axios里面的參數是關于請求的配置,例如:
var request = {
method: "post",
url: "/user",
data: {firstName: "Fred", lastName: "Flintstone"}
}
axios(request).then(response => (this.msg = response))
.catch(error => {
console.log(error)
})
貼一下可以設置的配置:
{
// `url` 是用于請求的服務器 URL
url: "/user",
// `method` 是創建請求時使用的方法
method: "get", // 默認是 get
// `baseURL` 將自動加在 `url` 前面,除非 `url` 是一個絕對 URL。
// 它可以通過設置一個 `baseURL` 便于為 axios 實例的方法傳遞相對 URL
baseURL: "https://some-domain.com/api/",
// `transformRequest` 允許在向服務器發送前,修改請求數據
// 只能用在 "PUT", "POST" 和 "PATCH" 這幾個請求方法
// 后面數組中的函數必須返回一個字符串,或 ArrayBuffer,或 Stream
transformRequest: [function (data) {
// 對 data 進行任意轉換處理
return data;
}],
// `transformResponse` 在傳遞給 then/catch 前,允許修改響應數據
transformResponse: [function (data) {
// 對 data 進行任意轉換處理
return data;
}],
// `headers` 是即將被發送的自定義請求頭
headers: {"X-Requested-With": "XMLHttpRequest"},
// `params` 是即將與請求一起發送的 URL 參數
// 必須是一個無格式對象(plain object)或 URLSearchParams 對象
params: {
ID: 12345
},
// `paramsSerializer` 是一個負責 `params` 序列化的函數
// (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
paramsSerializer: function(params) {
return Qs.stringify(params, {arrayFormat: "brackets"})
},
// `data` 是作為請求主體被發送的數據
// 只適用于這些請求方法 "PUT", "POST", 和 "PATCH"
// 在沒有設置 `transformRequest` 時,必須是以下類型之一:
// - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
// - 瀏覽器專屬:FormData, File, Blob
// - Node 專屬: Stream
data: {
firstName: "Fred"
},
// `timeout` 指定請求超時的毫秒數(0 表示無超時時間)
// 如果請求話費了超過 `timeout` 的時間,請求將被中斷
timeout: 1000,
// `withCredentials` 表示跨域請求時是否需要使用憑證
withCredentials: false, // 默認的
// `adapter` 允許自定義處理請求,以使測試更輕松
// 返回一個 promise 并應用一個有效的響應 (查閱 [response docs](#response-api)).
adapter: function (config) {
/* ... */
},
// `auth` 表示應該使用 HTTP 基礎驗證,并提供憑據
// 這將設置一個 `Authorization` 頭,覆寫掉現有的任意使用 `headers` 設置的自定義 `Authorization`頭
auth: {
username: "janedoe",
password: "s00pers3cret"
},
// `responseType` 表示服務器響應的數據類型,可以是 "arraybuffer", "blob", "document", "json", "text", "stream"
responseType: "json", // 默認的
// `xsrfCookieName` 是用作 xsrf token 的值的cookie的名稱
xsrfCookieName: "XSRF-TOKEN", // default
// `xsrfHeaderName` 是承載 xsrf token 的值的 HTTP 頭的名稱
xsrfHeaderName: "X-XSRF-TOKEN", // 默認的
// `onUploadProgress` 允許為上傳處理進度事件
onUploadProgress: function (progressEvent) {
// 對原生進度事件的處理
},
// `onDownloadProgress` 允許為下載處理進度事件
onDownloadProgress: function (progressEvent) {
// 對原生進度事件的處理
},
// `maxContentLength` 定義允許的響應內容的最大尺寸
maxContentLength: 2000,
// `validateStatus` 定義對于給定的HTTP 響應狀態碼是 resolve 或 reject promise 。如果 `validateStatus` 返回 `true` (或者設置為 `null` 或 `undefined`),promise 將被 resolve; 否則,promise 將被 rejecte
validateStatus: function (status) {
return status >= 200 && status < 300; // 默認的
},
// `maxRedirects` 定義在 node.js 中 follow 的最大重定向數目
// 如果設置為0,將不會 follow 任何重定向
maxRedirects: 5, // 默認的
// `httpAgent` 和 `httpsAgent` 分別在 node.js 中用于定義在執行 http 和 https 時使用的自定義代理。允許像這樣配置選項:
// `keepAlive` 默認沒有啟用
httpAgent: new http.Agent({ keepAlive: true }),
httpsAgent: new https.Agent({ keepAlive: true }),
// "proxy" 定義代理服務器的主機名稱和端口
// `auth` 表示 HTTP 基礎驗證應當用于連接代理,并提供憑據
// 這將會設置一個 `Proxy-Authorization` 頭,覆寫掉已有的通過使用 `header` 設置的自定義 `Proxy-Authorization` 頭。
proxy: {
host: "127.0.0.1",
port: 9000,
auth: : {
username: "mikeymike",
password: "rapunz3l"
}
},
// `cancelToken` 指定用于取消請求的 cancel token
// (查看后面的 Cancellation 這節了解更多)
cancelToken: new CancelToken(function (cancel) {
})
}
雖然使用了配置之后不用把參數都寫在axios.xxx()里面了,但是這樣好像每一次都要定義一個關于請求參數的配置。有些數據我是不想重新定義的,能不能再優化呢?我們可以使用axios實例提前來讀取一部分共用配置,然后后續再傳入的配置的會與先前的配置進行合并。
【下面以提前配置baseUrl,后面的配置傳入url為例,如果最終的請求是baseurl和url的拼接結果(通過監聽瀏覽器網絡請求得到),那么就說明配置合并成功】
var instance = axios.create({
baseURL: "https://www.baidu.com"
})
var request = {
method: "get",
url: "/s",
params: {wd: "vue"}
}
// 當傳入了url參數的時候,才會發起請求,所以雖然都是傳配置,但上面的那個并沒有發起請求
instance(request)
.then(response => {
console.log(response)
})
.catch(error => {
console.log(error)
})
像上面,我們都是直接調用axios來發起請求的,這可能會導致一些問題,例如在多個組件中都需要發起針對同一個url的請求的時候,如果按照上面直接axios來發起請求的話,那么就會造成代碼冗余(想象一下,針對同一個url請求,卻要在不同組件中都寫一個axios.xxx)。為了減少代碼冗余,我們通常都會進行代碼抽取,我們把重復的代碼都抽取到函數中。
上面的例子只是用作演示如何把發起請求的代碼抽取到函數中。事實上,上面的抽取并沒有完全抽取干凈,另一個組件中發起請求時,也要重新定義函數。所以我們要想辦法把上面的函數抽取到一個js文件中,抽取到js文件后,我們就可以通過import來導入了。
首先, 在src下,我們新建一個文件夾api,在api下,我們創建一個index.js【由于一般會有很多個api請求,為了分文件管理api,我們通常會根據api的功能來把發起請求的函數劃分到不同的文件中,所以我們可能有時候會創建類似user.js這樣命名的文件來存儲發起請求的函數。這里由于用于演示,所以命名為index.js】
然后,在index.js中添加下列代碼:
import axios from "axios"
const request = axios.create({
baseURL: "http://www.xxxx.com"
})
export function getUserList (params) {
return request({
url: "/getuserlist",
method: "get",
params: params
})
}
// 可以有多個export function xxxx
最后,在組件中導入getUserList這個函數,并發起請求:
【如果你有留心的話,你應該感覺到上面的axios對象應該也要進行抽取,因為如果有個js文件的話,會導致創建axios對象的這部分代碼贅余了,我們可以把這部分的代碼抽取到src/plugin/axios的index.js中】
import axios from "axios"
const request = axios.create({
baseURL: "http://www.xxxx.com"
})
export default request // 記得導出
不要忘了,api中也要對應修改:
請求響應后,響應的數據都會封裝到response中,其中response.data是服務器返回的響應信息,response.status是響應碼,具體如下。
{
// `data` 由服務器提供的響應
data: {},
// `status` 來自服務器響應的 HTTP 狀態碼
status: 200,
// `statusText` 來自服務器響應的 HTTP 狀態信息
statusText: "OK",
// `headers` 服務器響應的頭
headers: {},
// `config` 是為請求提供的配置信息
config: {}
}
所以請求返回后,我們可以通過response.xxx來獲取響應情況。
攔截器是基于axios實例來添加的。我們可以使用如下代碼來添加一個請求攔截器:
const request = axios.create({
baseURL: "https://www.xxxx.com"
})
request.interceptors.request.use((config) => { // config是請求的配置
// 這里寫在發送請求之前做些什么,我們這里嘗試加一個請求頭
config.headers["Access-Token"] = "123456"
console.log("發起請求了")
return config
}, (error) => {
// 這里寫對請求錯誤做些什么
return Promise.reject(error)
})
request.interceptors.response.use((response) => {
// 對響應數據做點什么
console.log("請求返回響應了" + response)
return response
}, (error) => {
// 對響應錯誤做點什么
return Promise.reject(error)
})
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/1252.html
摘要:前端日報精選了解中的全局對象和全局作用域張鑫旭鑫空間鑫生活子進程你應該知道的一切直出內存泄露問題的追查實踐我他喵的到底要怎樣才能在生產環境中用上模塊化騰訊前端大會大咖說大咖干貨,不再錯過發布發布中文翻譯在使用進行本地開發代碼 2017-07-07 前端日報 精選 了解JS中的全局對象window.self和全局作用域self ? 張鑫旭-鑫空間-鑫生活Node.js 子進程:你應該知道...
摘要:比如把示例中的數據在頁面中用顯示出來與輸入框的數據綁定表單輸入框有這個值,在表單輸入框里使用會把表單輸入框與實例的數據進行智能綁定為什么說智能,因為有些輸入框的數據是屬性,有些不是。目錄上篇內容回顧:數據綁定表單輸入框綁定單行文本輸入框多行文本輸入框復選框checkbox單選框radio選擇框select數據綁定的修飾符.lazy.number.trim樣式綁定class綁定對象語法:數組語...
摘要:如果我們作為一個后端開發者想掌握一個前端框架,是一個好選擇,因為它足夠的易學。是語言的下一代標準。數據方法生命周期鉤子函數其他有些內容比較重要,留到后面講定義數據定義數據定義了數據,那么就可以在管理的區域中使用的獲取數據的語法來獲取數據。目錄 前言: iview組件庫示例 element組件庫示例 ...
摘要:文件是當前項目的首頁文件。以后可能還會有全局注冊組件等操作。在上面使用了這是一個預定義的路徑,代表目錄。而為了使用好這個實例,不要修改的,不然裝載完內容后,對應的管理區域會指向不明,而導致渲染失敗。目錄 上節內容回顧: npm 介紹 安裝 常用命令: 補充: ...
閱讀 1181·2021-09-22 15:24
閱讀 2285·2019-08-30 15:44
閱讀 2615·2019-08-30 10:55
閱讀 3355·2019-08-29 13:25
閱讀 1639·2019-08-29 13:09
閱讀 1391·2019-08-26 14:05
閱讀 1379·2019-08-26 13:58
閱讀 1985·2019-08-26 11:57