axios的引入和基本使用

一、axios的引入

使用 pnpm add axios

二、使用axios

三、axios的使用方法补充

axios除了直接使用它实例上的方法，还可以通过配置的方式进行使用axios({})，传入一个对象，这个对象可以有如下属性：

1. url（字符串）: 请求的 URL。

2. method（字符串）: 请求的 HTTP 方法，例如 ***\*'get'\****、***\*'post'\****等。

3. params（对象）: 请求的 URL 参数，会被添加到 URL 后面,Get请求参数。

4. data（对象）: 请求的数据，通常用于 POST 请求的请求体，post请求参数。

5. headers（对象）: 请求头，可以设置各种头信息，例如'Content-Type'，Authorization'等。

6. timeout（数字）: 请求超时时间，单位是毫秒。

7. 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
})