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 -- 回车，当看到 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 }, } }
})
复制代码
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, });
复制代码
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 数据了。
2.2.2.2.4 配置响应拦截器
requests.interceptors.response.use(function (response) { // 在接收响应时做些什么，例如跳转到登录页 return response; }, function (error) { // 对响应错误做点什么 return Promise.reject(error); });
复制代码
2.2.2.2.5 暴露
如果不暴露是不能用的
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;
复制代码
2.3 Axios 的直接使用
此处的 requests 是 2.2 中 axios.create()返回的值，使用前需要引入 requests
2.3.1 get 请求
2.3.1.1 无参
举例：如我想要访问的是 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>
复制代码
可以看到是成功拿到数据的
解决返回数据是 Promise 的情况
所以只需要在方法里面直接赋值即可
2.4 接口统一管理
2.4.1 接口统一管理的原因
对于较小的项目，使用时在撰写无伤大雅
对于一些比较大型项目，随意写接口，如果后端的接口稍有改动，那么维护起来非常的困难
所以把所有的接口放在一起，而且抽象成一个方法，这样使用起来不需要重复写，而且改动起来也比较方便
2.4.2 接口管理
2.4.2.1 新建一个 index.js 文件 放置接口，引入 axios
import requests from "./request";
复制代码
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'});
复制代码
2.4.2.3 接口全局注册
这样虽然好管理了，但是如果使用的话，还需要一一引入。
在如上位置，写如下代码
import * as API from '@/api' beforeCreate(){ Vue.prototype.$API = API; },
复制代码
使用之时，前缀加上 this.$API 便可正常使用
<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>
复制代码
访问成功
评论