最近、PC 側で新しいプロジェクトを 0 から 1 まで開発したため、axios などのいくつかの基本的な構成をカプセル化する必要があります。なぜこの記事を記録するためにこの記事を書いたかというと、get リクエストのカプセル化時にミスをしたためです。エラー ( get リクエストのパラメータに params を追加する必要があります。これは固定の書き方です）ので、記録しておきます。
コードを直接アップロードします:
request.js (axios のパッケージに配置されているファイル)
import axios from 'axios'
const baseURL = import.meta.env.VITE_APP_BASE_URL
const service = axios.create({
baseURL: baseURL, // url = base url + request url
timeout: 100000, // request timeout
headers:{
"Content-Type": "application/json",
"token": new URLSearchParams(location.search).get('token'),
}
})
//http request 拦截器
service.interceptors.request.use(
config => {
config.data = JSON.stringify(config.data);
//设置请求头
config.headers = {
'Content-Type': 'application/x-www-form-urlencoded'
};
return config;
},
error => {
return Promise.reject(err);
}
);
//http response 拦截器
service.interceptors.response.use(
response => {
const res = response.data
if (res.code !== 000000) {
console.log('接口信息报错', res.message)
return Promise.reject(new Error(res.message || 'Error'))
} else {
return res.data
}
},
error => {
return Promise.reject(error)
}
);
/**
* 封装get方法
* @param url
* @param data
* @returns {Promise}
*/
// 记住get请求中，params是固定的写法，一定要记住这一点
export function get(url, params = {
}) {
return new Promise((resolve, reject) => {
service.get(url, {
params: params
})
.then(response => {
resolve(response.data);
})
.catch(err => {
reject(err)
})
})
}
/**
* 封装post请求
* @param url
* @param data
* @returns {Promise}
*/
export function post(url, data = {
}) {
return new Promise((resolve, reject) => {
service.post(url, data)
.then(response => {
resolve(response.data);
}, err => {
reject(err)
})
})
}
ピットから多くのことを学びましょう。get リクエストでは、params は固定された書き方であることを覚えておいてください。これを覚えておく必要があります。