Vue.js 实现服务器API接口请求教程

"该文档是关于使用Vue.js框架实现向服务器端API接口发起请求的示例，涵盖了POST、GET、PATCH、PUT等常见HTTP方法的封装和应用。文档通过引入axios库来处理网络请求，并设置超时时间、基础URL以及自定义请求头，特别是对于登录状态的验证和错误处理进行了详细说明。" 在Vue.js开发中，与服务器端API的交互是必不可少的部分。本示例主要讲解如何使用axios库来实现这一功能。axios是一款广泛使用的JavaScript库，支持浏览器和node.js环境，用于发起HTTP请求。 首先，引入axios库和项目中的路由管理器（router）： ```javascript import axios from 'axios' import router from '@/router' ``` 接着，设置axios的默认配置，如超时时间和基础URL： ```javascript axios.defaults.timeout = 3000 axios.defaults.baseURL = '' ``` 然后，配置axios的请求拦截器。请求拦截器允许我们在请求发送前进行预处理，例如添加自定义的请求头。在这个例子中，设置了`Content-Type`为`application/json;charset=utf-8`： ```javascript axios.interceptors.request.use(config => { // ... config.headers['Content-Type'] = 'application/json;charset=utf-8' // ... return config }, error => { return Promise.reject(error) }) ``` 此外，根据不同的URL和用户登录状态，可以调整请求参数。例如，在非登录接口情况下，如果用户已登录，将用户的授权信息添加到请求头： ```javascript if (config.url !== '/api/login/index') { if (localStorage.getItem('Authorization')) { config.headers.Authorization = localStorage.getItem('Authorization') } } ``` 响应拦截器处理服务端返回的数据。如果返回的状态码表示成功（比如代码为0），则可能需要根据业务逻辑进行跳转；如果发生错误，如401未授权，可以清除存储的授权信息并重定向到登录页面： ```javascript axios.interceptors.response.use(response => { // ... if (response.data.code === 0) { router.push({ path: '/', query: { redirect: router.currentRoute.fullPath } }) } return response }, error => { if (error.response) { switch (error.response.status) { case 401: localStorage.removeItem('Authorization') router.push('/login') break // 其他错误处理... } } return Promise.reject(error) }) ``` 最后，封装GET方法，便于在组件中调用API： ```javascript / * 封装get方法 * @param url 接口地址 * @param params 请求参数 */ export function get(url, params) { return axios.get(url, { params }) } ``` 通过这种方式，Vue项目可以便捷地与后端API进行数据交互，同时确保了请求的统一性和错误处理的规范性。开发者可以根据实际需求对这些示例进行扩展和定制，以适应不同场景的应用。