vue3 axios

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

简介

Axios 是一个用于浏览器和Node的基于承诺的简单HTTP客户端。它提供了一个易于使用的库，占地面积小。它还有一个可扩展的接口和一些伟大的功能，如JSON数据的自动转换，以及客户端支持对XSRF的保护，等等。

在服务器端（Node），它依赖于本地Node.js HTTP模块，而在客户端（浏览器），它使用XMLHttpRequests。由于是同构的，Axios是少数几个在浏览器和服务器端都可以毫不费力地使用的库之一。

如果我们对Axios进行常规要求，我们会收到默认的实例。假设我们想添加一个自定义的配置，比如一秒钟的超时，这在const axios = require(‘axios’) 中是不容易实现的？

这就是Axios.create与Axios的常规 "require "相比的优势所在，尽管两者都会返回Axios的实例。通过Axios.create，我们可以设置一个类似于baseUrl 的配置，所有的调用都只需要HTTP调用的URI，而不用完整的URL。

安装

npm

npm install axios
1

bower

bower install axios
1

yarn

yarn add axios
1

CDN

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

使用

Axios.create本质上是一个创建Axios新实例的工厂。用 Axios.create 来使用 Axios 可以用自定义配置来创建一个新的Axios实例。用Axios.create创建的带有自定义配置的Axios实例有助于我们在该实例的所有调用中重复使用所提供的配置。

axios.create(config) 对axios请求进行二次封装

1. 根据指定配置创建一个新的 axios ,也就是每个axios 都有自己的配置
2. 新的 axios 只是没有 取消请求 和 批量请求 的方法，其它所有语法和 axios 一致
3. 为什么要这种语法？
   1. 需求，项目中有部分接口需要的配置与另一部分接口的配置不太一样
   2. 解决：创建2个新的 axios ，每个都有自己的配置，分别对应不同要求的接口请求中

1. src/utils/index.js

import axios from 'axios';

// 判断环境
const BASEURL = process.env.NODE_ENV === 'production' ? '' : '/devApi';
const service = axios.create({
   
  baseURL: BASEURL, 
  timeout: 1000, // 设置了在1000毫秒内请求数据 如果没有请求成功就执行错误函数
});
console.log(process.env.NODE_ENV, process.env.
1
2
3
4
5
6
7
8
9