vue基于promise可以用于浏览器和node.js的网络请求库【axios封装-收藏版】

（一）Axios 是什么?

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

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

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

（二）Axios 的特性

1. 从浏览器创建​​XMLHttpRequests​​
2. 从​​node.js​​ 创建 http 请求
3. 支持​​Promise API​​
4. ​​拦截​​请求和响应
5. ​​转换请求​​​和​​响应​​数据
6. ​​取消​​请求
7. 自动转换​​JSON​​数据
8. 客户端支持防御​​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>

（八）数据请求成功