🚀作者简介

主页：水香木鱼的博客

专栏：后台管理系统、项目优化
能量：🔋容量已消耗1%，自动充电中…

笺言：用博客记录每一次成长，书写五彩人生。

📒技术聊斋

axios官方文档

vue.config.js配置官方文档

（一）Axios 是什么?

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。

它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。

在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

（二）Axios 的特性

从浏览器创建 XMLHttpRequests
从 node.js 创建 http 请求
支持 Promise API
拦截请求和响应
转换请求和响应数据
取消请求
自动转换JSON数据
客户端支持防御XSRF

（三）Axios 的安装

Ⅰ、使用 npm

npm install axios --save

Ⅱ、使用 yarn

yarn add axios --save

Ⅲ、使用 jsDelivr CDN

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

Ⅳ、使用 unpkg CDN

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

（四）封装Axios 的utils工具【request.js】

在这里插入图片描述

src下创建utils 文件夹【全部代码见 👇 Ⅵ】

Ⅰ、导入axios

import axios from "axios";

Ⅱ、创建requests 函数

baseURL【接口地址】
timeout【访问超时的时间ms，超过这个时间即访问失败】

const requests = axios.create({
  baseURL: "",
  timeout: 50000,
});

Ⅲ、添加请求拦截器【request】

requests.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么，例如加入token
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

Ⅳ、添加响应拦截器【response】

requests.interceptors.response.use(
  function (response) {
    // 在接收响应时做些什么，例如跳转到登录页
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

Ⅴ、导出到外部环境使用

export default requests;

Ⅵ、全部代码

import axios from "axios";
const requests = axios.create({
  baseURL: "",
  timeout: 50000,
});

// 添加请求拦截器
requests.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么，例如加入token
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

requests.interceptors.response.use(
  function (response) {
    // 在接收响应时做些什么，例如跳转到登录页
    return response;
  },
  function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
  }
);

export default requests;

（五）封装Axios 的统一管理API

Ⅰ、src下创建`api`文件夹

在这里插入图片描述

Ⅱ、封装testApi【根据接口类型去进行封装】

url【地址】
methods【请求方式】get、post等

import requests from "../utils/request";
export const getTestList = () =>
  requests({ 
  url: "https://1xx.xx.xx.xx:xxxx/api/v1/data/dataSetApply/homePageList", 
  methods: "get" 
});

（六）Axios 的全局调用

在main.js 中注册

import * as API from '@/api'
Vue.prototype.$API = API;

（七）Axios 的页面内调用【优先选择】

推荐方式二

方式一：使用`beforeCreate`钩子函数

import * as API from '@/api'
 beforeCreate(){
    Vue.prototype.$API = API;
  },

方式二：使用`.then` `.catch`【常用】

<script>
import { getTestList } from "../api/testApi";
export default {
  data() {
    return {
      testList: [],
      traceIds: "",
    };
  },
  mounted() {
    this.handleListData();
  },
  methods: {
    handleListData() {
      // 列表数据
      getTestList()
        .then((res) => {
          const data = res.data.data;
          this.testList = data;
          console.log(this.testList, "测试数据");
        })
        .catch();
    },
  },
};
</script>

方式三：使用`async` `await` 【异步请求】

<script>
import { getTestList } from "../api/testApi";
export default {
  data() {
    return {
      testList: [],
    };
  },
  mounted() {
    this.handleListData();
  },
  methods: {
    async handleListData() {
       let result = await getTestList();
       if (result.status == 200) {
         const data = result.data.data;
         this.testList = data;
         console.log(this.testList, "测试数据");
       }
     },
  },
};
</script>