听起来吓人的---axios的封装

what？前提：axios是什么？

axios 是一个基于 promise 的 HTTP 库

axios特性

1、可以在浏览器中发送 XMLHttpRequests

2、可以在 node.js 发送 http 请求

3、支持 Promise API

4、拦截请求和响应

5、转换请求数据和响应数据

6、能够取消请求

7、自动转换 JSON 数据

8、客户端支持保护安全免受 XSRF 攻击

why？前提：为什么要进行axios封装？

因为 开发环境、测试环境、生产环境的域名不同，封装后根据环境不同，域名可以配置，后面请求地址不改变，即可完成请求

how？封装具体操作：

1.在src目录下面新建一个utils文件夹，在文件夹下创建一个文件，命名为ajax（任意名字都可以）并写入如下内容：

import axios from "axios";

const instance = axios.create({
    baseURL: 'http://localhost:8080/api/',
    timeout: 5000
})

// 请求拦截
// 所有的网络请求都会先走这个方法，我们可以在它里面添加一些自定义内容
instance.interceptors.request.use(function (config) {
    console.group('全局请求拦截');
    console.log(config);
    console.groupEnd();
    config.headers.token = '111111';
    return config;
}, function (err) {
    return Promise.reject(err);
});

// 响应拦截
// 所有的网络请求返回数据之后都会先执行此方法
// 此处可以根据服务器的返回状态码作相应的数据 404 401 500
instance.interceptors.response.use(function (response) {
    console.group('全局响应拦截');
    console.log(response);
     // 请求超时 返回登录
    if (data.retCode == '-100')         
        removeToken();
        localStorage.clear();
        router.push('/login');
                    }
    return response;
}, function (err) {
    return Promise.reject(err);
});


export function get(url, params) {
    return instance.get(url, { params });

}

export function post(url, data) {
    return instance.post(url, data);
}

export function del(url, data) {
    return instance.delete(url, data);
}

export function put(url, data) {
    return instance.put(url, data)
}

2.在页面如何引用呢？

比如我在首页引入

import * as Api from "../utils/ajax";

  mounted() {
    this.queryUser();
  }
  async queryUser() {
    await Api.get("/user")
      //then获取成功；response成功后的返回值（对象）
      .then((response) => {
        console.log(response);
        this.data1 = response.data.user;
      })
      //获取失败
      .catch((error) => {
        console.log(error);
        alert("网络错误，不能访问");
      });
  }