一、axios的引入
使用 pnpm add axios
二、使用axios
三、axios的使用方法补充
axios除了直接使用它实例上的方法，还可以通过配置的方式进行使用axios({})，传入一个对象，这个对象可以有如下属性：
-
url（字符串）: 请求的 URL。
-
method（字符串）: 请求的 HTTP 方法，例如
***\*'get'\****、***\*'post'\****等。 -
params（对象）: 请求的 URL 参数，会被添加到 URL 后面,Get请求参数。
-
data（对象）: 请求的数据，通常用于 POST 请求的请求体，post请求参数。
-
headers（对象）: 请求头，可以设置各种头信息，例如
'Content-Type'，Authorization'等。 -
timeout（数字）: 请求超时时间，单位是毫秒。
-
baseURL（字符串）: 将被添加到
url前面的基础 URL。
举个梨子：
import axios from 'axios';//引入axios
console.log(axios);
//axios({传入请求配置对象})
axios({
//url:'http://139.185.166.65:3001/api/axiostest'
url: '/api/testGet',// 单纯放接口地址
baseURL: 'http://139.183.166.65:3001',//可以把url里面的服务器地址这块单独配置
//method:'get','post','delete','put'(修改)
method: 'get',
params: { name: 'liyan' },//常用于get请求传参 地址栏参数
//data:{name:'liyan1'}// 常用于post请求传参 地址栏参数
headers: { token: 200000 },
timeout: 13000//超时时间,13秒后请求失败 默认是30000毫秒，30秒
})四、错误展示
如果如上使用axios，出现一个问题，有一些配置项，会被重复书写的情况，我们可以使用axios.create这个方法，来创建一个axios的实例，将配置项配置到实例里，这样，我们就可以不用每次都重复去写配置项了，而是每次请求直接使用这个axios创建的实例就ok。
//const instance = axios.create(统一化配置)//就是请求所有都有的对象
const instance = axios.create({
baseURL: 'http://139.186.166.35:3001',
timeout: 13000,
})
//对instance的使用，和axios一样的使用，只是节约那些配置项的重复代码
//instance.get(接口地址，请求配置对象)地址不是全部地址，是它的接口地址，
instance.get('/api/testGet?name=liyanjian').then((res) => {
console.log(res);
data.value = res.data.data
})
//post
instance({
url: '/api/testPost',
method: 'post',
data: { name: 'jianpan' }
}).then((res) => {
console.log("post请求");
postData.value = res.data.data
})
