一、axios在vue中的使用慕课笔记
Axios 是一个基于 Promise 的 HTTP 库，可用于浏览器和 Node.js，它是一种简单，易用且兼容性好的发起HTTP请求的方案。在Vue中使用Axios，可以轻松地发起请求，并且可以方便地将返回的数据渲染到页面上。
在Vue项目中使用Axios需要先进行安装，打开终端输入：
npm install axios --save
安装成功之后，我们可以在Vue组件中引入Axios：
import axios from 'axios'
我们可以通过Axios创建一个 HTTP 请求的实例，该实例可以通过设置全局参数，如请求头部，超时时间等等，以便我们在项目中统一处理这些参数。例如：
// 创建axios实例
const service = axios.create({
baseURL: 'https://api.example.com', // api 的 base_url
timeout: 5000, // 请求超时时间
headers: {
'Content-Type': 'application/json;charset=UTF-8'
}
})
二、在vue中怎么使用axios
使用Axios时，我们通常在Vue组件的 methods 生命周期中进行调用，这样我们可以在页面上发送HTTP请求并接收返回数据。例如：
methods: {
fetchData() {
axios.get('/api/data')
.then(response => { console.log(response) })
.catch(error => { console.log(error) })
}
}
在上面的方法中，我们使用get方法请求/api/data 这个URL，然后使用.then捕获成功响应，并使用.catch捕获错误响应。通过这种方式，我们可以方便地在Vue中使用Axios来发起HTTP请求，并处理返回的数据。
三、axios在vue中的使用选取
1.发送GET请求
使用Axios发送GET请求时，我们可以通过传递参数来指定请求的URL，例如：
axios.get('/api/data', { params: { id: 1 } })
.then(response => { console.log(response) })
.catch(error => { console.log(error) })
在上面的示例中，我们通过params传递了一个名为 id 的参数，该参数的值为1。Axios会将参数自动编码，并将其添加到请求的URL后面。
2.发送POST请求
使用Axios发送POST请求时，我们可以通过传递data参数来设置请求的数据，例如：
axios.post('/api/create', {
name: 'Tom',
age: 18
})
.then(response => { console.log(response) })
.catch(error => { console.log(error) })
在上面的示例中，我们通过传递一个对象作为第二个参数，将数据发送到了服务器，服务器会将该数据解析并进行操作。
3.设置请求头
我们可以通过Axios设置HTTP请求头，这在某些时候是非常有用的。例如：
axios({
method: 'get',
url: '/api/data',
headers: {'X-Requested-With': 'XMLHttpRequest'}
})
.then(response => { console.log(response) })
.catch(error => { console.log(error) })
在上面的示例中，我们在请求头中指定了一个 X-Requested-With 属性，以便服务器了解请求是由 Ajax 发送的。
4.设置请求超时时间
我们可以通过设置Axios实例的timeout属性来指定请求的超时时间。例如：
// 创建axios实例
const service = axios.create({
baseURL: 'https://api.example.com',
timeout: 5000 // 请求超时时间
})
在上面的示例中，我们将timeout属性设为5000毫秒，表示请求如果超过5秒还没有响应，则认为请求超时。
5.使用拦截器
Axios提供了拦截器的功能，拦截器可以在请求发送之前和响应之后对数据进行处理。例如：
//请求拦截器
axios.interceptors.request.use(config => {
//进行请求前处理
return config
}, error => {
//对请求错误处理
return Promise.reject(error)
})
//响应拦截器
axios.interceptors.response.use(response => {
//处理响应数据
return response
}, error => {
//对响应错误处理
return Promise.reject(error)
})
在上面的示例中，我们使用了请求拦截器和响应拦截器来处理请求和响应，这样我们可以方便地对请求和响应进行统一的处理。
总结
本文主要介绍了在Vue中使用Axios的使用方法。我们可以通过Axios方便地发起HTTP请求，并处理返回的数据。通过设置Axios实例的全局参数，我们可以统一处理请求头，超时时间等等。此外，Axios还提供了拦截器的功能，以便我们处理请求和响应。希望这篇文章可以帮助你更好地使用Vue和Axios进行开发。
