【Vue】Axios详解

文章目录

• 1 Axios简介
• • 1.1 什么是Axios?
  • 1.2 Axios的特性
• 2 Axios的使用
• • 2.1 Axios的安装
  • 2.2 Axios的创建
  • • 2.2.1 Proxy配置代理
    • • 2.2.1.1 核心代码
      • 2.2.1.2 代码解释
      • 2.2.1.3 多个跨域
    • 2.2.2 Axios的二次封装
    • • 2.2.2.1 为什么要二次封装
      • 2.2.2.2 Axios实例化
      • • 2.2.2.2.1 引入
        • 2.2.2.2.2 创建axios
        • 2.2.2.2.3 配置请求拦截器
        • 2.2.2.2.4 配置响应拦截器
        • 2.2.2.2.5 暴露
        • 2.2.2.2.6 例子
  • 2.3 Axios的直接使用
  • • 2.3.1 get请求
    • • 2.3.1.1 无参
      • 2.3.1.2 有参
    • 2.3.2 Post请求
    • 2.3.3 通用（常用）
    • • 2.3.3.1 无参
      • 2.3.3.2 有参
    • 2.3.4 例子
  • 2.4 接口统一管理
  • • 2.4.1 接口统一管理的原因
    • 2.4.2 接口管理
    • • 2.4.2.1 新建一个index.js文件 放置接口，引入axios
      • 2.4.2.2 编写接口方法
      • 2.4.2.3 接口全局注册

1 Axios简介

1.1 什么是Axios?

Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。

1.2 Axios的特性

• 从浏览器创建 XMLHttpRequests

• 从 node.js 创建 http 请求

• 支持 Promise API

• 拦截请求和响应

• 转换请求和响应数据

• 取消请求

• 自动转换JSON数据

• 客户端支持防御XSRF

2 Axios的使用

2.1 Axios的安装

npm install axios

• 1

在控制台输入 npm install axios – 回车，当看到package-lock.json的packages里面有了axios，说明引入成功

2.2 Axios的创建

2.2.1 Proxy配置代理

官方文档传送门 https://cli.vuejs.org/zh/config/#devserver-proxy

2.2.1.1 核心代码

