vue 使用 axios.js

### 如何在 Vue 中使用 Axios 发起 HTTP 请求 #### 安装 Axios 为了能够在 Vue 项目中利用 Axios 进行 HTTP 请求，首先需要安装 Axios。可以通过 npm 或者 yarn 来完成这一操作。 ```bash npm install axios vue-axios --save ``` 或者对于使用 `cnpm` 的开发者： ```bash cnpm install --save axios vue-axios -g ``` 一旦安装完毕，在项目的入口文件（通常是 main.js 文件）中引入并注册 Axios 插件[^4]。 ```javascript import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) ``` 这段代码使得可以在整个应用范围内访问到 `$http`, `this.axios` 或者 `Vue.axios`. #### 配置请求头 当准备向服务器发送请求时，可能需要设置自定义的请求头部信息。这可以确保服务器能够正确处理传入的数据格式或者其他必要的认证信息。例如，如果要发送 JSON 数据，则应该指定 `'Content-Type': 'application/json'` 头部字段[^5]。 ```javascript // 设置默认请求头 axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; ``` 也可以针对单次请求单独设定头部信息: ```javascript this.$axios.post('/api/user/login', JSON.stringify({ jobNumber: 'GL001', password: '123' }), { headers: { 'Content-Type': 'application/json', auth: '123' } }) .then((res) => { console.log(res); }); ``` 上述例子展示了如何通过传递第三个参数作为配置对象来为特定请求添加额外的头部信息. #### 发送 GET 请求 GET 方法用来获取资源。下面是一个简单的例子展示怎样发出一个 GET 请求，并打印返回的结果数据至控制台。 ```javascript Vue.axios.get('https://jsonplaceholder.typicode.com/posts/1') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.error(error); }); ``` 同样地，也支持链式调用 `.catch()` 来捕获任何可能出现的错误情况[^1]. #### 发送 POST 请求 POST 方法常用于提交表单或上传文件等场景。这里给出一段代码片段说明如何执行带有 body 参数的 POST 请求。 ```javascript const postData = { title: "foo", body: "bar", userId: 1, }; this.$http.post('https://jsonplaceholder.typicode.com/posts', postData) .then((response) => { console.log(response.status); // 输出状态码 console.log(response.statusText); // 输出状态消息 console.log(response.data); // 输出响应体中的数据 }).catch(err => { console.error(`Error occurred while posting data ${err}`); }); ``` 此段代码不仅包含了成功回调函数还加入了失败后的异常处理逻辑.