vue 设置请求头部 前端老白
Vue.js 是一个流行的 JavaScript 框架,用于构建动态的单页应用。在使用 Vue.js 进行开发时,网络请求是必不可少的。请求 HTTP 接口时,我们有时需要设置请求头部,以指定请求方式、携带 Token 等信息。这篇文章将详细介绍在 Vue.js 中如何设置请求头部。
Vue 中如何发起请求
![Vue 中如何发起请求](/pic/Vue%20%E4%B8%AD%E5%A6%82%E4%BD%95%E5%8F%91%E8%B5%B7%E8%AF%B7%E6%B1%82.jpg)
// GET 请求
axios.get('/api/getUser')
.then(response =>{
console.log(response.data)
})
.catch(error =>{
console.log(error)
})
// POST 请求
axios.post('/api/login', {
username: 'myname',
password: 'mypassword'
})
.then(response =>{
console.log(response.data)
})
.catch(error =>{
console.log(error)
})
Vue.js 使用 Axios 发起网络请求的 API,使用方法类似 jQuery 的 Ajax 函数库。我们可以使用 GET、POST、PUT、DELETE 等方法发起请求,也可以设置请求参数、请求头等信息。
设置全局请求头部
![设置全局请求头部](/pic/%E8%AE%BE%E7%BD%AE%E5%85%A8%E5%B1%80%E8%AF%B7%E6%B1%82%E5%A4%B4%E9%83%A8.jpg)
// 在 main.js 中设置全局请求头部
import axios from 'axios'
axios.defaults.headers.common['Authorization'] = 'Bearer ' + token
new Vue({
// ...
})
将全局请求头部设置在 main.js 文件中,当应用程序启动时即会设置该请求头。我们可以通过 headers 属性来设置任意的请求头部,如 Authorization、Content-Type 等。在设置时需要注意,在 header 名称前加上 'common'。
设置局部请求头部
![设置局部请求头部](/pic/%E8%AE%BE%E7%BD%AE%E5%B1%80%E9%83%A8%E8%AF%B7%E6%B1%82%E5%A4%B4%E9%83%A8.jpg)
axios.get('/api/getUser', {
headers: {
'Authorization': 'Bearer ' + token,
'Content-Type': 'application/json'
}
})
在发起局部请求时,我们可以将请求头部单独设置在 headers 属性中。这种方式只会在当前请求中生效,不会影响全局请求。
动态设置请求头部
![动态设置请求头部](/pic/%E5%8A%A8%E6%80%81%E8%AE%BE%E7%BD%AE%E8%AF%B7%E6%B1%82%E5%A4%B4%E9%83%A8.jpg)
const config = {
headers: {
'Authorization': 'Bearer ' + token
}
}
axios.get('/api/getUser', config)
有时我们需要根据用户信息来动态设置请求头部,比如在用户登录后设置 Token。此时,我们可以将请求头部设置在一个对象中,然后将该对象作为参数传递给 API,即可在请求时动态设置请求头部。
总结
![总结](/pic/%E6%80%BB%E7%BB%93.jpg)
要设置网络请求的请求头部,在 Vue.js 应用中使用 Axios 库是非常方便的选择。我们可以通过设置全局、局部或动态请求头部的方式来满足不同的需求。