Axios Sekundärverpackung
Machen Sie sich während des gesamten Prozesses keine Sorgen. Nachdem alle Schritte abgeschlossen sind, werden Sie Erfolg haben. Auf dem Weg zum Erfolg wird es zwangsläufig Fehler geben. Machen Sie sich darüber keine Sorgen, folgen Sie einfach Schritt für Schritt dem ursprünglichen Plan
.
1. Konfigurieren Sie zunächst eine domänenübergreifende Verbindung
Erstellen Sie eine neue vue.config.js-Datei im Stammverzeichnis und fügen Sie den folgenden Code in devServer hinzu
const {
defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
proxy: {
"/api": {
target: "http://实际请求地址的域名",
// ws: true,
changeOrigin: true,
pathRewrite: {
"^/api": ""
},
},
},
},
});
2. Axios verpacken
Erstellen Sie einen neuen Ordner „utils “ unter der src-Datei (denken Sie daran, dass es sich um einen Ordner handelt), erstellen Sie eine neue Datei „requests.js“ im Ordner „utils“ und fügen Sie den folgenden Code zu „requests.js“ hinzu
//对axios进行二次封装,将刚才下载好的axios导入进来
import axios from "axios";
//1.利用axios对象的方法create,去创建一个axios实例
//2.instance就是axios,只不过稍微配置一下
const instance = axios.create({
//配置对象
baseURL: 'http://localhost:8081',//存在跨域的话此处地址为本地地址，
});
//请求拦截器:在发请求之前，请求拦截器可以检测到,可以在请求发出去之前做一些事情
instance.interceptors.request.use(function (config) {
console.log("请求成功拦截器执行");
//config是个配置对象，对象里面有一个属性很重要，headers请求头
return config;
}, function (error) {
console.log("请求失败拦截器执行");
return Promise.reject(error)
});
// //响应拦截器：包含两个函数（一个是成功返回的函数，一个是失败的返回的函数）
instance.interceptors.response.use((response) => {
console.log("响应成功拦截器执行");
//成功的回调函数：服务器响应数据回来以后，响应拦截器可以检测到，可以做一些事情。
if(response.data.code===200){
return response=response.data.data;
}
}, (error) => {
if (error && error.response) {
switch (error.response.status) {
case 400:
error.message = '错误请求'
break;
case 401:
error.message = '未授权，请重新登录'
break;
case 403:
error.message = '拒绝访问'
break;
case 404:
error.message = '请求错误,未找到该资源'
break;
case 405:
error.message = '请求方法未允许'
break;
case 408:
error.message = '请求超时'
break;
case 500:
error.message = '服务器端出错'
break;
case 501:
error.message = '网络未实现'
break;
case 502:
error.message = '网络错误'
break;
case 503:
error.message = '服务不可用'
break;
case 504:
error.message = '网络超时'
break;
case 505:
error.message = 'http版本不支持该请求'
break;
default:
error.message = `连接错误${
error.response.status}`
}
} else {
error.message = "连接到服务器失败"
}
console.log("响应失败拦截器执行");
return Promise.reject(error)
});
//对外暴露instance(axios的二次封装)
export default instance;
3. Kapselungsanforderungsmethode. Verwenden Sie hier get und post, um ein Beispiel zu erstellen
Erstellen Sie einen neuen API- Ordner unter der SRC-Datei (denken Sie daran, dass es sich um einen Ordner handelt), erstellen Sie eine neue index.js- Datei im API-Ordner und fügen Sie index.js den folgenden Code hinzu
//导入刚才写好的axios二次封装的instance
// 此模块封装get、post 等 请求方式
import request from "@/utils/requests"
//三级联动接口
// get请求
export const myGet = (getUrl) => {
return request({
url: getUrl,
method: 'get'
})
}
// post请求
export const myPost = (postUrl,params) => {
return request({
url:postUrl,
method: 'post',
data:params
})
}
4. Erledigen Sie Dinge, bei denen Sie eine Anfrage senden müssen
Dies bedeutet, dass Sie in den entsprechenden Hook-Funktionen in der Komponente, z. B. gemountet, erstellt usw., jede Anfrage schreiben können, die gesendet werden kann. Geben Sie vor dem Senden
der Anfrage die gepackte Anfrage ein. Hier können Sie die entsprechende Anfrage direkt einführen Methode.
const gxData = {
gxId: 101,
};
myPost("api/xz/getXzTreeByGxId", gxData)
// this.axios.post("api/prod-api/rygs/xz/getXzTreeByGxId",gxData)
// request({
// url:"api/xz/getXzTreeByGxId",
// method:"post",
// data:{
// gxId:101
// }
// })
.then((res) => {
console.log("res", res);
return (this.data = res);
})
.catch((err) => console.log("err000", err));