色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

vue引入axios設置

洪振霞2年前8瀏覽0評論

axios 是一個基于 Promise 的 HTTP 請求庫,可以用于瀏覽器和 Node.js 中發送 XMLHttpRequest 和 http 請求,支持請求的取消、攔截、請求和響應數據的轉換等功能。在 Vue 項目中,可以使用 axios 進行網絡請求,獲取數據。在引入 axios 時可以對其進行設置從而方便統一管理請求和處理請求返回的數據。

下面是引入 axios 并設置 baseURL,headers 等常用配置的實例代碼:

import axios from 'axios'
const http = axios.create({
baseURL: 'http://localhost:3000/',
timeout: 5000,
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
export default http

上面的代碼中我們使用了 axios.create 創建了一個 axios 實例,并配置了 baseURL 和 headers,可以看到請求的 baseURL 是 'http://localhost:3000/',timeout 為 5000(即 5s),headers 設置了請求頭的 Content-Type 為 json 類型。

在 Vue 項目中,我們可以將 axios 實例引入到我們的 Vue 實例中,然后在組件中使用,這樣方便我們管理請求和處理請求返回的數據。下面是引入 axios 實例的代碼:

import Vue from 'vue'
import http from './http'
Vue.prototype.$http = http

上面的代碼中我們將 axios 實例命名為 http,然后在 Vue 原型上定義了 $http 屬性,將 http 實例綁定到 Vue 實例上,方便在組件中使用。我們可以在組件中通過 this.$http 方法來使用 http 實例進行網絡請求,如下所示:

export default {
name: 'ExampleComponent',
mounted() {
this.$http.get('/api/example').then(res =>{
console.log(res.data)
}).catch(error =>{
console.error(error)
})
}
}

在上面的代碼中,我們通過 this.$http.get 方法發送了一個 GET 請求,請求的路徑為 '/api/example',請求成功后,打印出了返回的數據,請求失敗則打印出錯誤信息。

除了使用 this.$http 方法進行請求外,我們還可以在 http 實例上定義攔截器,來統一處理請求和響應,如下所示:

http.interceptors.request.use(config =>{
// do something before request is sent
return config
}, error =>{
// do something with request error
return Promise.reject(error)
})
http.interceptors.response.use(response =>{
// do something with response data
return response
}, error =>{
// do something with response error
return Promise.reject(error)
})

在上面的代碼中,我們定義了兩個攔截器,一個是請求攔截器,一個是響應攔截器。在請求攔截器中,我們可以對請求進行處理,例如添加 token 頭部等,在響應攔截器中,我們可以對響應進行處理,例如統一處理錯誤信息,對響應進行格式化等等。

總之,通過引入 axios 并進行配置和定義攔截器,對 Vue 項目進行統一管理網絡請求并處理返回數據是非常方便和實用的。