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

Posted 2022-10-12 水香木鱼

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue基于promise可以用于浏览器和node.js的网络请求库axios封装-收藏版相关的知识，希望对你有一定的参考价值。

🚀作者简介

主页：水香木鱼的博客

专栏：后台管理系统、项目优化
能量：🔋容量已消耗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>