const { defineConfig } = require("@vue/cli-service") module.exports = defineConfig({ lintOnSave: false, transpileDependencies: true, devServer: { proxy: { '/api': { target: "http://localhost:9000", //需要跨域的目标地址 pathRewrite: { '^/api': '' },//将带有api的路径重写为'' ws: true,//用于支持WebSocket changeOrigin: true,//用于控制请求头的Host }, } } } )

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18

2.2.1.2 代码解释

‘/api’:当请求地址的前缀中有该字符串时会进行跨域操作，反之则在本地请求。

前缀如localhost:8080/api/student，这里的api就是前缀。

localhost:8080/student/api，这里的api就不是前缀，student是他的前缀

target：要跨域的地址，在上图即为localhsot:5001

pathRewrite：路径重写

404错误问题：

当本地服务器以/api/student的路径请求服务器的时候，代理服务器检测到’api’需要跨域，然后如实转发。所以到达5001端口的时候，会去api/Student找自己想要的资源，但是5001端口只有Student，所以会爆404错误

使用pathRewrite，会将访问地址中的该前缀替换为:后面的字符，这里是’'，所以到达5001的时候，会正确的访问Student找到自己想要的资源。

changeOrigin：用于控制请求头的Host

值为false，当在端口5001，询问这个请求从哪来的，请求会如实回答：8080。

值为true，当在端口5001，询问这个请求从哪来的，请求会撒谎：5001，你在哪我的回答就是哪。

2.2.1.3 多个跨域

如果需要多个跨域的话，只需要继续往下写即可。

2.2.2 Axios的二次封装

2.2.2.1 为什么要二次封装

请求拦截器、响应拦截器：请求拦截器可以在发送请求之前处理一些业务

当数据返回后，响应拦截器可以处理一些业务

2.2.2.2 Axios实例化

可以直接看2.2.2.2.6

2.2.2.2.1 引入

新建一个api文件，创建request.js 用于引入axios

2.2.2.2.2 创建axios

const requests = axios.create({ baseURL: '/api', timeout: 50000, });

• 1
• 2
• 3
• 4

• baseURL：追加一个前缀，如你需要访问的地址是localhost:9000/api/song/SongSheet在访问的时候，你只需要写成’localhost:9000/song/SongSheet’
• timeout:访问超时的时间ms，超过这个时间即为访问失败

2.2.2.2.3 配置请求拦截器

// 添加请求拦截器 requests.interceptors.request.use(function (config) { // 在发送请求之前做些什么，例如加入token return config; }, function (error) { // 对请求错误做些什么 return Promise.reject(error); });

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8

这里也解决了我困惑已久的一个问题：为什么以前返回的数据没有code，只有单纯的一个数据。

我一度以为要在后端写。

如果这里返回的是config，那么就会有data,status,statusText, headers等等，如果只是返回config.data，那么你看到的就只有data数据了。

2.2.2.2.4 配置响应拦截器

requests.interceptors.response.use(function (response) { // 在接收响应时做些什么，例如跳转到登录页 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });

• 1
• 2
• 3
• 4
• 5
• 6
• 7

2.2.2.2.5 暴露

如果不暴露是不能用的

export default requests;

• 1

2.2.2.2.6 例子

import axios from "axios"; const requests = axios.create({ baseURL: '/api', 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;

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24

2.3 Axios的直接使用

此处的requests 是2.2中axios.create()返回的值，使用前需要引入requests

2.3.1 get请求

2.3.1.1 无参

requests.get('url');

• 1

举例：如我想要访问的是localhost:9000/api/song/SongAllSheet

api在baseURL里面配置了，所以我只需要写成

requests.get('/song/SongAllSheet');

• 1

2.3.1.2 有参

/Opera/getPersonalOpera是URL，value是你参数的名字

requests.get(`/Opera/getPersonalOpera/${value}`);

• 1

2.3.2 Post请求

axios.post("url",{ params:{ name:'jok', age:'18' } })

• 1
• 2
• 3
• 4
• 5
• 6

2.3.3 通用（常用）

2.3.3.1 无参

get请求methods:后面为get，post则为post

requests({url:'/Opera/getPersonalOpera',methods:'get'})

• 1

2.3.3.2 有参

此处用的是``，英文下，Tab上面的那个键

requests({url:`/Opera/getPersonalOpera/${value}`,methods:'get'})

• 1

2.3.4 例子

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38
• 39
• 40
• 41
• 42
• 43
• 44
• 45

可以看到是成功拿到数据的

解决返回数据是Promise的情况

所以只需要在方法里面直接赋值即可

2.4 接口统一管理

2.4.1 接口统一管理的原因

对于较小的项目，使用时在撰写无伤大雅

对于一些比较大型项目，随意写接口，如果后端的接口稍有改动，那么维护起来非常的困难

所以把所有的接口放在一起，而且抽象成一个方法，这样使用起来不需要重复写，而且改动起来也比较方便

2.4.2 接口管理

2.4.2.1 新建一个index.js文件 放置接口，引入axios

import requests from "./request";

• 1

2.4.2.2 编写接口方法

原版

export const reqGetAllSongById = (value)=>{ return requests({url:`/Opera/getPersonalOpera/${value}`,methods:'get'}); } export const reqGetAllSong = ()=>{ return requests({url:'/Opera/getPersonalOpera',methods:'get'}); }

• 1
• 2
• 3
• 4
• 5
• 6

简写版

export const reqGetAllSong = ()=>requests({url:'/Opera/getPersonalOpera',methods:'get'}); export const reqGetAllSongByType = (value)=> requests({url:`/Opera/getPersonalOpera/${value}`,methods:'get'});

• 1
• 2

2.4.2.3 接口全局注册

这样虽然好管理了，但是如果使用的话，还需要一一引入。

在如上位置，写如下代码

import * as API from '@/api' beforeCreate(){ Vue.prototype.$API = API; },

• 1
• 2
• 3
• 4
• 5

使用之时，前缀加上this.$API便可正常使用

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35

访问成功