1.axios简述与安装

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

安装：

npm install axios

2.请求地址的封装

在项目目录的src/untils文件夹下创建封装文件request.js

在request.js文件中编写以下代码

//调用axios
import axios from 'axios'

//create函数可以创造一个与axios作用相当的变量，其可绑定一个根路径，使请求该根路径得到复用性减少代码量
const request = axios.create({
    baseURL:'URL'
})

//共享创造的变量
export default request

axios.create可以创造多个像request一样的变量

const request1 = axios.create()
const request2 = axios.create()
const request3 = axios.create()

每一个变量绑定一个根路径，这样就可以大大提高axios的复用性，减少代码量

3.axios get请求使用方法

导入封装好的地址

import request from '@/untils/request.js'

创造一个get方法

data() {
    return {
      //查询参数
      Argument: 10,
      //接收数据的空数组
      ArrList: []
    };
  },
methods: {
    //接收数据方法
    async initList() {
      const { data: res } = await request.get("/URL", {
        //传递查询参数
        params: {
            param:Argument
        },
      //接收数据
      this.ArrList = res
    }
  }

因为使用axios向接口服务器发送请求数据的请求后，会将返回的数据进行包装一个壳，这时我们要使用{data:res}的方法在取到壳中真正的数据。

在vue的生命周期函数created()中触发该方法
```
created() {
    this.initArticleList();
  }
```

4.接口API的封装

在项目目录的src/api文件夹下创建封装文件xxxAPI.js

导入封装好的地址

import request from '@/untils/request.js'

在xxxAPI.js文件中编写以下代码

//parametar为形参
export const getListAPI = function (parameter) {
    return request.get("/URL", {
        params: {
            param:parameter
        },
    });
}

在aioxs请求的组件中导入封装的API接口
```
import { getListAPI } from "@/api/articleAPI.js"
```

创造一个get方法

data() {
    return {
      //查询参数
      Argument: 10,
      //接收数据的空数组
      ArrList: []
    };
  },
methods: {
    //接收数据方法
    async initList() {
      const { data: res } = await getArticleListAPI(this.Argument);
      //接收数据
      this.ArrList = res
    }
  }