uniapp requrst怎么设置公共头部「两种方法」

1. 为什么需要设置公共头部？

在进行网络请求时，我们通常需要在请求头中携带一些必要的信息，例如用户身份认证信息、设备信息等。而在一个项目中，多个接口都需要携带这些信息，这时候就可以将这些信息封装成公共头部，在每次请求时都自动携带。

这样做的好处有很多，首先是减少了代码冗余量，同时也提高了代码的可维护性和可读性，方便后期的维护和更新。

2. uniapp中设置公共请求头的方法

2.1 在interceptor中设置

在uniapp中，可以通过在拦截器中设置公共请求头。在请求前，会自动拦截请求，并将头部信息添加到请求头中。

代码实现：

uni.interceptors.request.use((config) => {
    //在请求头中添加公共信息
    config.header.Authorization = 'Bearer ' + localStorage.getItem('token');
    config.header['User-Agent'] = 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/16A366';
    return config;
});

如上所示，我们通过uni.interceptors.request.use()设置了一个拦截器，在请求中加入了两个头部信息：用户token信息和User-Agent。

其中，Authorization是我们在进行用户认证时获取到的token信息，用于确定用户身份，具体内容根据具体项目实现；User-Agent是用于确定请求的来源设备，不同设备可能在显示页面时需要使用不同的css文件。

2.2 在vuex中设置

uniapp中使用vuex进行状态管理，我们也可以在vuex的state中设置公共请求头。使用这种方式，我们可以将头部信息存储在vuex中，方便在多个组件中读取。

代码实现：

//在store.js中设置全局请求头
const store = new Vuex.Store({
    state: {
        requestHeader: {
            'Authorization': 'Bearer ' + localStorage.getItem('token'),
            'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/16A366',
        }
    },
    //...
})
//在页面中获取全局请求头
<script>
    import {mapState} from 'vuex';
    export default {
        computed: {
            ...mapState({
                requestHeader: state => state.requestHeader,
            })
        },
        //...
    }
</script>

如上所示，我们可以在store.js中设置全局请求头，并在state中存储头部信息。在需要使用头部信息的页面中，通过mapState获取state中的requestHeader。

3. 公共请求头的使用

在设置完公共请求头以后，我们需要在每次请求中携带头部信息，这里提供两种方法：

3.1 在axios中使用

uniapp中可以使用axios进行网络请求，我们可以在发送请求时添加头部信息。

代码实现：

import axios from 'axios';
//...
axios.post('/api/login', {
    //...
}, {
    headers: {
        'Authorization': 'Bearer ' + localStorage.getItem('token'),
        'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/16A366',
    }
}).then(res => {
    //处理响应
    console.log(res);
})

如上所示，在使用axios进行网络请求时，我们可以通过传入第三个参数的headers选项，在请求头中设置头部信息。

3.2 在uni.request中使用

uniapp也提供了自己的网络请求方法uni.request，在发送请求时也可以添加头部信息。

代码实现：

uni.request({
    url: '/api/login',
    method: 'POST',
    data: {
        //...
    },
    header: {
        'Authorization': 'Bearer ' + localStorage.getItem('token'),
        'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 12_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/16A366',
    },
    success(res) {
        //处理响应
        console.log(res);
    }
})

如上所示，在使用uni.request进行网络请求时，我们可以在options中设置header选项，在请求头中设置头部信息。

总结

在进行uniapp项目开发时，设置公共请求头是非常重要的一步，可以提高代码的实现效率，也可以提高代码的可维护性和可读性。在本文中，我们介绍了两种设置公共请求头的方法，并对每种方法进行了详细的代码实现说明，希望对您有所帮助。