@
文章目录
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。
- 从浏览器创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应
- 转换请求和响应数据
- 取消请求
- 自动转换JSON数据
- 客户端支持防御XSRF
npm install axios
在控制台输入 npm install axios -- 回车，当看到package-lock.json的packages里面有了axios，说明引入成功
官方文档传送门 https://cli.vuejs.org/zh/config/#devserver-proxy
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
},
}
}
}
)
module.exports = defineConfig({
lintOnSave: false,
transpileDependencies: true,
devServer: {
proxy: {
'/api': {
target: "http://localhost:9000", //需要跨域的目标地址
pathRewrite: { '^/api': '' },//将带有api的路径重写为''
ws: true,//用于支持WebSocket
changeOrigin: true,//用于控制请求头的Host
},
}
}
}
)
'/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.2.2.6
新建一个api文件，创建request.js 用于引入axios
const requests = axios.create({
baseURL: '/api',
timeout: 50000,
});
- baseURL：追加一个前缀，如你需要访问的地址是localhost:9000/api/song/SongSheet在访问的时候，你只需要写成'localhost:9000/song/SongSheet'
- timeout:访问超时的时间ms，超过这个时间即为访问失败
baseURL: '/api',
timeout: 50000,
});
- baseURL：追加一个前缀，如你需要访问的地址是localhost:9000/api/song/SongSheet在访问的时候，你只需要写成'localhost:9000/song/SongSheet'
- timeout:访问超时的时间ms，超过这个时间即为访问失败
requests.interceptors.request.use(function (config) {
// 在发送请求之前做些什么，例如加入token
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
这里也解决了我困惑已久的一个问题：为什么以前返回的数据没有code，只有单纯的一个数据。
我一度以为要在后端写。
如果这里返回的是config，那么就会有data,status,statusText, headers等等，如果只是返回config.data，那么你看到的就只有data数据了。
requests.interceptors.request.use(function (config) {
// 在发送请求之前做些什么，例如加入token
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});
这里也解决了我困惑已久的一个问题：为什么以前返回的数据没有code，只有单纯的一个数据。
我一度以为要在后端写。
如果这里返回的是config，那么就会有data,status,statusText, headers等等，如果只是返回config.data，那么你看到的就只有data数据了。
requests.interceptors.response.use(function (response) {
// 在接收响应时做些什么，例如跳转到登录页
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
// 在接收响应时做些什么，例如跳转到登录页
return response;
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error);
});
如果不暴露是不能用的
export default requests;
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;
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;
此处的requests 是2.2中axios.create()返回的值，使用前需要引入requests
requests.get('url');
举例：如我想要访问的是localhost:9000/api/song/SongAllSheet
api在baseURL里面配置了，所以我只需要写成
requests.get('/song/SongAllSheet');
/Opera/getPersonalOpera是URL，value是你参数的名字
requests.get(`/Opera/getPersonalOpera/${value}`);
axios.post("url",{
params:{
name:'jok',
age:'18'
}
})
params:{
name:'jok',
age:'18'
}
})
get请求methods:后面为get，post则为post
requests({url:'/Opera/getPersonalOpera',methods:'get'})
此处用的是``，英文下，Tab上面的那个键
requests({url:`/Opera/getPersonalOpera/${value}`,methods:'get'})
<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>
<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的情况
所以只需要在方法里面直接赋值即可
对于较小的项目，使用时在撰写无伤大雅
对于一些比较大型项目，随意写接口，如果后端的接口稍有改动，那么维护起来非常的困难
所以把所有的接口放在一起，而且抽象成一个方法，这样使用起来不需要重复写，而且改动起来也比较方便
对于较小的项目，使用时在撰写无伤大雅
对于一些比较大型项目，随意写接口，如果后端的接口稍有改动，那么维护起来非常的困难
所以把所有的接口放在一起，而且抽象成一个方法，这样使用起来不需要重复写，而且改动起来也比较方便
import requests from "./request";
原版
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'});
这样虽然好管理了，但是如果使用的话，还需要一一引入。
在如上位置，写如下代码
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>
访问成功
© 版权声明
文章版权归作者所有，未经允许请勿转载。
