官网地址: http://axios-js.com/zh-cn/docs/index.html

1、安装 引用 注册

npm install axios --save

全局注册，在main.js中：

import axios from "axios";
Vue.prototype.$axios = axios
this.$axios

2、功能特点

• 在浏览器中发送XMLHttpRequests请求
• 在node.js中发送http请求
• 支持Promise API
• 拦截请求和响应
• 转换请求和响应数据

2.1 响应结果的结构

image.png

• config: 配置对象
• data : 响应体 服务器返回的内容
• header： 响应头部信息
• request: Ajax
• status: 响应值
• statusText:响应状态

3、写法

3.1 基础，自己第一次用axios时的记录：

image.png

image

3.2 不想url后面跟着一串，可以分开写：

image.png

3.3 axios并行发送请求

类似于Promise
axios.all([axios(), axios()]).then((results) => {});

• 返回的results会是数组类型：（顺序相互对应）

  
  
  image.png

• 单独将结果拿出来：

  
  
  image.png

3.4创建axios实例

可以创建多个实例

image.png

4、 模块封装（）

image.png

image.png

5、取消发送

问题:

数据渲染在一个dom上,点击按钮(快速切换),会导致前面没有完成的接口发送得到的数据 ,和现在接口发送得到的数据 堆叠

解决:

所以需要,将前面没有完成的接口

(一)封装好的API配置 步骤:

步骤1: 配置封装好的API

//在common_api.js文件中
//配置 终止请求
export function aireport_common_api(path, companyId, that) {
    let url = 'http://120.55.124.53:9942'
    url = url + path;
    let method = "post";
    let headers = {
        'Content-Type': 'application/json',
        'companyId': companyId
    }
    return Axios({
        url: url,
        method: method,
        headers: headers,
        cancelToken: new axios.CancelToken(function executor(c) {
            that.source = c
        })
    })
}

步骤2:定义一个方法

//在 引用 接口的文件 .vue中
  methods: {
    //取消未完成的请求
    cancelQuest() {
      if (typeof this.source === "function") {
        this.source("终止请求");
      }
    },
}

步骤3:在发送现在的接口请求之前,调用上面的方法,取消前面还在发送的请求

//在 引用 接口的文件 .vue中
       // 请求发送前调用
       this.cancelQuest();
      //调用接口,注意,这里的this
        aireport_common_api(path, companyId, this).then((Response) => {

(二)配置没有封装的API(没有使用过,网上记录):

Axios 使用 cancel token 取消请求
Axios的 cancel token API 基于cancelable promises proposal，它还处于第一阶段。
可以使用 CancelToken.source 工厂方法创建 cancel token，像这样：

var CancelToken = axios.CancelToken;
var source = CancelToken.source();

axios.get('/user/12345', {
 cancelToken: source.token
}).catch(function(thrown) {
 if (axios.isCancel(thrown)) {
  console.log('Request canceled', thrown.message);
 } else {
  // 处理错误
 }
});

// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');

2.还可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建 cancel token：

var CancelToken = axios.CancelToken;
var cancel;

axios.get('/user/12345', {
 cancelToken: new CancelToken(function executor(c) {
  // executor 函数接收一个 cancel 函数作为参数
  cancel = c;
 })
});

// 取消请求
cancel();

6、发送text格式

this.measurement 是变量

      let url = "http://36.26.85.213:8086/api/v2/query?org=th";
      let headers = {
        Authorization:
          "Token Z4s5lPSdXHs_zueTttAvcNQS9KyidZ-c4yOtiBaJltklkJWMk9EDla90idvh8kKkDp7eVIrRFoM5ByWB9AhFVA==",
        "Content-Type": "application/vnd.flux",
      };
      let data =
        'from(bucket: "tianheng")\n' +
        "|> range(start: -1h)\n" +
        // '|> filter(fn: (r) => r["_measurement"] == "sizing_10000012")\n' +
        '|> filter(fn: (r) => r["_measurement"] == ' +"\""+this.measurement+"\"" +
        ")\n" +
        '|> filter(fn: (r) => r["machine_id"] == "sj0103")\n' +
        '|> filter(fn: (r) => r["_field"] == "current_speed")\n' +
        "|> limit(n: 100)\n" +
        "|> timeShift(duration: 8h)\n";
      axios({
        url: url,
        method: "post",
        headers: headers,
        data: data,
      }).then((res) => {
        console.log(res);
      }）

7、拦截器（重要）还需要仔细看看

6.1请求拦截

• 请求成功
• 请求失败

1. 什么时候用请求拦截器:
   - 比如一些信息不符合服务器的要求
   - 比如每次发送网络请求时，都希望在界面中显示一个请求的图标
   - 比如 某些网络请求（登录（token），必须携带一些特殊的信息

6.2响应拦截

• 响应成功
• 响应失败