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

bower

bower install axios

yarn

yarn add axios

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>

使用

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.BASE_URL);

// 请求拦截：每一次发请求都要做的逻辑
service.interceptors.request.use(req => {
  // 每次请求都要作的逻辑
  return req;
}, function (error) {
  return Promise.reject(error)
});

// 响应拦截：每一次响应都要做的逻辑，在响应拦截中执行
service.interceptors.response.use(function (res) {
  // 每次响应都要做的逻辑
  // 统一打印数据
  console.group('本次请求地址是：' + res.config.url);
  console.log(res);
  console.groupEnd();
  return res;
}, function (error) {
  return Promise.reject(error);
});

export default service;

2. src/api/index.js

import service from '@/utils'

// 获取首页新闻
export function getSynew(params = {}) {
    return service.request({
        method: 'get',
        url: '/synew',
        params
        // params: params 左边的params是变量名（key）后台接收机的，右边的params是接收的参数
    })
}
// 可以简写为
// export function getSynew() {
//     return request.get('/api/synew')
// }

// 获取新闻详情
export function getNewDetail(id) {
    return service.request({
        method: 'get',
        url: `/new/${id}`,
    })
}

3. 配置跨域（src/vue.config.js）

devServer: {
  // 代理
  proxy: {
    "/api": { // '/api/' 等同于 target 中的地址
      // 跨域的服务器地址
      target: "替换为自己的地址",
      // 是否允许跨域
      changeOrigin: true,
      pathRewrite: {
        // 正则--遇到有devApi开头替换成空---需要重写的路径
        "^/api": "", // ^/api 做替换
      },
    },
  }
},

// 第三方插件配置
pluginOptions: {}

4. 组件中

index.vue

import { onMounted } from "vue";
import { getSynew } from '@/api'
export default {
  name: 'Index',
  setup() {
    onMounted(() => {
      reqSynew();
    })

    // 获取新闻列表
    function reqSynew() {
      getSynew().then(res => {
        console.log(res);
        // 数据处理...
      })
    }

    return {
      reqSynew
    };
  },
};

new.vue

import { onMounted} from 'vue'
import { useRoute } from 'vue-router'
import { getNewDetail } from '@/http/api'
export default {
  name: 'New',
  setup() {
    const initData = reactive({
      newsList: []，
    })

	const route = useRoute()
    // 初始化数据
    const reqNewDetail = (() => {
      getNewDetail(route.params.id).then(res => {
        initData.newsList = res.data[0]
        initData.title = (initData.newsList[0].iscompanynews == 1 ? '公司新闻' : '行业资讯')
      })
    })

    onMounted(() => {
      reqNewDetail();
    })
    
    return { reqNewDetail }
  }
};