目录

axios简述与安装

axios get请求使用方法

请求地址的封装

接口API的封装

---

1.axios简述与安装

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

安装：

npm install axios

2.请求地址的封装

1. 在项目目录的src/untils文件夹下创建封装文件request.js
2. 在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请求使用方法

1. 导入封装好的地址

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

2. 创造一个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}的方法在取到壳中真正的数据。

3. 在vue的生命周期函数created()中触发该方法

   created() {
       this.initArticleList();
     }

4.接口API的封装

1. 在项目目录的src/api文件夹下创建封装文件xxxAPI.js
2. 导入封装好的地址

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

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

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

4. 在aioxs请求的组件中导入封装的API接口

   import { getListAPI } from "@/api/articleAPI.js"

5. 创造一个get方法

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

6. 剩余方法同上