【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
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

1 Axios简介
1.1 什么是Axios?

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

1.2 Axios的特性

从浏览器创建 XMLHttpRequests

从 node.js 创建 http 请求

支持 Promise API

拦截请求和响应

转换请求和响应数据

取消请求

自动转换JSON数据

客户端支持防御XSRF
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2 Axios的使用
2.1 Axios的安装

npm install axios
1

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

image-20221008115743040

image-20221008115657962
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是他的前缀
1
2
3

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

pathRewrite：路径重写

404错误问题：

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

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

changeOrigin：用于控制请求头的Host

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

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

2.2.1.3 多个跨域

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

2.2.2 Axios的二次封装
2.2.2.1 为什么要二次封装

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

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

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,
});

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

2.2.2.2.3 配置请求拦截器

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

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

我一度以为要在后端写。

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

2.2.2.2.4 配置响应拦截器

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

2.2.2.2.5 暴露

如果不暴露是不能用的

export default requests;

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’);

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

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

requests.get(‘/song/SongAllSheet’);

2.3.1.2 有参

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

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

2.3.2 Post请求

axios.post(“url”,{
params:{
name:‘jok’,
age:‘18’
}
})

2.3.3 通用（常用）
2.3.3.1 无参

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

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

2.3.3.2 有参

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

requests({url:/Opera/getPersonalOpera/${value},methods:‘get’})

2.3.4 例子

<template>
  <div class="hello">
  </div>
</template>

<script>
import requests from "@/api/request"
export default {
  name: 'HelloWorld',
  data() {
    return{
      Song: [],
      secondSong:[],
      thirdSong:[],
    }
  }, methods: {
    async getAllSongs() {
      let result = await requests.get('/song/SongAllSheet');
      if(result.status == 200)
      {
        this.Song =  result.data;
      }
      
    },
    async getSongById(value)
    {
       let result = await requests({url:`/Opera/getPersonalOpera/${value}`,methods:'get'})
        if(result.status == 200)
        {
            this.secondSong = result.data;
        }
       
    }
  },
  mounted() {
 
      this.getAllSongs();
      this.getSongById(1);
  },
  
}
</script>
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

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

image-20221008113044121

解决返回数据是Promise的情况

image-20221008111128215

image-20221008111508103

所以只需要在方法里面直接赋值即可
2.4 接口统一管理
2.4.1 接口统一管理的原因

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

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

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

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

image-20221008113735517

import requests from “./request”;

1
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'});
}

简写版

export const reqGetAllSong = ()=>requests({url:'/Opera/getPersonalOpera',methods:'get'});
export const reqGetAllSongByType = (value)=>  requests({url:`/Opera/getPersonalOpera/${value}`,methods:'get'});
1
2
3
4
5
6
7
8
9
10
11

2.4.2.3 接口全局注册

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

image-20221008115507272

在如上位置，写如下代码

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

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

image-20221008115556329

<template>
  <div class="hello">
  </div>
</template>

<script>
import requests from "@/api/request"
export default {
  name: 'HelloWorld',
  data() {
    return{
      Song: [],
      secondSong:[],
      thirdSong:[],
    }
  }, methods: {
    async getAllSongs()
    {
      let result = await this.$API.reqGetAllSongByType(1);
      if(result.status==200)
      {
        this.Song = result.data;
      }
    }
  },
  mounted() {
    this.getAllSongs();
      
  },
  
}
</script>
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

访问成功